English

Within the application-focused generic top-level domain (.app), 'protective-ivory-a1e3l7eh-dp44g626ygh1.edgeone.app' is registered; it also runs on subdomain 'protective-ivory-a1e3l7eh-dp44g626ygh1'. Count 7 characters in 'edgeone' split between 4 vowels and 3 consonants. Breaking it apart gives 2 words: edge, one. Median word length comes out to 3.5 characters. No strong language cues emerged from the frequency lists.

html/12/b5/12b5dde0-63df-4ba7-9c37-4c876e2285ce.html.gz

fce1912f7f36ecb7da9336ddf7cb02f31f1b55ab534178719ad2d162e3e8cc70

92fae7e6bd763ee7fc7ca976600b7af56d6f15456a4208c22543094869b06542

12dd01f7a72150101fe804fdca29300d0933f3b3701e6a79827ab2b0ded62fa9

e1cbfaa64ccfdcf33c035dce85f100cd1f76c6dceb2b5d64f2a3568ffb76a5d6

db66befcca59d9862f0dfa13f1e9799f1189485573c9d8c5fa3be8023a8ebb92

316f7d586168f1a54000ab7597d5f1747a7a64572ab2b24d4caac187203401c1

b94df8cd697f6fe6bd2d7ec74da8c780b8ca19337e06166fa047dd9d35e6be65

8ad0c7a69dac109cbb490f674c637479dbdf67796786a481ca6f2d4a9d04d41e

965b75c29a81642d28cb8e223d5bd0e218a6b62492351b87c333c23eb697c239

0873ef6366724920a4467fa708a6cf2078aff496af21ce07fdf0065ac05e8a11

3e94c3ec1e9ceeb85a9681850663f2d2bb27b382b36c00f423fb45d0e8ac12d4

2308edf5c5bc46fa7f3aa3f10ff7b72fc628ac6d6e77dff5d18c71412c9c39fa

23314e9d0ce3abb0c72126b292b066ae01f27666e2b3bc913e736e85be64f6bf

72b813e19c3c97ac4d7fb7d50efec28c35c5be57065c51ad21ab261bd7ab6d7d

bd298fe6572a4190a51afceb651f652a46779f949db44b931d4a2e467e5e892e

ee9314fc87236f48e3aa7b1c5d2b89762b015775a89dd7d3ff5949dde5c64915

04c690c6ba1ca6f964c4fab39198473e093f39856b19179436277fe8b887ce41

8c396c66878712a16193588d5c00eeb1faded8e03156e8d6c148b609b6042f9f

8d13ae0de8b115bcf89ac5a0f8e4fd02d2904b9526251b306c31d792492d3786

viewport

HSTS header missing - vulnerable to protocol downgrade attacks

CSP header missing - vulnerable to XSS attacks

Prudence Malinki

MarkMonitor Inc.

edgeone.app

IRT-SG-ACE

ACE administrator

ACE-SG

window.__resources = {"lumenLogo":"blob:https://protective-ivory-a1e3l7eh-dp44g626ygh1.edgeone.app/f805ddc4-83c6-4b6c-b527-c8ca7c63dd85"};

"use strict";

function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
// ============================================================
// dash-icons.jsx — single icon component, stroke = currentColor
// ============================================================
var ICON_PATHS = {
  // nav
  grid: 'M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z',
  file: 'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5',
  refresh: 'M21 12a9 9 0 1 1-2.64-6.36M21 4v5h-5',
  hospital: 'M4 21V8l8-5 8 5v13M9 21v-6h6v6M12 7v4M10 9h4',
  users: 'M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM22 20v-2a4 4 0 0 0-3-3.87M16 4.13A4 4 0 0 1 16 11.5',
  analytics: 'M4 19h16M7 16V9m5 7V5m5 11v-6',
  bell: 'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  doc: 'M4 4h16M4 10h16M4 16h10',
  building: 'M4 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16M15 9h3a2 2 0 0 1 2 2v10M8 7h2M8 11h2M8 15h2',
  gear: 'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.81 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 11 4.6h.09A1.65 1.65 0 0 0 12 3.09V3a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 18 4.6l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9V9c.69 0 1.34.27 1.83.76',
  // kpi
  wallet: 'M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7zM3 7l2.5-3.5h11L19 7M16 13h.01',
  clock: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
  filedot: 'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h4',
  gauge: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 12l4-3',
  xcircle: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM15 9l-6 6M9 9l6 6',
  heart: 'M19.5 5.5a5 5 0 0 0-7.5.5 5 5 0 0 0-7.5-.5C2.5 7.5 2.8 11 5 13l7 7 7-7c2.2-2 2.5-5.5.5-7.5z',
  // status
  shieldcheck: 'M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3zM9 12l2 2 4-4',
  warntri: 'M12 3 2 20h20L12 3zM12 9v5M12 18h.01',
  alertoct: 'M8 2h8l6 6v8l-6 6H8l-6-6V8zM12 8v4M12 16h.01',
  info: 'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 7.5h.01',
  // ui
  calendar: 'M7 3v3M17 3v3M4 8h16M5 5h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z',
  filter: 'M3 5h18l-7 8v6l-4 2v-8z',
  download: 'M12 3v12M7 10l5 5 5-5M4 19h16',
  chevdown: 'M6 9l6 6 6-6',
  chevright: 'M9 6l6 6-6 6',
  chevleft: 'M15 6l-6 6 6 6',
  search: 'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-3-3',
  sun: 'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
  moon: 'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z',
  arrowup: 'M12 19V5M5 12l7-7 7 7',
  arrowdown: 'M12 5v14M5 12l7 7 7-7'
};
var Icon = function Icon(_ref) {
  var name = _ref.name,
    _ref$size = _ref.size,
    size = _ref$size === void 0 ? 18 : _ref$size,
    _ref$strokeWidth = _ref.strokeWidth,
    strokeWidth = _ref$strokeWidth === void 0 ? 1.8 : _ref$strokeWidth,
    _ref$fill = _ref.fill,
    fill = _ref$fill === void 0 ? 'none' : _ref$fill,
    style = _ref.style;
  return /*#__PURE__*/React.createElement("svg", {
    width: size,
    height: size,
    viewBox: "0 0 24 24",
    fill: fill,
    stroke: "currentColor",
    strokeWidth: strokeWidth,
    strokeLinecap: "round",
    strokeLinejoin: "round",
    style: style
  }, /*#__PURE__*/React.createElement("path", {
    d: ICON_PATHS[name] || ''
  }));
};

// Tooltip wrapper for the little info icons
var InfoTip = function InfoTip(_ref2) {
  var text = _ref2.text,
    t = _ref2.t;
  var _useState = useState(false),
    _useState2 = _slicedToArray(_useState, 2),
    show = _useState2[0],
    setShow = _useState2[1];
  return /*#__PURE__*/React.createElement("span", {
    style: {
      position: 'relative',
      display: 'inline-flex',
      color: t.textMuted,
      cursor: 'help'
    },
    onMouseEnter: function onMouseEnter() {
      return setShow(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setShow(false);
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    name: "info",
    size: 14
  }), show && /*#__PURE__*/React.createElement("span", {
    style: {
      position: 'absolute',
      bottom: '140%',
      left: '50%',
      transform: 'translateX(-50%)',
      background: t.textPrimary,
      color: t.appBg,
      fontSize: 11,
      fontWeight: 500,
      padding: '7px 10px',
      borderRadius: 8,
      width: 180,
      lineHeight: 1.4,
      zIndex: 50,
      boxShadow: '0 8px 24px rgba(0,0,0,0.25)',
      textAlign: 'center',
      pointerEvents: 'none'
    }
  }, text));
};
window.Icon = Icon;
window.InfoTip = InfoTip;
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJJQ09OX1BBVEhTIiwiZ3JpZCIsImZpbGUiLCJyZWZyZXNoIiwiaG9zcGl0YWwiLCJ1c2VycyIsImFuYWx5dGljcyIsImJlbGwiLCJkb2MiLCJidWlsZGluZyIsImdlYXIiLCJ3YWxsZXQiLCJjbG9jayIsImZpbGVkb3QiLCJnYXVnZSIsInhjaXJjbGUiLCJoZWFydCIsInNoaWVsZGNoZWNrIiwid2FybnRyaSIsImFsZXJ0b2N0IiwiaW5mbyIsImNhbGVuZGFyIiwiZmlsdGVyIiwiZG93bmxvYWQiLCJjaGV2ZG93biIsImNoZXZyaWdodCIsImNoZXZsZWZ0Iiwic2VhcmNoIiwic3VuIiwibW9vbiIsImFycm93dXAiLCJhcnJvd2Rvd24iLCJJY29uIiwiX3JlZiIsIm5hbWUiLCJfcmVmJHNpemUiLCJzaXplIiwiX3JlZiRzdHJva2VXaWR0aCIsInN0cm9rZVdpZHRoIiwiX3JlZiRmaWxsIiwiZmlsbCIsInN0eWxlIiwiUmVhY3QiLCJjcmVhdGVFbGVtZW50Iiwid2lkdGgiLCJoZWlnaHQiLCJ2aWV3Qm94Iiwic3Ryb2tlIiwic3Ryb2tlTGluZWNhcCIsInN0cm9rZUxpbmVqb2luIiwiZCIsIkluZm9UaXAiLCJfcmVmMiIsInRleHQiLCJ0IiwiX3VzZVN0YXRlIiwidXNlU3RhdGUiLCJfdXNlU3RhdGUyIiwiX3NsaWNlZFRvQXJyYXkiLCJzaG93Iiwic2V0U2hvdyIsInBvc2l0aW9uIiwiZGlzcGxheSIsImNvbG9yIiwidGV4dE11dGVkIiwiY3Vyc29yIiwib25Nb3VzZUVudGVyIiwib25Nb3VzZUxlYXZlIiwiYm90dG9tIiwibGVmdCIsInRyYW5zZm9ybSIsImJhY2tncm91bmQiLCJ0ZXh0UHJpbWFyeSIsImFwcEJnIiwiZm9udFNpemUiLCJmb250V2VpZ2h0IiwicGFkZGluZyIsImJvcmRlclJhZGl1cyIsImxpbmVIZWlnaHQiLCJ6SW5kZXgiLCJib3hTaGFkb3ciLCJ0ZXh0QWxpZ24iLCJwb2ludGVyRXZlbnRzIiwid2luZG93Il0sInNvdXJjZXMiOlsiSW5saW5lIEJhYmVsIHNjcmlwdCAoMikiXSwic291cmNlc0NvbnRlbnQiOlsiLy8gPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG4vLyBkYXNoLWljb25zLmpzeCDigJQgc2luZ2xlIGljb24gY29tcG9uZW50LCBzdHJva2UgPSBjdXJyZW50Q29sb3Jcbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PVxuY29uc3QgSUNPTl9QQVRIUyA9IHtcbiAgLy8gbmF2XG4gIGdyaWQ6ICAgICAgJ00zIDNoN3Y3SDN6TTE0IDNoN3Y3aC03ek0xNCAxNGg3djdoLTd6TTMgMTRoN3Y3SDN6JyxcbiAgZmlsZTogICAgICAnTTE0IDNIN2EyIDIgMCAwIDAtMiAydjE0YTIgMiAwIDAgMCAyIDJoMTBhMiAyIDAgMCAwIDItMlY4ek0xNCAzdjVoNScsXG4gIHJlZnJlc2g6ICAgJ00yMSAxMmE5IDkgMCAxIDEtMi42NC02LjM2TTIxIDR2NWgtNScsXG4gIGhvc3BpdGFsOiAgJ000IDIxVjhsOC01IDggNXYxM005IDIxdi02aDZ2Nk0xMiA3djRNMTAgOWg0JyxcbiAgdXNlcnM6ICAgICAnTTE2IDIwdi0yYTQgNCAwIDAgMC00LTRINmE0IDQgMCAwIDAtNCA0djJNOSAxMWEzLjUgMy41IDAgMSAwIDAtNyAzLjUgMy41IDAgMCAwIDAgN3pNMjIgMjB2LTJhNCA0IDAgMCAwLTMtMy44N00xNiA0LjEzQTQgNCAwIDAgMSAxNiAxMS41JyxcbiAgYW5hbHl0aWNzOiAnTTQgMTloMTZNNyAxNlY5bTUgN1Y1bTUgMTF2LTYnLFxuICBiZWxsOiAgICAgICdNMTggOGE2IDYgMCAxIDAtMTIgMGMwIDctMyA5LTMgOWgxOHMtMy0yLTMtOU0xMy43IDIxYTIgMiAwIDAgMS0zLjQgMCcsXG4gIGRvYzogICAgICAgJ000IDRoMTZNNCAxMGgxNk00IDE2aDEwJyxcbiAgYnVpbGRpbmc6ICAnTTQgMjFWNWEyIDIgMCAwIDEgMi0yaDdhMiAyIDAgMCAxIDIgMnYxNk0xNSA5aDNhMiAyIDAgMCAxIDIgMnYxME04IDdoMk04IDExaDJNOCAxNWgyJyxcbiAgZ2VhcjogICAgICAnTTEyIDE1YTMgMyAwIDEgMCAwLTYgMyAzIDAgMCAwIDAgNnpNMTkuNCAxNWExLjY1IDEuNjUgMCAwIDAgLjMzIDEuODJsLjA2LjA2YTIgMiAwIDEgMS0yLjgzIDIuODNsLS4wNi0uMDZhMS42NSAxLjY1IDAgMCAwLTIuODEgMS4xN1YyMWEyIDIgMCAwIDEtNCAwdi0uMDlBMS42NSAxLjY1IDAgMCAwIDkgMTkuNGExLjY1IDEuNjUgMCAwIDAtMS44Mi4zM2wtLjA2LjA2YTIgMiAwIDEgMS0yLjgzLTIuODNsLjA2LS4wNkExLjY1IDEuNjUgMCAwIDAgNC42IDE1SDQuNWEyIDIgMCAwIDEgMC00aC4wOUExLjY1IDEuNjUgMCAwIDAgNiA5YTEuNjUgMS42NSAwIDAgMC0uMzMtMS44MmwtLjA2LS4wNmEyIDIgMCAxIDEgMi44My0yLjgzbC4wNi4wNkExLjY1IDEuNjUgMCAwIDAgMTEgNC42aC4wOUExLjY1IDEuNjUgMCAwIDAgMTIgMy4wOVYzYTIgMiAwIDAgMSA0IDB2LjA5QTEuNjUgMS42NSAwIDAgMCAxOCA0LjZsLjA2LS4wNmEyIDIgMCAwIDEgMi44MyAyLjgzbC0uMDYuMDZBMS42NSAxLjY1IDAgMCAwIDE5LjQgOVY5Yy42OSAwIDEuMzQuMjcgMS44My43NicsXG4gIC8vIGtwaVxuICB3YWxsZXQ6ICAgICdNMyA3aDE1YTIgMiAwIDAgMSAyIDJ2OGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMlY3ek0zIDdsMi41LTMuNWgxMUwxOSA3TTE2IDEzaC4wMScsXG4gIGNsb2NrOiAgICAgJ00xMiAyMWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHpNMTIgN3Y1bDMgMicsXG4gIGZpbGVkb3Q6ICAgJ00xNCAzSDdhMiAyIDAgMCAwLTIgMnYxNGEyIDIgMCAwIDAgMiAyaDEwYTIgMiAwIDAgMCAyLTJWOHpNMTQgM3Y1aDVNOSAxM2g2TTkgMTdoNCcsXG4gIGdhdWdlOiAgICAgJ00xMiAyMWE5IDkgMCAxIDAgMC0xOCA5IDkgMCAwIDAgMCAxOHpNMTIgMTJsNC0zJyxcbiAgeGNpcmNsZTogICAnTTEyIDIxYTkgOSAwIDEgMCAwLTE4IDkgOSAwIDAgMCAwIDE4ek0xNSA5bC02IDZNOSA5bDYgNicsXG4gIGhlYXJ0OiAgICAgJ00xOS41IDUuNWE1IDUgMCAwIDAtNy41LjUgNSA1IDAgMCAwLTcuNS0uNUMyLjUgNy41IDIuOCAxMSA1IDEzbDcgNyA3LTdjMi4yLTIgMi41LTUuNS41LTcuNXonLFxuICAvLyBzdGF0dXNcbiAgc2hpZWxkY2hlY2s6J00xMiAzbDcgM3Y1YzAgNC41LTMgOC41LTcgMTAtNC0xLjUtNy01LjUtNy0xMFY2bDctM3pNOSAxMmwyIDIgNC00JyxcbiAgd2FybnRyaTogICAnTTEyIDMgMiAyMGgyMEwxMiAzek0xMiA5djVNMTIgMThoLjAxJyxcbiAgYWxlcnRvY3Q6ICAnTTggMmg4bDYgNnY4bC02IDZIOGwtNi02Vjh6TTEyIDh2NE0xMiAxNmguMDEnLFxuICBpbmZvOiAgICAgICdNMTIgMjFhOSA5IDAgMSAwIDAtMTggOSA5IDAgMCAwIDAgMTh6TTEyIDExdjVNMTIgNy41aC4wMScsXG4gIC8vIHVpXG4gIGNhbGVuZGFyOiAgJ003IDN2M00xNyAzdjNNNCA4aDE2TTUgNWgxNGExIDEgMCAwIDEgMSAxdjE0YTEgMSAwIDAgMS0xIDFINWExIDEgMCAwIDEtMS0xVjZhMSAxIDAgMCAxIDEtMXonLFxuICBmaWx0ZXI6ICAgICdNMyA1aDE4bC03IDh2NmwtNCAydi04eicsXG4gIGRvd25sb2FkOiAgJ00xMiAzdjEyTTcgMTBsNSA1IDUtNU00IDE5aDE2JyxcbiAgY2hldmRvd246ICAnTTYgOWw2IDYgNi02JyxcbiAgY2hldnJpZ2h0OiAnTTkgNmw2IDYtNiA2JyxcbiAgY2hldmxlZnQ6ICAnTTE1IDZsLTYgNiA2IDYnLFxuICBzZWFyY2g6ICAgICdNMTEgMThhNyA3IDAgMSAwIDAtMTQgNyA3IDAgMCAwIDAgMTR6TTIwIDIwbC0zLTMnLFxuICBzdW46ICAgICAgICdNMTIgMTdhNSA1IDAgMSAwIDAtMTAgNSA1IDAgMCAwIDAgMTB6TTEyIDF2Mk0xMiAyMXYyTTQuMiA0LjJsMS40IDEuNE0xOC40IDE4LjRsMS40IDEuNE0xIDEyaDJNMjEgMTJoMk00LjIgMTkuOGwxLjQtMS40TTE4LjQgNS42bDEuNC0xLjQnLFxuICBtb29uOiAgICAgICdNMjEgMTIuOEE5IDkgMCAxIDEgMTEuMiAzYTcgNyAwIDAgMCA5LjggOS44eicsXG4gIGFycm93dXA6ICAgJ00xMiAxOVY1TTUgMTJsNy03IDcgNycsXG4gIGFycm93ZG93bjogJ00xMiA1djE0TTUgMTJsNyA3IDctNycsXG59O1xuXG5jb25zdCBJY29uID0gKHsgbmFtZSwgc2l6ZSA9IDE4LCBzdHJva2VXaWR0aCA9IDEuOCwgZmlsbCA9ICdub25lJywgc3R5bGUgfSkgPT4gKFxuICA8c3ZnIHdpZHRoPXtzaXplfSBoZWlnaHQ9e3NpemV9IHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBmaWxsPXtmaWxsfSBzdHJva2U9XCJjdXJyZW50Q29sb3JcIlxuICAgICAgIHN0cm9rZVdpZHRoPXtzdHJva2VXaWR0aH0gc3Ryb2tlTGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlTGluZWpvaW49XCJyb3VuZFwiIHN0eWxlPXtzdHlsZX0+XG4gICAgPHBhdGggZD17SUNPTl9QQVRIU1tuYW1lXSB8fCAnJ30gLz5cbiAgPC9zdmc+XG4pO1xuXG4vLyBUb29sdGlwIHdyYXBwZXIgZm9yIHRoZSBsaXR0bGUgaW5mbyBpY29uc1xuY29uc3QgSW5mb1RpcCA9ICh7IHRleHQsIHQgfSkgPT4ge1xuICBjb25zdCBbc2hvdywgc2V0U2hvd10gPSB1c2VTdGF0ZShmYWxzZSk7XG4gIHJldHVybiAoXG4gICAgPHNwYW4gc3R5bGU9e3sgcG9zaXRpb246J3JlbGF0aXZlJywgZGlzcGxheTonaW5saW5lLWZsZXgnLCBjb2xvcjp0LnRleHRNdXRlZCwgY3Vyc29yOidoZWxwJyB9fVxuICAgICAgICAgIG9uTW91c2VFbnRlcj17KCk9PnNldFNob3codHJ1ZSl9IG9uTW91c2VMZWF2ZT17KCk9PnNldFNob3coZmFsc2UpfT5cbiAgICAgIDxJY29uIG5hbWU9XCJpbmZvXCIgc2l6ZT17MTR9IC8+XG4gICAgICB7c2hvdyAmJiAoXG4gICAgICAgIDxzcGFuIHN0eWxlPXt7XG4gICAgICAgICAgcG9zaXRpb246J2Fic29sdXRlJywgYm90dG9tOicxNDAlJywgbGVmdDonNTAlJywgdHJhbnNmb3JtOid0cmFuc2xhdGVYKC01MCUpJyxcbiAgICAgICAgICBiYWNrZ3JvdW5kOiB0LnRleHRQcmltYXJ5LCBjb2xvcjogdC5hcHBCZywgZm9udFNpemU6MTEsIGZvbnRXZWlnaHQ6NTAwLFxuICAgICAgICAgIHBhZGRpbmc6JzdweCAxMHB4JywgYm9yZGVyUmFkaXVzOjgsIHdpZHRoOjE4MCwgbGluZUhlaWdodDoxLjQsIHpJbmRleDo1MCxcbiAgICAgICAgICBib3hTaGFkb3c6JzAgOHB4IDI0cHggcmdiYSgwLDAsMCwwLjI1KScsIHRleHRBbGlnbjonY2VudGVyJywgcG9pbnRlckV2ZW50czonbm9uZScsXG4gICAgICAgIH19Pnt0ZXh0fTwvc3Bhbj5cbiAgICAgICl9XG4gICAgPC9zcGFuPlxuICApO1xufTtcblxud2luZG93Lkljb24gPSBJY29uO1xud2luZG93LkluZm9UaXAgPSBJbmZvVGlwO1xuIl0sIm1hcHBpbmdzIjoiOzs7Ozs7OztBQUFBO0FBQ0E7QUFDQTtBQUNBLElBQU1BLFVBQVUsR0FBRztFQUNqQjtFQUNBQyxJQUFJLEVBQU8sb0RBQW9EO0VBQy9EQyxJQUFJLEVBQU8scUVBQXFFO0VBQ2hGQyxPQUFPLEVBQUksc0NBQXNDO0VBQ2pEQyxRQUFRLEVBQUcsOENBQThDO0VBQ3pEQyxLQUFLLEVBQU0seUlBQXlJO0VBQ3BKQyxTQUFTLEVBQUUsK0JBQStCO0VBQzFDQyxJQUFJLEVBQU8sc0VBQXNFO0VBQ2pGQyxHQUFHLEVBQVEseUJBQXlCO0VBQ3BDQyxRQUFRLEVBQUcsc0ZBQXNGO0VBQ2pHQyxJQUFJLEVBQU8sNGhCQUE0aEI7RUFDdmlCO0VBQ0FDLE1BQU0sRUFBSyx3RkFBd0Y7RUFDbkdDLEtBQUssRUFBTSxrREFBa0Q7RUFDN0RDLE9BQU8sRUFBSSxtRkFBbUY7RUFDOUZDLEtBQUssRUFBTSxpREFBaUQ7RUFDNURDLE9BQU8sRUFBSSx5REFBeUQ7RUFDcEVDLEtBQUssRUFBTSw2RkFBNkY7RUFDeEc7RUFDQUMsV0FBVyxFQUFDLG1FQUFtRTtFQUMvRUMsT0FBTyxFQUFJLHNDQUFzQztFQUNqREMsUUFBUSxFQUFHLDhDQUE4QztFQUN6REMsSUFBSSxFQUFPLDBEQUEwRDtFQUNyRTtFQUNBQyxRQUFRLEVBQUcsNkZBQTZGO0VBQ3hHQyxNQUFNLEVBQUsseUJBQXlCO0VBQ3BDQyxRQUFRLEVBQUcsK0JBQStCO0VBQzFDQyxRQUFRLEVBQUcsY0FBYztFQUN6QkMsU0FBUyxFQUFFLGNBQWM7RUFDekJDLFFBQVEsRUFBRyxnQkFBZ0I7RUFDM0JDLE1BQU0sRUFBSyxrREFBa0Q7RUFDN0RDLEdBQUcsRUFBUSx5SUFBeUk7RUFDcEpDLElBQUksRUFBTyw4Q0FBOEM7RUFDekRDLE9BQU8sRUFBSSx1QkFBdUI7RUFDbENDLFNBQVMsRUFBRTtBQUNiLENBQUM7QUFFRCxJQUFNQyxJQUFJLEdBQUcsU0FBUEEsSUFBSUEsQ0FBQUMsSUFBQTtFQUFBLElBQU1DLElBQUksR0FBQUQsSUFBQSxDQUFKQyxJQUFJO0lBQUFDLFNBQUEsR0FBQUYsSUFBQSxDQUFFRyxJQUFJO0lBQUpBLElBQUksR0FBQUQsU0FBQSxjQUFHLEVBQUUsR0FBQUEsU0FBQTtJQUFBRSxnQkFBQSxHQUFBSixJQUFBLENBQUVLLFdBQVc7SUFBWEEsV0FBVyxHQUFBRCxnQkFBQSxjQUFHLEdBQUcsR0FBQUEsZ0JBQUE7SUFBQUUsU0FBQSxHQUFBTixJQUFBLENBQUVPLElBQUk7SUFBSkEsSUFBSSxHQUFBRCxTQUFBLGNBQUcsTUFBTSxHQUFBQSxTQUFBO0lBQUVFLEtBQUssR0FBQVIsSUFBQSxDQUFMUSxLQUFLO0VBQUEsb0JBQ3RFQyxLQUFBLENBQUFDLGFBQUE7SUFBS0MsS0FBSyxFQUFFUixJQUFLO0lBQUNTLE1BQU0sRUFBRVQsSUFBSztJQUFDVSxPQUFPLEVBQUMsV0FBVztJQUFDTixJQUFJLEVBQUVBLElBQUs7SUFBQ08sTUFBTSxFQUFDLGNBQWM7SUFDaEZULFdBQVcsRUFBRUEsV0FBWTtJQUFDVSxhQUFhLEVBQUMsT0FBTztJQUFDQyxjQUFjLEVBQUMsT0FBTztJQUFDUixLQUFLLEVBQUVBO0VBQU0sZ0JBQ3ZGQyxLQUFBLENBQUFDLGFBQUE7SUFBTU8sQ0FBQyxFQUFFbEQsVUFBVSxDQUFDa0MsSUFBSSxDQUFDLElBQUk7RUFBRyxDQUFFLENBQy9CLENBQUM7QUFBQSxDQUNQOztBQUVEO0FBQ0EsSUFBTWlCLE9BQU8sR0FBRyxTQUFWQSxPQUFPQSxDQUFBQyxLQUFBLEVBQW9CO0VBQUEsSUFBZEMsSUFBSSxHQUFBRCxLQUFBLENBQUpDLElBQUk7SUFBRUMsQ0FBQyxHQUFBRixLQUFBLENBQURFLENBQUM7RUFDeEIsSUFBQUMsU0FBQSxHQUF3QkMsUUFBUSxDQUFDLEtBQUssQ0FBQztJQUFBQyxVQUFBLEdBQUFDLGNBQUEsQ0FBQUgsU0FBQTtJQUFoQ0ksSUFBSSxHQUFBRixVQUFBO0lBQUVHLE9BQU8sR0FBQUgsVUFBQTtFQUNwQixvQkFDRWYsS0FBQSxDQUFBQyxhQUFBO0lBQU1GLEtBQUssRUFBRTtNQUFFb0IsUUFBUSxFQUFDLFVBQVU7TUFBRUMsT0FBTyxFQUFDLGFBQWE7TUFBRUMsS0FBSyxFQUFDVCxDQUFDLENBQUNVLFNBQVM7TUFBRUMsTUFBTSxFQUFDO0lBQU8sQ0FBRTtJQUN4RkMsWUFBWSxFQUFFLFNBQWRBLFlBQVlBLENBQUE7TUFBQSxPQUFNTixPQUFPLENBQUMsSUFBSSxDQUFDO0lBQUEsQ0FBQztJQUFDTyxZQUFZLEVBQUUsU0FBZEEsWUFBWUEsQ0FBQTtNQUFBLE9BQU1QLE9BQU8sQ0FBQyxLQUFLLENBQUM7SUFBQTtFQUFDLGdCQUN0RWxCLEtBQUEsQ0FBQUMsYUFBQSxDQUFDWCxJQUFJO0lBQUNFLElBQUksRUFBQyxNQUFNO0lBQUNFLElBQUksRUFBRTtFQUFHLENBQUUsQ0FBQyxFQUM3QnVCLElBQUksaUJBQ0hqQixLQUFBLENBQUFDLGFBQUE7SUFBTUYsS0FBSyxFQUFFO01BQ1hvQixRQUFRLEVBQUMsVUFBVTtNQUFFTyxNQUFNLEVBQUMsTUFBTTtNQUFFQyxJQUFJLEVBQUMsS0FBSztNQUFFQyxTQUFTLEVBQUMsa0JBQWtCO01BQzVFQyxVQUFVLEVBQUVqQixDQUFDLENBQUNrQixXQUFXO01BQUVULEtBQUssRUFBRVQsQ0FBQyxDQUFDbUIsS0FBSztNQUFFQyxRQUFRLEVBQUMsRUFBRTtNQUFFQyxVQUFVLEVBQUMsR0FBRztNQUN0RUMsT0FBTyxFQUFDLFVBQVU7TUFBRUMsWUFBWSxFQUFDLENBQUM7TUFBRWpDLEtBQUssRUFBQyxHQUFHO01BQUVrQyxVQUFVLEVBQUMsR0FBRztNQUFFQyxNQUFNLEVBQUMsRUFBRTtNQUN4RUMsU0FBUyxFQUFDLDZCQUE2QjtNQUFFQyxTQUFTLEVBQUMsUUFBUTtNQUFFQyxhQUFhLEVBQUM7SUFDN0U7RUFBRSxHQUFFN0IsSUFBVyxDQUViLENBQUM7QUFFWCxDQUFDO0FBRUQ4QixNQUFNLENBQUNuRCxJQUFJLEdBQUdBLElBQUk7QUFDbEJtRCxNQUFNLENBQUNoQyxPQUFPLEdBQUdBLE9BQU8iLCJpZ25vcmVMaXN0IjpbXX0=

"use strict";

ReactDOM.createRoot(document.getElementById('root')).render(/*#__PURE__*/React.createElement(window.HDApp, null));
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJuYW1lcyI6WyJSZWFjdERPTSIsImNyZWF0ZVJvb3QiLCJkb2N1bWVudCIsImdldEVsZW1lbnRCeUlkIiwicmVuZGVyIiwiUmVhY3QiLCJjcmVhdGVFbGVtZW50Iiwid2luZG93IiwiSERBcHAiXSwic291cmNlcyI6WyJJbmxpbmUgQmFiZWwgc2NyaXB0ICg5KSJdLCJzb3VyY2VzQ29udGVudCI6WyJcbiAgICBSZWFjdERPTS5jcmVhdGVSb290KGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyb290JykpLnJlbmRlcig8d2luZG93LkhEQXBwLz4pO1xuICAiXSwibWFwcGluZ3MiOiI7O0FBQ0lBLFFBQVEsQ0FBQ0MsVUFBVSxDQUFDQyxRQUFRLENBQUNDLGNBQWMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDQyxNQUFNLGNBQUNDLEtBQUEsQ0FBQUMsYUFBQSxDQUFDQyxNQUFNLENBQUNDLEtBQUssTUFBQyxDQUFDLENBQUMiLCJpZ25vcmVMaXN0IjpbXX0=

// ============================================================
// dash-data.jsx — theme tokens, mock data, icons, anim hooks
// ============================================================
const { useState, useEffect, useRef, useMemo, useCallback } = React;

// ---------- Theme tokens ----------
const TOKENS = {
  light: {
    appBg: '#eef1f7',
    appBg2: '#e7ebf4',
    sidebarBg: '#0c1a2e',
    sidebarItem: 'rgba(255,255,255,0.55)',
    sidebarItemActive: '#ffffff',
    sidebarActiveBg: 'linear-gradient(90deg, #2f6bf6, #4d8bff)',
    sidebarBorder: 'rgba(255,255,255,0.06)',
    cardBg: '#ffffff',
    cardBorder: '#e7ebf3',
    cardShadow: '0 1px 2px rgba(16,28,56,0.04), 0 8px 24px rgba(16,28,56,0.05)',
    cardShadowHover: '0 8px 18px rgba(16,28,56,0.08), 0 18px 50px rgba(47,107,246,0.14)',
    textPrimary: '#16203a',
    textSecondary: '#697186',
    textMuted: '#9aa2b4',
    accent: '#2f6bf6',
    accentSoft: 'rgba(47,107,246,0.10)',
    divider: '#eef1f6',
    chipBg: '#f3f5fa',
    headerBg: 'rgba(255,255,255,0.85)',
    track: '#eef1f6',
    blue: '#2f6bf6',
    blueSoft: 'rgba(47,107,246,0.12)',
    amber: '#f59e0b',
    amberSoft: 'rgba(245,158,11,0.14)',
  },
  dark: {
    appBg: '#0a1424',
    appBg2: '#0a1424',
    sidebarBg: '#0a1626',
    sidebarItem: 'rgba(255,255,255,0.55)',
    sidebarItemActive: '#ffffff',
    sidebarActiveBg: 'linear-gradient(90deg, #2f6bf6, #4d8bff)',
    sidebarBorder: 'rgba(255,255,255,0.06)',
    cardBg: '#101e34',
    cardBorder: 'rgba(255,255,255,0.07)',
    cardShadow: '0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.3)',
    cardShadowHover: '0 10px 24px rgba(0,0,0,0.45), 0 18px 50px rgba(47,107,246,0.25)',
    textPrimary: '#f3f6fc',
    textSecondary: 'rgba(255,255,255,0.62)',
    textMuted: 'rgba(255,255,255,0.40)',
    accent: '#4d8bff',
    accentSoft: 'rgba(77,139,255,0.16)',
    divider: 'rgba(255,255,255,0.07)',
    chipBg: 'rgba(255,255,255,0.05)',
    headerBg: 'rgba(13,25,44,0.82)',
    track: 'rgba(255,255,255,0.08)',
    blue: '#4d8bff',
    blueSoft: 'rgba(77,139,255,0.16)',
    amber: '#fbbf24',
    amberSoft: 'rgba(251,191,36,0.16)',
  },
};

const STATUS = {
  healthy:  { color: '#16a34a', soft: 'rgba(22,163,74,0.12)',  label: 'Healthy' },
  warning:  { color: '#f59e0b', soft: 'rgba(245,158,11,0.14)', label: 'Needs Attention' },
  critical: { color: '#ef4444', soft: 'rgba(239,68,68,0.12)',  label: 'Critical' },
};

const CLAIM_STATUS = {
  Reimbursed:   { color: '#16a34a', soft: 'rgba(22,163,74,0.13)' },
  Pending:      { color: '#f59e0b', soft: 'rgba(245,158,11,0.15)' },
  'In Progress':{ color: '#2f6bf6', soft: 'rgba(47,107,246,0.14)' },
  Rejected:     { color: '#ef4444', soft: 'rgba(239,68,68,0.13)' },
};

// ---------- Navigation ----------
const NAV = [
  { id: 'overview',      label: 'Overview',      icon: 'grid' },
  { id: 'claims',        label: 'Claims',        icon: 'file' },
  { id: 'reimbursements',label: 'Reimbursements',icon: 'refresh' },
  { id: 'providers',     label: 'Providers',     icon: 'hospital' },
  { id: 'members',       label: 'Members',       icon: 'users' },
  { id: 'analytics',     label: 'Analytics',     icon: 'analytics' },
  { id: 'alerts',        label: 'Alerts',        icon: 'bell' },
  { id: 'reports',       label: 'Reports',       icon: 'doc' },
  { id: 'organisation',  label: 'Organisation',  icon: 'building' },
  { id: 'settings',      label: 'Settings',      icon: 'gear' },
];

// ---------- Health score ----------
const HEALTH = { score: 82, label: 'Good', trend: 12 };

// ---------- Portal status (Italian insurers) ----------
const PORTALS = [
  { id:'fasi',     name:'FasiAssidai', status:'healthy',  pct:98, note:'Sync OK · last sync 4 min ago' },
  { id:'generali', name:'Generali',    status:'warning',  pct:74, note:'OTP nearing expiry · rotate soon' },
  { id:'unisalute',name:'UniSalute',   status:'healthy',  pct:90, note:'Sync OK · last sync just now' },
  { id:'rbm',      name:'RBM Salute',  status:'critical', pct:45, note:'Auth failed · sync stalled' },
];

// ---------- KPI cards ----------
const KPIS = [
  { id:'reimbursed', label:'Reimbursed Amount', icon:'wallet',  prefix:'€ ', value:24.5, suffix:'M', decimals:1, tint:'#2f6bf6',
    trend:{ arrow:'up',   color:'#16a34a', text:'18% vs last month' } },
  { id:'pending',    label:'Pending Amount',    icon:'clock',   prefix:'€ ', value:6.87, suffix:'M', decimals:2, tint:'#f59e0b',
    trend:{ arrow:'down', color:'#ef4444', text:'8% vs last month' } },
  { id:'open',       label:'Open Claims',       icon:'filedot', value:1248, decimals:0, comma:true, tint:'#6366f1',
    trend:{ arrow:'down', color:'#ef4444', text:'5% vs last month' } },
  { id:'avgtime',    label:'Avg Payment Time',  icon:'gauge',   value:12.6, suffix:' Days', decimals:1, tint:'#16a34a',
    trend:{ arrow:'up',   color:'#16a34a', text:'1.4 days vs last month' } },
  { id:'rejection',  label:'Rejection Rate',    icon:'xcircle', value:2.35, suffix:'%', decimals:2, tint:'#ef4444',
    trend:{ arrow:'down', color:'#16a34a', text:'0.6% vs last month' } },
  { id:'health',     label:'Health Score',      icon:'heart',   value:82, suffix:'/100', decimals:0, tint:'#ec4899',
    trend:{ arrow:'up',   color:'#16a34a', text:'12% vs last month' } },
];

// ---------- Charts (Jan–Jun) ----------
const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun'];
// values in € millions; yMax 20
const REIMBURSED_SERIES = [6.2, 9.8, 9.0, 12.4, 15.8, 17.2];
const PENDING_SERIES    = [9.1, 11.6, 9.4, 12.0, 16.4, 11.2];
const CHART_Y = [ {v:20,l:'20M'}, {v:15,l:'15M'}, {v:10,l:'10M'}, {v:5,l:'5M'}, {v:0,l:'0'} ];

// ---------- Top providers (Italian hospitals) ----------
const PROVIDERS = [
  { name:'Humanitas Milano',  amount:4.56 },
  { name:'Gemelli Roma',      amount:3.82 },
  { name:'San Raffaele',      amount:2.87 },
  { name:'Niguarda',          amount:2.21 },
  { name:'Policlinico Torino',amount:1.83 },
];

// ---------- Alerts ----------
const ALERTS = [
  { id:1, kind:'critical', text:'RBM Salute portal has 32 pending claims for more than 15 days.', time:'10 mins ago' },
  { id:2, kind:'warning',  text:'High rejection rate in UniSalute portal (4.8%). Please review.', time:'1 hour ago' },
  { id:3, kind:'info',     text:'Generali portal connection is unstable.', time:'2 hours ago' },
];

// ---------- Recent claims (Italian) ----------
const CLAIMS = [
  { id:'CLM-1258', member:'Marco Rossi',    provider:'Humanitas Milano',   date:'31 May 2025', amount:24500, status:'Reimbursed' },
  { id:'CLM-1257', member:'Giulia Bianchi',  provider:'Gemelli Roma',       date:'30 May 2025', amount:18750, status:'Pending' },
  { id:'CLM-1256', member:'Luca Ferrari',    provider:'San Raffaele',       date:'30 May 2025', amount:32100, status:'In Progress' },
  { id:'CLM-1255', member:'Sofia Romano',    provider:'Niguarda',           date:'29 May 2025', amount:16300, status:'Reimbursed' },
  { id:'CLM-1254', member:'Matteo Conti',    provider:'Policlinico Torino', date:'29 May 2025', amount:14800, status:'Rejected' },
  { id:'CLM-1253', member:'Chiara Greco',    provider:'Humanitas Milano',   date:'28 May 2025', amount:21200, status:'Reimbursed' },
  { id:'CLM-1252', member:'Davide Esposito', provider:'Gemelli Roma',       date:'28 May 2025', amount:9750,  status:'Pending' },
];

// ---------- Formatting ----------
function fmtEuro(n, decimals = 0) {
  return '€ ' + n.toLocaleString('it-IT', { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
}
function fmtNum(n, decimals = 0, comma = false) {
  const v = Number(n).toFixed(decimals);
  return comma ? Number(v).toLocaleString('en-US') : v;
}

// ============================================================
// Animation hooks
// ============================================================

// requestAnimationFrame count-up; starts after `delay` ms
function useCountUp(target, { duration = 1300, delay = 0, decimals = 0 } = {}) {
  const [val, setVal] = useState(0);
  useEffect(() => {
    let raf, startT, timer;
    const ease = t => 1 - Math.pow(1 - t, 3);
    const run = () => {
      const step = now => {
        if (!startT) startT = now;
        const p = Math.min((now - startT) / duration, 1);
        setVal(target * ease(p));
        if (p < 1) raf = requestAnimationFrame(step);
        else setVal(target);
      };
      raf = requestAnimationFrame(step);
    };
    timer = setTimeout(run, delay);
    return () => { cancelAnimationFrame(raf); clearTimeout(timer); };
  }, [target, duration, delay]);
  return val;
}

// generic 0->1 progress tween (for rings, bars, charts)
function useProgress({ duration = 1200, delay = 0 } = {}) {
  const [p, setP] = useState(0);
  useEffect(() => {
    let raf, startT, timer;
    const ease = t => t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2;
    const run = () => {
      const step = now => {
        if (!startT) startT = now;
        const t = Math.min((now - startT) / duration, 1);
        setP(ease(t));
        if (t < 1) raf = requestAnimationFrame(step);
        else setP(1);
      };
      raf = requestAnimationFrame(step);
    };
    timer = setTimeout(run, delay);
    return () => { cancelAnimationFrame(raf); clearTimeout(timer); };
  }, [duration, delay]);
  return p;
}

Object.assign(window, {
  TOKENS, STATUS, CLAIM_STATUS, NAV, HEALTH, PORTALS, KPIS,
  MONTHS, REIMBURSED_SERIES, PENDING_SERIES, CHART_Y, PROVIDERS, ALERTS, CLAIMS,
  fmtEuro, fmtNum, useCountUp, useProgress,
});


// ============================================================
// dash-icons.jsx — single icon component, stroke = currentColor
// ============================================================
const ICON_PATHS = {
  // nav
  grid:      'M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z',
  file:      'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5',
  refresh:   'M21 12a9 9 0 1 1-2.64-6.36M21 4v5h-5',
  hospital:  'M4 21V8l8-5 8 5v13M9 21v-6h6v6M12 7v4M10 9h4',
  users:     'M16 20v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zM22 20v-2a4 4 0 0 0-3-3.87M16 4.13A4 4 0 0 1 16 11.5',
  analytics: 'M4 19h16M7 16V9m5 7V5m5 11v-6',
  bell:      'M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0',
  doc:       'M4 4h16M4 10h16M4 16h10',
  building:  'M4 21V5a2 2 0 0 1 2-2h7a2 2 0 0 1 2 2v16M15 9h3a2 2 0 0 1 2 2v10M8 7h2M8 11h2M8 15h2',
  gear:      'M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-2.81 1.17V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15H4.5a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 11 4.6h.09A1.65 1.65 0 0 0 12 3.09V3a2 2 0 0 1 4 0v.09A1.65 1.65 0 0 0 18 4.6l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9V9c.69 0 1.34.27 1.83.76',
  // kpi
  wallet:    'M3 7h15a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7zM3 7l2.5-3.5h11L19 7M16 13h.01',
  clock:     'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 7v5l3 2',
  filedot:   'M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h4',
  gauge:     'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 12l4-3',
  xcircle:   'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM15 9l-6 6M9 9l6 6',
  heart:     'M19.5 5.5a5 5 0 0 0-7.5.5 5 5 0 0 0-7.5-.5C2.5 7.5 2.8 11 5 13l7 7 7-7c2.2-2 2.5-5.5.5-7.5z',
  // status
  shieldcheck:'M12 3l7 3v5c0 4.5-3 8.5-7 10-4-1.5-7-5.5-7-10V6l7-3zM9 12l2 2 4-4',
  warntri:   'M12 3 2 20h20L12 3zM12 9v5M12 18h.01',
  alertoct:  'M8 2h8l6 6v8l-6 6H8l-6-6V8zM12 8v4M12 16h.01',
  info:      'M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18zM12 11v5M12 7.5h.01',
  // ui
  calendar:  'M7 3v3M17 3v3M4 8h16M5 5h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1z',
  filter:    'M3 5h18l-7 8v6l-4 2v-8z',
  download:  'M12 3v12M7 10l5 5 5-5M4 19h16',
  chevdown:  'M6 9l6 6 6-6',
  chevright: 'M9 6l6 6-6 6',
  chevleft:  'M15 6l-6 6 6 6',
  search:    'M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM20 20l-3-3',
  sun:       'M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zM12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4',
  moon:      'M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z',
  arrowup:   'M12 19V5M5 12l7-7 7 7',
  arrowdown: 'M12 5v14M5 12l7 7 7-7',
};

const Icon = ({ name, size = 18, strokeWidth = 1.8, fill = 'none', style }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill={fill} stroke="currentColor"
       strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" style={style}>
    <path d={ICON_PATHS[name] || ''} />
  </svg>
);

// Tooltip wrapper for the little info icons
const InfoTip = ({ text, t }) => {
  const [show, setShow] = useState(false);
  return (
    <span style={{ position:'relative', display:'inline-flex', color:t.textMuted, cursor:'help' }}
          onMouseEnter={()=>setShow(true)} onMouseLeave={()=>setShow(false)}>
      <Icon name="info" size={14} />
      {show && (
        <span style={{
          position:'absolute', bottom:'140%', left:'50%', transform:'translateX(-50%)',
          background: t.textPrimary, color: t.appBg, fontSize:11, fontWeight:500,
          padding:'7px 10px', borderRadius:8, width:180, lineHeight:1.4, zIndex:50,
          boxShadow:'0 8px 24px rgba(0,0,0,0.25)', textAlign:'center', pointerEvents:'none',
        }}>{text}</span>
      )}
    </span>
  );
};

window.Icon = Icon;
window.InfoTip = InfoTip;


// ============================================================
// dash-viz.jsx — animated visualizations
// HealthRing, AreaChart, ProviderBars
// ============================================================

// ---- Health score ring (draws/fills on load) ----
const HealthRing = ({ t, size = 132 }) => {
  const p = window.useProgress({ duration: 1500, delay: 250 });
  const score = window.useCountUp(window.HEALTH.score, { duration: 1500, delay: 250 });
  const stroke = 11;
  const r = (size - stroke) / 2;
  const c = 2 * Math.PI * r;
  const target = window.HEALTH.score / 100;
  const dash = c * target * p;

  return (
    <div style={{ position:'relative', width:size, height:size }}>
      <svg width={size} height={size} style={{ transform:'rotate(-90deg)' }}>
        <defs>
          <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#22c55e" />
            <stop offset="1" stopColor="#16a34a" />
          </linearGradient>
        </defs>
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={t.track} strokeWidth={stroke} />
        <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="url(#ringGrad)"
                strokeWidth={stroke} strokeLinecap="round"
                strokeDasharray={`${dash} ${c}`} />
      </svg>
      <div style={{ position:'absolute', inset:0, display:'flex', flexDirection:'column',
                    alignItems:'center', justifyContent:'center' }}>
        <div style={{ fontSize:34, fontWeight:800, color:t.textPrimary, lineHeight:1, letterSpacing:'-0.03em' }}>
          {Math.round(score)}
        </div>
        <div style={{ fontSize:12, color:t.textMuted, fontWeight:600, marginTop:2 }}>/100</div>
      </div>
    </div>
  );
};

// ---- Animated area + line chart ----
const AreaChart = ({ series, color, t, delay = 0, gradId }) => {
  const W = 520, H = 210, padL = 38, padR = 14, padT = 14, padB = 28;
  const yMax = 20;
  const p = window.useProgress({ duration: 1400, delay });
  const innerW = W - padL - padR;
  const innerH = H - padT - padB;
  const n = series.length;

  const pts = series.map((v, i) => ({
    x: padL + (innerW * i) / (n - 1),
    y: padT + innerH * (1 - v / yMax),
  }));

  // smooth path (catmull-rom -> bezier)
  const linePath = useMemo(() => {
    const d = [`M ${pts[0].x} ${pts[0].y}`];
    for (let i = 0; i < pts.length - 1; i++) {
      const p0 = pts[i === 0 ? 0 : i - 1];
      const p1 = pts[i], p2 = pts[i + 1];
      const p3 = pts[i + 2] || p2;
      const cp1x = p1.x + (p2.x - p0.x) / 6;
      const cp1y = p1.y + (p2.y - p0.y) / 6;
      const cp2x = p2.x - (p3.x - p1.x) / 6;
      const cp2y = p2.y - (p3.y - p1.y) / 6;
      d.push(`C ${cp1x} ${cp1y} ${cp2x} ${cp2y} ${p2.x} ${p2.y}`);
    }
    return d.join(' ');
  }, [series.join(',')]);

  const areaPath = `${linePath} L ${pts[n-1].x} ${padT+innerH} L ${pts[0].x} ${padT+innerH} Z`;
  const lineLen = 1400; // approx for dash animation

  return (
    <svg viewBox={`0 0 ${W} ${H}`} width="100%" style={{ display:'block' }}>
      <defs>
        <linearGradient id={gradId} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor={color} stopOpacity="0.28" />
          <stop offset="1" stopColor={color} stopOpacity="0.01" />
        </linearGradient>
      </defs>
      {/* grid + y labels */}
      {window.CHART_Y.map((g, i) => {
        const y = padT + innerH * (1 - g.v / yMax);
        return (
          <g key={i}>
            <line x1={padL} y1={y} x2={W-padR} y2={y} stroke={t.divider} strokeWidth="1" />
            <text x={padL-8} y={y+3} textAnchor="end" fontSize="10" fill={t.textMuted}>{g.l}</text>
          </g>
        );
      })}
      {/* x labels */}
      {window.MONTHS.map((m, i) => (
        <text key={m} x={pts[i].x} y={H-8} textAnchor="middle" fontSize="10" fill={t.textMuted}>{m}</text>
      ))}
      {/* area (fades in) */}
      <path d={areaPath} fill={`url(#${gradId})`} opacity={p} />
      {/* line (draws in) */}
      <path d={linePath} fill="none" stroke={color} strokeWidth="2.5"
            strokeLinecap="round" strokeLinejoin="round"
            strokeDasharray={lineLen} strokeDashoffset={lineLen * (1 - p)} />
      {/* dots pop in */}
      {pts.map((pt, i) => {
        const appear = Math.max(0, Math.min(1, (p - i / n) * 3));
        return (
          <circle key={i} cx={pt.x} cy={pt.y} r={3.6 * appear}
                  fill="#fff" stroke={color} strokeWidth="2.5" />
        );
      })}
    </svg>
  );
};

// ---- Top providers horizontal bars (grow on load) ----
const ProviderBars = ({ t }) => {
  const p = window.useProgress({ duration: 1100, delay: 200 });
  const max = Math.max(...window.PROVIDERS.map(d => d.amount));
  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      {window.PROVIDERS.map((d, i) => {
        const stagger = Math.max(0, Math.min(1, (p - i * 0.08) / (1 - i * 0.08)));
        const w = (d.amount / max) * 100 * stagger;
        return (
          <div key={d.name} style={{ display:'flex', alignItems:'center', gap:14 }}>
            <div style={{ width:130, fontSize:12.5, color:t.textSecondary, fontWeight:500, flexShrink:0,
                          whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{d.name}</div>
            <div style={{ flex:1, height:11, borderRadius:6, background:t.track, overflow:'hidden' }}>
              <div style={{ width:`${w}%`, height:'100%', borderRadius:6,
                            background:`linear-gradient(90deg, ${t.blue}, #6ea4ff)` }} />
            </div>
            <div style={{ width:62, textAlign:'right', fontSize:12.5, fontWeight:700, color:t.textPrimary, flexShrink:0 }}>
              {window.fmtEuro(d.amount * stagger, 2).replace('€ ','€')}M
            </div>
          </div>
        );
      })}
    </div>
  );
};

window.HealthRing = HealthRing;
window.AreaChart = AreaChart;
window.ProviderBars = ProviderBars;


// ============================================================
// dash-cards.jsx — Card shell, KPI cards, portal status,
// alerts, top providers, claims table
// ============================================================

// Reveal-on-mount wrapper (staggered fade + slide up)
const Reveal = ({ delay = 0, children, style }) => {
  const [shown, setShown] = useState(false);
  useEffect(() => { const tm = setTimeout(() => setShown(true), delay); return () => clearTimeout(tm); }, [delay]);
  return (
    <div style={{
      opacity: shown ? 1 : 0,
      transform: shown ? 'translateY(0)' : 'translateY(16px)',
      transition: 'opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1)',
      minWidth: 0,
      ...style,
    }}>{children}</div>
  );
};

// Card shell with hover lift + glow
const Card = ({ t, children, style, pad = 20, hover = true, onClick }) => {
  const [h, setH] = useState(false);
  return (
    <div onClick={onClick}
      onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        background: t.cardBg, border: `1px solid ${h && hover ? t.accentSoft : t.cardBorder}`,
        borderRadius: 16, padding: pad,
        boxShadow: h && hover ? t.cardShadowHover : t.cardShadow,
        transform: h && hover ? 'translateY(-3px)' : 'translateY(0)',
        transition: 'transform .25s ease, box-shadow .25s ease, border-color .25s ease',
        cursor: onClick ? 'pointer' : 'default',
        ...style,
      }}>{children}</div>
  );
};

// ---------- Health score card ----------
const HealthCard = ({ t }) => (
  <Card t={t} style={{ display:'flex', flexDirection:'column' }}>
    <div style={{ fontSize:14, fontWeight:700, color:t.textPrimary, marginBottom:6 }}>Health Score</div>
    <div style={{ flex:1, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8 }}>
      <window.HealthRing t={t} />
      <div style={{ fontSize:15, fontWeight:700, color:'#16a34a' }}>{window.HEALTH.label}</div>
      <div style={{ display:'flex', alignItems:'center', gap:5, color:'#16a34a', fontSize:12, fontWeight:600 }}>
        <window.Icon name="arrowup" size={13} strokeWidth={2.4} />
        {window.HEALTH.trend}% vs last month
      </div>
    </div>
  </Card>
);

// ---------- Portal status ----------
const PortalStatus = ({ t }) => (
  <Card t={t}>
    <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16 }}>
      <div style={{ fontSize:14, fontWeight:700, color:t.textPrimary }}>Portal Status</div>
      <button style={{
        fontSize:12, fontWeight:600, color:t.accent, background:t.accentSoft,
        border:'none', padding:'6px 12px', borderRadius:8, cursor:'pointer', fontFamily:'inherit',
      }}>View All Portals</button>
    </div>
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }}>
      {window.PORTALS.map((pt, i) => {
        const s = window.STATUS[pt.status];
        return (
          <Reveal key={pt.id} delay={200 + i*70}>
            <div style={{
              padding:14, borderRadius:12, background:t.chipBg,
              border:`1px solid ${pt.status==='critical' ? s.soft : t.cardBorder}`,
              position:'relative', overflow:'hidden',
            }}>
              <div style={{ position:'absolute', top:0, left:0, width:'100%', height:3, background:s.color }} />
              <div style={{ display:'flex', alignItems:'flex-start', gap:9, marginBottom:12 }}>
                <span style={{ color:s.color, flexShrink:0, marginTop:1 }}>
                  <window.Icon name={pt.status==='healthy'?'shieldcheck':pt.status==='warning'?'warntri':'alertoct'} size={18} strokeWidth={2} />
                </span>
                <div style={{ minWidth:0 }}>
                  <div style={{ fontSize:13, fontWeight:700, color:t.textPrimary, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{pt.name}</div>
                  <div style={{ fontSize:11.5, fontWeight:600, color:s.color }}>{pt.note}</div>
                </div>
              </div>
              <div style={{ fontSize:20, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em' }}>{pt.pct}%</div>
            </div>
          </Reveal>
        );
      })}
    </div>
  </Card>
);

// ---------- KPI card ----------
const KpiCard = ({ kpi, t, delay }) => {
  const v = window.useCountUp(kpi.value, { duration: 1400, delay, decimals: kpi.decimals });
  const num = kpi.comma ? window.fmtNum(v, kpi.decimals, true) : window.fmtNum(v, kpi.decimals);
  return (
    <Card t={t} pad={18}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14 }}>
        <span style={{
          width:38, height:38, borderRadius:10, display:'flex', alignItems:'center', justifyContent:'center',
          background:`${kpi.tint}1f`, color:kpi.tint,
        }}><window.Icon name={kpi.icon} size={19} strokeWidth={2} /></span>
        <window.InfoTip t={t} text={`${kpi.label} — calculated for the selected period.`} />
      </div>
      <div style={{ fontSize:12.5, color:t.textSecondary, fontWeight:500, marginBottom:6 }}>{kpi.label}</div>
      <div style={{ fontSize:25, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em', lineHeight:1 }}>
        {kpi.prefix||''}{num}{kpi.suffix||''}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:5, marginTop:10, color:kpi.trend.color, fontSize:11.5, fontWeight:600 }}>
        <window.Icon name={kpi.trend.arrow==='up'?'arrowup':'arrowdown'} size={13} strokeWidth={2.6} />
        {kpi.trend.text}
      </div>
    </Card>
  );
};

// ---------- Chart card ----------
const ChartCard = ({ title, tip, series, color, gradId, t, delay }) => {
  const [period, setPeriod] = useState('Monthly');
  return (
    <Card t={t}>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
        <div style={{ display:'flex', alignItems:'center', gap:7 }}>
          <span style={{ fontSize:14, fontWeight:700, color:t.textPrimary }}>{title}</span>
          <window.InfoTip t={t} text={tip} />
        </div>
        <div style={{ position:'relative' }}>
          <select value={period} onChange={e=>setPeriod(e.target.value)} style={{
            appearance:'none', WebkitAppearance:'none', fontFamily:'inherit',
            fontSize:12, fontWeight:600, color:t.textSecondary,
            background:t.chipBg, border:`1px solid ${t.cardBorder}`, borderRadius:8,
            padding:'6px 28px 6px 12px', cursor:'pointer',
          }}>
            <option>Monthly</option><option>Quarterly</option><option>Yearly</option>
          </select>
          <span style={{ position:'absolute', right:9, top:'50%', transform:'translateY(-50%)', pointerEvents:'none', color:t.textMuted }}>
            <window.Icon name="chevdown" size={14} />
          </span>
        </div>
      </div>
      <window.AreaChart series={series} color={color} t={t} gradId={gradId} delay={delay} />
    </Card>
  );
};

// ---------- Alerts ----------
const alertMeta = {
  critical: { color:'#ef4444', icon:'alertoct' },
  warning:  { color:'#f59e0b', icon:'warntri' },
  info:     { color:'#2f6bf6', icon:'info' },
};
const AlertsCard = ({ t }) => (
  <Card t={t} style={{ display:'flex', flexDirection:'column' }}>
    <div style={{ display:'flex', alignItems:'center', gap:9, marginBottom:16 }}>
      <span style={{ fontSize:14, fontWeight:700, color:t.textPrimary }}>Alerts &amp; Notifications</span>
      <span style={{
        background:'#ef4444', color:'#fff', fontSize:11, fontWeight:700,
        width:20, height:20, borderRadius:'50%', display:'flex', alignItems:'center', justifyContent:'center',
        boxShadow:'0 0 0 0 rgba(239,68,68,0.5)', animation:'pulseDot 2s infinite',
      }}>{window.ALERTS.length}</span>
    </div>
    <div style={{ display:'flex', flexDirection:'column', gap:2, flex:1 }}>
      {window.ALERTS.map((a, i) => {
        const m = alertMeta[a.kind];
        return (
          <div key={a.id} style={{ display:'flex', gap:12, padding:'12px 0',
                 borderTop: i===0 ? 'none' : `1px solid ${t.divider}` }}>
            <span style={{
              width:30, height:30, borderRadius:9, flexShrink:0, color:m.color,
              background:`${m.color}1f`, display:'flex', alignItems:'center', justifyContent:'center',
              animation: a.kind==='critical' ? 'pulseDot 2s infinite' : 'none',
            }}><window.Icon name={m.icon} size={16} strokeWidth={2} /></span>
            <div style={{ flex:1 }}>
              <div style={{ fontSize:13, color:t.textPrimary, lineHeight:1.45 }}>{a.text}</div>
            </div>
            <div style={{ fontSize:11, color:t.textMuted, whiteSpace:'nowrap', flexShrink:0 }}>{a.time}</div>
          </div>
        );
      })}
    </div>
    <button style={{ marginTop:8, alignSelf:'center', background:'none', border:'none', color:t.accent,
      fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>View All Alerts</button>
  </Card>
);

// ---------- Top providers ----------
const ProvidersCard = ({ t }) => (
  <Card t={t} style={{ display:'flex', flexDirection:'column' }}>
    <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:18 }}>
      <span style={{ fontSize:14, fontWeight:700, color:t.textPrimary }}>Top 5 Providers by Reimbursed Amount</span>
      <window.InfoTip t={t} text="Providers ranked by total reimbursed value this period." />
    </div>
    <div style={{ flex:1 }}><window.ProviderBars t={t} /></div>
    <button style={{ marginTop:18, alignSelf:'center', background:'none', border:'none', color:t.accent,
      fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>View All Providers</button>
  </Card>
);

// ---------- Recent claims table ----------
const ClaimsTable = ({ t }) => {
  const cols = ['Claim ID','Member Name','Provider','Claim Date','Amount','Status'];
  return (
    <Card t={t}>
      <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:16 }}>
        <span style={{ fontSize:14, fontWeight:700, color:t.textPrimary }}>Recent Claims</span>
        <window.InfoTip t={t} text="Latest claims across all portals. Click a row to drill down." />
      </div>
      <div style={{ overflowX:'auto' }}>
        <table style={{ width:'100%', borderCollapse:'collapse', fontSize:13 }}>
          <thead>
            <tr>{cols.map(c => (
              <th key={c} style={{ textAlign: c==='Amount'?'right':'left', padding:'0 14px 12px',
                color:t.textMuted, fontWeight:600, fontSize:11.5, textTransform:'uppercase',
                letterSpacing:'0.04em', whiteSpace:'nowrap' }}>{c}</th>
            ))}</tr>
          </thead>
          <tbody>
            {window.CLAIMS.map((c, i) => {
              const cs = window.CLAIM_STATUS[c.status];
              return (
                <tr key={c.id} className="claim-row" style={{ borderTop:`1px solid ${t.divider}` }}>
                  <td style={{ padding:'13px 14px', color:t.accent, fontWeight:600 }}>{c.id}</td>
                  <td style={{ padding:'13px 14px', color:t.textPrimary, fontWeight:500 }}>{c.member}</td>
                  <td style={{ padding:'13px 14px', color:t.textSecondary }}>{c.provider}</td>
                  <td style={{ padding:'13px 14px', color:t.textSecondary }}>{c.date}</td>
                  <td style={{ padding:'13px 14px', color:t.textPrimary, fontWeight:700, textAlign:'right' }}>
                    {window.fmtEuro(c.amount)}
                  </td>
                  <td style={{ padding:'13px 14px' }}>
                    <span style={{ display:'inline-block', padding:'4px 11px', borderRadius:999,
                      fontSize:11.5, fontWeight:600, color:cs.color, background:cs.soft }}>{c.status}</span>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
      <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginTop:16, flexWrap:'wrap', gap:12 }}>
        <button style={{ background:'none', border:'none', color:t.accent, fontSize:13, fontWeight:600, cursor:'pointer', fontFamily:'inherit' }}>View All Claims</button>
        <div style={{ display:'flex', alignItems:'center', gap:6 }}>
          <PageBtn t={t}><window.Icon name="chevleft" size={14} /></PageBtn>
          {[1,2,3].map(n => <PageBtn key={n} t={t} active={n===1}>{n}</PageBtn>)}
          <span style={{ color:t.textMuted, padding:'0 4px' }}>…</span>
          <PageBtn t={t}>20</PageBtn>
          <PageBtn t={t}><window.Icon name="chevright" size={14} /></PageBtn>
        </div>
      </div>
    </Card>
  );
};
const PageBtn = ({ t, children, active }) => (
  <button style={{
    minWidth:30, height:30, padding:'0 8px', borderRadius:8, cursor:'pointer', fontFamily:'inherit',
    fontSize:12.5, fontWeight:600, display:'inline-flex', alignItems:'center', justifyContent:'center',
    border:`1px solid ${active ? 'transparent' : t.cardBorder}`,
    background: active ? t.accent : 'transparent',
    color: active ? '#fff' : t.textSecondary,
  }}>{children}</button>
);

Object.assign(window, {
  Reveal, Card, HealthCard, PortalStatus, KpiCard, ChartCard, AlertsCard, ProvidersCard, ClaimsTable,
});


// ============================================================
// filterbar.jsx — animated top filter bar
// Floating-label fields + custom animated dropdowns + date fields
// (built in the Lumen Dashboard - Health Score design system)
// ============================================================
const { useState: fbState, useRef: fbRef, useEffect: fbEffect } = React;

const FB_FILTERS = {
  Account:  ['Panigea', 'Sefamo Group', 'SYNLAB Italia', 'Gruppo Vicenza'],
  Platform: ['IWS', 'Web portal', 'API sync', 'Manual upload'],
  Portal:   ['All Portals', 'Fasi', 'FasiOpen', 'Generali', 'UniSalute', 'Previmedical', 'RBM Salute'],
};

// ---- Custom animated dropdown ----
const FilterSelect = ({ t, label, options, value, onChange }) => {
  const [open, setOpen] = fbState(false);
  const ref = fbRef(null);
  fbEffect(() => {
    const onDoc = e => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    const onEsc = e => { if (e.key === 'Escape') setOpen(false); };
    document.addEventListener('mousedown', onDoc);
    document.addEventListener('keydown', onEsc);
    return () => { document.removeEventListener('mousedown', onDoc); document.removeEventListener('keydown', onEsc); };
  }, []);

  return (
    <div ref={ref} style={{ position:'relative', flex:'1 1 150px', minWidth:140 }}>
      {/* notch label */}
      <label style={{
        position:'absolute', top:-7, left:13, zIndex:2, fontSize:11, fontWeight:600,
        padding:'0 5px', background:t.cardBg, pointerEvents:'none',
        color: open ? t.accent : t.textMuted, transition:'color .2s ease',
      }}>{label}</label>

      {/* field */}
      <button onClick={() => setOpen(o => !o)} style={{
        width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:'13px 14px', borderRadius:12, cursor:'pointer', fontFamily:'inherit',
        fontSize:14.5, fontWeight:600, color:t.textPrimary, background:t.cardBg,
        border:`1.5px solid ${open ? t.accent : t.cardBorder}`,
        boxShadow: open ? `0 0 0 4px ${t.accentSoft}` : 'none',
        transition:'border-color .2s ease, box-shadow .2s ease',
      }}>
        <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{value}</span>
        <span style={{ color:t.textMuted, flexShrink:0, display:'inline-flex',
          transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
          transition:'transform .28s cubic-bezier(.34,1.56,.64,1)' }}>
          <window.Icon name="chevdown" size={17} strokeWidth={2.2} />
        </span>
      </button>

      {/* menu */}
      {open && (
        <div style={{
          position:'absolute', top:'calc(100% + 8px)', left:0, right:0, zIndex:50,
          background:t.cardBg, border:`1px solid ${t.cardBorder}`, borderRadius:14,
          boxShadow:'0 16px 40px rgba(10,20,40,0.22), 0 4px 12px rgba(10,20,40,0.12)',
          padding:6, transformOrigin:'top center', overflow:'hidden',
          animation:'fbMenuIn .26s cubic-bezier(.22,.61,.36,1) both',
        }}>
          {options.map((opt, i) => {
            const sel = opt === value;
            return (
              <button key={opt} onClick={() => { onChange(opt); setOpen(false); }}
                onMouseEnter={e => { if(!sel) e.currentTarget.style.background = t.chipBg; }}
                onMouseLeave={e => { if(!sel) e.currentTarget.style.background = 'transparent'; }}
                style={{
                  width:'100%', display:'flex', alignItems:'center', justifyContent:'space-between',
                  gap:10, padding:'11px 13px', borderRadius:9, border:'none', cursor:'pointer',
                  fontFamily:'inherit', fontSize:14, fontWeight: sel ? 700 : 500, textAlign:'left',
                  color: sel ? t.accent : t.textPrimary, background: sel ? t.accentSoft : 'transparent',
                  opacity:0, animation:`fbItemIn .32s ease forwards`, animationDelay:`${0.04 + i*0.035}s`,
                }}>
                <span style={{ whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{opt}</span>
                {sel && <window.Icon name="arrowup" size={0} />}
                {sel && (
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke={t.accent} strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round" style={{flexShrink:0}}><path d="M5 12l5 5 9-11"/></svg>
                )}
              </button>
            );
          })}
        </div>
      )}
    </div>
  );
};

// ---- Date field (native picker, styled) ----
const FilterDate = ({ t, label, value, onChange, themeName }) => (
  <div style={{ position:'relative', flex:'1 1 150px', minWidth:150 }}>
    <label style={{
      position:'absolute', top:-7, left:13, zIndex:2, fontSize:11, fontWeight:600,
      padding:'0 5px', background:t.cardBg, color:t.textMuted, pointerEvents:'none',
    }}>{label}</label>
    <input type="date" value={value} onChange={e => onChange(e.target.value)} style={{
      width:'100%', fontFamily:'inherit', fontSize:14.5, fontWeight:600, color:t.textPrimary,
      background:t.cardBg, border:`1.5px solid ${t.cardBorder}`, borderRadius:12,
      padding:'12px 14px', cursor:'pointer', colorScheme: themeName==='dark' ? 'dark' : 'light',
      outline:'none', transition:'border-color .2s ease, box-shadow .2s ease',
    }}
    onFocus={e => { e.target.style.borderColor = t.accent; e.target.style.boxShadow = `0 0 0 4px ${t.accentSoft}`; }}
    onBlur={e => { e.target.style.borderColor = t.cardBorder; e.target.style.boxShadow = 'none'; }} />
  </div>
);

// ---- The bar ----
const FilterBar = ({ t, themeName }) => {
  const [account, setAccount] = fbState('Panigea');
  const [platform, setPlatform] = fbState('IWS');
  const [portal, setPortal] = fbState('FasiOpen');
  const [from, setFrom] = fbState('2026-05-07');
  const [to, setTo] = fbState('2026-06-05');
  return (
    <window.Card t={t} hover={false} pad={18}
      style={{ display:'flex', flexWrap:'wrap', gap:16, alignItems:'center', overflow:'visible' }}>
      <FilterSelect t={t} label="Account"  options={FB_FILTERS.Account}  value={account}  onChange={setAccount} />
      <FilterSelect t={t} label="Platform" options={FB_FILTERS.Platform} value={platform} onChange={setPlatform} />
      <FilterSelect t={t} label="Portal"   options={FB_FILTERS.Portal}   value={portal}   onChange={setPortal} />
      <FilterDate t={t} themeName={themeName} label="From" value={from} onChange={setFrom} />
      <FilterDate t={t} themeName={themeName} label="To"   value={to}   onChange={setTo} />
    </window.Card>
  );
};

window.FilterBar = FilterBar;


// ============================================================
// priorityqueue.jsx — COR-178 Operational Alerts Panel
// (Claim Priority Queue). Colour = urgency to ACT, NOT health.
// Replaces the "Recent Claims" widget (Dashboard §5).
// ============================================================
const { useState: pqUseState, useEffect: pqUseEffect } = React;

// Priority levels — colour = how urgently an operator must act
const PRIORITY = {
  high:   { color:'#ef4444', soft:'rgba(239,68,68,0.12)',  label:'High Priority',
            desc:'Suspended · overdue 60+ days · rejected' },
  medium: { color:'#f59e0b', soft:'rgba(245,158,11,0.14)', label:'Medium Priority',
            desc:'Pending 30+ days · document upload errors' },
  normal: { color:'#16a34a', soft:'rgba(22,163,74,0.12)',  label:'Normal Priority',
            desc:'Compliance-check failures · low-urgency exceptions' },
};
const PRIORITY_ORDER = ['high','medium','normal'];

// Queue buckets — each row is an actionable group of claims
const QUEUE = [
  { id:'q-susp', priority:'high', icon:'alertoct', title:'Suspended claims',
    portal:'RBM Salute', count:32, age:'15+ days', reason:'Awaiting re-authentication — sync stalled' },
  { id:'q-overdue', priority:'high', icon:'clock', title:'Overdue 60+ days',
    portal:'Generali', count:18, age:'60+ days', reason:'Past reimbursement SLA — escalation needed' },
  { id:'q-reject', priority:'high', icon:'xcircle', title:'Rejected claims',
    portal:'Multiple', count:12, age:'this week', reason:'Rejected by insurer — review & resubmit' },
  { id:'q-pending', priority:'medium', icon:'filedot', title:'Pending > 30 days',
    portal:'UniSalute', count:46, age:'30+ days', reason:'Stuck in reimbursement queue' },
  { id:'q-docerr', priority:'medium', icon:'warning', title:'Document upload errors',
    portal:'Previmedical', count:9, age:'today', reason:'Attachment failed validation — re-upload' },
  { id:'q-compliance', priority:'normal', icon:'shieldcheck', title:'Compliance-check failures',
    portal:'FasiAssidai', count:23, age:'this month', reason:'Minor exceptions — lower urgency' },
];

// Synthetic claims for the filtered drill-down list
const PQ_MEMBERS = ['Marco Rossi','Giulia Bianchi','Luca Ferrari','Sofia Romano','Matteo Conti',
  'Chiara Greco','Davide Esposito','Elena Moretti','Paolo Riva','Anna Colombo'];
function claimsFor(bucket) {
  const n = Math.min(bucket.count, 6);
  return Array.from({length:n}).map((_,i)=>({
    id:`CLM-${4800 - (bucket.id.length*7) - i}`,
    member: PQ_MEMBERS[(i*3 + bucket.title.length) % PQ_MEMBERS.length],
    portal: bucket.portal==='Multiple' ? ['RBM Salute','Generali','UniSalute'][i%3] : bucket.portal,
    amount: 8000 + ((i*4400 + bucket.count*130) % 26000),
    age: bucket.age,
  }));
}

// ---------- Filtered claims slide-over ----------
const PQDrilldown = ({ bucket, t, onClose }) => {
  const [shown, setShown] = pqUseState(false);
  pqUseEffect(()=>{ const r=requestAnimationFrame(()=>setShown(true));
    const esc=e=>{ if(e.key==='Escape') onClose(); }; window.addEventListener('keydown',esc);
    return ()=>{ cancelAnimationFrame(r); window.removeEventListener('keydown',esc); }; },[]);
  const pr = PRIORITY[bucket.priority];
  const claims = claimsFor(bucket);
  return (
    <div style={{position:'fixed', inset:0, zIndex:200, display:'flex', justifyContent:'flex-end'}}>
      <div onClick={onClose} style={{position:'absolute', inset:0, background:'rgba(8,14,28,0.5)',
        backdropFilter:'blur(3px)', opacity:shown?1:0, transition:'opacity .3s ease'}}/>
      <div style={{position:'relative', width:480, maxWidth:'92vw', height:'100%', background:t.cardBg,
        borderLeft:`1px solid ${t.cardBorder}`, boxShadow:'-20px 0 60px rgba(0,0,0,0.3)',
        transform:shown?'translateX(0)':'translateX(100%)', transition:'transform .38s cubic-bezier(.22,.61,.36,1)',
        display:'flex', flexDirection:'column', overflowY:'auto'}}>
        {/* header */}
        <div style={{padding:'22px 24px', borderBottom:`1px solid ${t.divider}`}}>
          <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:14}}>
            <span style={{fontSize:12, fontWeight:700, color:t.textMuted, letterSpacing:'0.08em', textTransform:'uppercase'}}>
              Filtered Claims
            </span>
            <button onClick={onClose} style={{background:'none', border:'none', color:t.textMuted, cursor:'pointer', padding:4}}>
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M18 6 6 18M6 6l12 12"/></svg>
            </button>
          </div>
          <div style={{display:'flex', alignItems:'center', gap:11}}>
            <span style={{width:38, height:38, borderRadius:11, flexShrink:0, color:pr.color, background:pr.soft,
              display:'flex', alignItems:'center', justifyContent:'center'}}>
              <window.Icon name={bucket.icon} size={20} strokeWidth={2}/>
            </span>
            <div>
              <div style={{fontSize:16, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.01em'}}>{bucket.title}</div>
              <div style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, fontWeight:700,
                color:pr.color, marginTop:3}}>
                <span style={{width:8, height:8, borderRadius:'50%', background:pr.color}}/>{pr.label}
                <span style={{color:t.textMuted, fontWeight:500}}>· {bucket.count} claims · {bucket.portal}</span>
              </div>
            </div>
          </div>
          <div style={{fontSize:12.5, color:t.textSecondary, marginTop:12, lineHeight:1.5}}>{bucket.reason}</div>
        </div>
        {/* claims list */}
        <div style={{padding:'8px 24px 20px'}}>
          {claims.map((c,i)=>(
            <div key={c.id} className="claim-row" style={{display:'flex', alignItems:'center', gap:12,
              padding:'13px 4px', borderBottom:`1px solid ${t.divider}`, borderRadius:8}}>
              <span style={{width:7, height:7, borderRadius:'50%', background:pr.color, flexShrink:0}}/>
              <div style={{flex:1, minWidth:0}}>
                <div style={{fontSize:13, fontWeight:700, color:t.accent}}>{c.id}</div>
                <div style={{fontSize:12, color:t.textSecondary, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
                  {c.member} · {c.portal}
                </div>
              </div>
              <div style={{textAlign:'right', flexShrink:0}}>
                <div style={{fontSize:13, fontWeight:800, color:t.textPrimary}}>{window.fmtEuro(c.amount)}</div>
                <div style={{fontSize:11, color:t.textMuted}}>{c.age}</div>
              </div>
            </div>
          ))}
          {bucket.count > claims.length && (
            <div style={{textAlign:'center', fontSize:12.5, color:t.textMuted, padding:'14px 0 4px'}}>
              + {bucket.count - claims.length} more in this filter
            </div>
          )}
          <button style={{marginTop:16, width:'100%', padding:'12px', borderRadius:10, border:'none',
            background:'linear-gradient(135deg,#2f6bf6,#4d8bff)', color:'#fff', fontSize:13.5, fontWeight:700,
            cursor:'pointer', fontFamily:'inherit', boxShadow:'0 6px 16px rgba(47,107,246,0.3)'}}>
            Open full claims list →
          </button>
        </div>
      </div>
    </div>
  );
};

// ---------- The priority queue panel ----------
const ClaimPriorityQueue = ({ t }) => {
  const [open, setOpen] = pqUseState(null);
  const counts = QUEUE.reduce((a,q)=>{ a[q.priority]=(a[q.priority]||0)+q.count; return a; }, {});
  return (
    <window.Card t={t} hover={false}>
      {/* header */}
      <div style={{display:'flex', alignItems:'flex-start', justifyContent:'space-between', marginBottom:6, flexWrap:'wrap', gap:10}}>
        <div style={{display:'flex', alignItems:'center', gap:8}}>
          <span style={{fontSize:14, fontWeight:800, color:t.textPrimary}}>Operational Alerts — Claim Priority Queue</span>
          <window.InfoTip t={t} text="Colour = how urgently an operator should act on this item. It does NOT indicate claim health. (COR-178)"/>
        </div>
        <div style={{display:'flex', gap:8, flexWrap:'wrap'}}>
          {PRIORITY_ORDER.map(p=>(
            <span key={p} style={{display:'inline-flex', alignItems:'center', gap:6, fontSize:11.5, fontWeight:700,
              color:PRIORITY[p].color, background:PRIORITY[p].soft, padding:'4px 11px', borderRadius:999}}>
              <span style={{width:8, height:8, borderRadius:'50%', background:PRIORITY[p].color,
                animation: p!=='normal' ? `tlP_${p==='high'?'critical':'warning'} 1.8s infinite` : 'none'}}/>
              {counts[p]||0} {PRIORITY[p].label.split(' ')[0].toLowerCase()}
            </span>
          ))}
        </div>
      </div>
      <div style={{fontSize:12, color:t.textMuted, marginBottom:16}}>
        Sorted by urgency to act. Click any row to open its filtered claims list.
      </div>
      {/* rows */}
      <div style={{display:'flex', flexDirection:'column', gap:8}}>
        {QUEUE.map((q,i)=>{
          const pr = PRIORITY[q.priority];
          return <PQRow key={q.id} q={q} pr={pr} t={t} delay={120+i*60} onClick={()=>setOpen(q)} />;
        })}
      </div>
      {open && <PQDrilldown bucket={open} t={t} onClose={()=>setOpen(null)}/>}
    </window.Card>
  );
};

const PQRow = ({ q, pr, t, delay, onClick }) => {
  const [shown, setShown] = pqUseState(false);
  const [hover, setHover] = pqUseState(false);
  pqUseEffect(()=>{ const tm=setTimeout(()=>setShown(true),delay); return ()=>clearTimeout(tm); },[]);
  return (
    <div onClick={onClick} onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
      style={{ display:'flex', alignItems:'center', gap:14, padding:'13px 14px', borderRadius:12, cursor:'pointer',
        background: hover ? pr.soft : t.chipBg, border:`1px solid ${hover ? pr.color+'55' : t.cardBorder}`,
        opacity: shown?1:0, transform: shown?'translateX(0)':'translateX(-10px)',
        transition:'opacity .45s ease, transform .45s ease, background .18s, border-color .18s' }}>
      {/* urgency light */}
      <span style={{width:12, height:12, borderRadius:'50%', background:pr.color, flexShrink:0,
        boxShadow:`0 0 0 4px ${pr.soft}`,
        animation: q.priority!=='normal' ? `tlP_${q.priority==='high'?'critical':'warning'} 1.8s infinite` : 'none'}}/>
      {/* icon */}
      <span style={{width:36, height:36, borderRadius:10, flexShrink:0, color:pr.color, background:pr.soft,
        display:'flex', alignItems:'center', justifyContent:'center'}}>
        <window.Icon name={q.icon} size={18} strokeWidth={2}/>
      </span>
      {/* text */}
      <div style={{flex:1, minWidth:0}}>
        <div style={{display:'flex', alignItems:'center', gap:9}}>
          <span style={{fontSize:14, fontWeight:700, color:t.textPrimary}}>{q.title}</span>
          <span style={{fontSize:10.5, fontWeight:700, color:pr.color, background:pr.soft, padding:'2px 8px', borderRadius:999}}>
            {pr.label}
          </span>
        </div>
        <div style={{fontSize:12, color:t.textSecondary, marginTop:3, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>
          {q.reason} · <span style={{color:t.textMuted}}>{q.portal} · {q.age}</span>
        </div>
      </div>
      {/* count + chevron */}
      <div style={{textAlign:'right', flexShrink:0}}>
        <div style={{fontSize:20, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em', lineHeight:1}}>{q.count}</div>
        <div style={{fontSize:10.5, color:t.textMuted}}>claims</div>
      </div>
      <span style={{color: hover ? pr.color : t.textMuted, flexShrink:0, transition:'color .18s'}}>
        <window.Icon name="chevright" size={18} strokeWidth={2.2}/>
      </span>
    </div>
  );
};

Object.assign(window, { ClaimPriorityQueue });


// ============================================================
// healthdash-app.jsx — assembles the new dashboard in the
// Lumen Dashboard.html visual language
// ============================================================

const HD_Sidebar = ({ t, themeName, active, setActive }) => (
  <aside style={{ width:230, flexShrink:0, background:t.sidebarBg, display:'flex', flexDirection:'column',
    borderRight:`1px solid ${t.sidebarBorder}`, padding:'20px 14px' }}>
    <div style={{display:'flex', alignItems:'center', gap:11, padding:'4px 10px 22px'}}>
      <img src={window.__resources.lumenLogo} alt="" style={{width:30, height:30}}/>
      <span style={{color:'#fff', fontWeight:800, fontSize:19, letterSpacing:'0.04em'}}>LUMEN</span>
    </div>
    <nav style={{display:'flex', flexDirection:'column', gap:3, flex:1}}>
      {window.NAV.map(item=>{
        const on=active===item.id;
        return (
          <button key={item.id} onClick={()=>setActive(item.id)} style={{
            display:'flex', alignItems:'center', gap:12, padding:'10px 12px', borderRadius:10, border:'none',
            cursor:'pointer', fontFamily:'inherit', textAlign:'left', fontSize:13.5, fontWeight:on?700:500,
            color:on?'#fff':t.sidebarItem, background:on?t.sidebarActiveBg:'transparent',
            boxShadow:on?'0 6px 16px rgba(47,107,246,0.4)':'none', transition:'background .2s, color .2s' }}
            onMouseEnter={e=>{ if(!on){ e.currentTarget.style.background='rgba(255,255,255,0.05)'; e.currentTarget.style.color='#fff'; } }}
            onMouseLeave={e=>{ if(!on){ e.currentTarget.style.background='transparent'; e.currentTarget.style.color=t.sidebarItem; } }}>
            <window.Icon name={item.icon} size={18} strokeWidth={1.9}/>{item.label}
          </button>
        );
      })}
    </nav>
    <div style={{display:'flex', alignItems:'center', gap:10, padding:'12px 10px', marginTop:8,
      borderTop:`1px solid ${t.sidebarBorder}`}}>
      <span style={{width:34, height:34, borderRadius:'50%', background:'linear-gradient(135deg,#2f6bf6,#4d8bff)',
        color:'#fff', fontSize:13, fontWeight:700, display:'flex', alignItems:'center', justifyContent:'center'}}>A</span>
      <div style={{flex:1, minWidth:0}}>
        <div style={{color:'#fff', fontSize:13, fontWeight:600}}>Admin User</div>
        <div style={{color:'rgba(255,255,255,0.5)', fontSize:11}}>admin@lumen.com</div>
      </div>
      <span style={{color:'rgba(255,255,255,0.5)'}}><window.Icon name="chevright" size={16}/></span>
    </div>
  </aside>
);

const HD_Header = ({ t, dark, setDark, title }) => (
  <header style={{ position:'sticky', top:0, zIndex:20, display:'flex', alignItems:'center', justifyContent:'space-between',
    padding:'16px 28px', background:t.headerBg, backdropFilter:'blur(10px)', borderBottom:`1px solid ${t.divider}` }}>
    <h1 style={{fontSize:21, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em', margin:0}}>{title}</h1>
    <div style={{display:'flex', alignItems:'center', gap:10}}>
      <div style={{display:'flex', alignItems:'center', gap:9, padding:'8px 13px', borderRadius:10,
        background:t.cardBg, border:`1px solid ${t.cardBorder}`, color:t.textSecondary, fontSize:13, fontWeight:500}}>
        <window.Icon name="calendar" size={15}/> May 26 – May 31, 2025 <window.Icon name="chevdown" size={14}/>
      </div>
      <button style={{display:'flex', alignItems:'center', gap:8, padding:'8px 14px', borderRadius:10,
        background:t.cardBg, border:`1px solid ${t.cardBorder}`, color:t.textSecondary, fontSize:13, fontWeight:600,
        cursor:'pointer', fontFamily:'inherit'}}><window.Icon name="filter" size={15}/> Filter</button>
      <button style={{display:'flex', alignItems:'center', gap:8, padding:'8px 16px', borderRadius:10,
        background:'linear-gradient(135deg,#2f6bf6,#4d8bff)', border:'none', color:'#fff', fontSize:13, fontWeight:600,
        cursor:'pointer', fontFamily:'inherit', boxShadow:'0 4px 12px rgba(47,107,246,0.35)'}}>
        <window.Icon name="download" size={15}/> Export</button>
      <button onClick={()=>setDark(d=>!d)} aria-label="Toggle theme" style={{width:38, height:38, borderRadius:10,
        cursor:'pointer', fontFamily:'inherit', background:t.cardBg, border:`1px solid ${t.cardBorder}`,
        color:t.textSecondary, display:'flex', alignItems:'center', justifyContent:'center'}}>
        <window.Icon name={dark?'sun':'moon'} size={17}/></button>
    </div>
  </header>
);

const HD_Overview = ({ t, openDrill, themeName }) => {
  const kpis = window.KPIS.filter(k=>k.id!=='health'); // health is now the hero
  return (
    <div style={{display:'flex', flexDirection:'column', gap:18}}>
      {/* filter bar */}
      <window.Reveal delay={20}><window.FilterBar t={t} themeName={themeName}/></window.Reveal>
      {/* row 1: hero health score + minimized portal status */}
      <div style={{display:'grid', gridTemplateColumns:'1.5fr 1fr', gap:18, alignItems:'stretch'}}>
        <window.Reveal delay={40} style={{display:'flex'}}><window.HealthScoreHero t={t} onOpen={openDrill}/></window.Reveal>
        <window.Reveal delay={110} style={{display:'flex'}}><window.CompactPortals t={t}/></window.Reveal>
      </div>
      {/* row 2: KPI cards */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(5,1fr)', gap:14}}>
        {kpis.map((k,i)=>(
          <window.Reveal key={k.id} delay={160+i*70}><window.KpiCard kpi={k} t={t} delay={300+i*90}/></window.Reveal>
        ))}
      </div>
      {/* row 3: charts */}
      <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:18}}>
        <window.Reveal delay={240}>
          <window.ChartCard t={t} title="Reimbursed Amount Over Time" tip="Total amount reimbursed to providers each month."
            series={window.REIMBURSED_SERIES} color={t.blue} gradId="reimGradB" delay={500}/>
        </window.Reveal>
        <window.Reveal delay={300}>
          <window.ChartCard t={t} title="Pending Amount Over Time" tip="Amount awaiting reimbursement each month."
            series={window.PENDING_SERIES} color="#f59e0b" gradId="pendGradB" delay={560}/>
        </window.Reveal>
      </div>
      {/* row 4: reimbursement status + alerts */}
      <div style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:18}}>
        <window.Reveal delay={340}><window.HD_ReimbursementPanel t={t}/></window.Reveal>
        <window.Reveal delay={400}><window.AlertsCard t={t}/></window.Reveal>
      </div>
      {/* row 6: COR-178 claim priority queue (replaces Recent Claims §5) */}
      <window.Reveal delay={480}><window.ClaimPriorityQueue t={t}/></window.Reveal>
    </div>
  );
};

// ---------- Providers page ----------
const PROVIDER_META = {
  'Humanitas Milano':   { city:'Milano',  claims:128, status:'healthy',  trend:'+9.2%' },
  'Gemelli Roma':       { city:'Roma',    claims:104, status:'healthy',  trend:'+6.4%' },
  'San Raffaele':       { city:'Milano',  claims:86,  status:'warning',  trend:'-2.1%' },
  'Niguarda':           { city:'Milano',  claims:71,  status:'healthy',  trend:'+4.8%' },
  'Policlinico Torino': { city:'Torino',  claims:58,  status:'critical', trend:'-7.5%' },
};
const HD_Providers = ({ t }) => {
  const total = window.PROVIDERS.reduce((a,p)=>a+p.amount,0);
  const avg = total / window.PROVIDERS.length;
  const stColor = { healthy:'#16a34a', warning:'#f59e0b', critical:'#ef4444' };
  const stLabel = { healthy:'In good standing', warning:'Attention needed', critical:'Blocking issue' };
  return (
    <div style={{display:'flex', flexDirection:'column', gap:18}}>
      {/* summary stats */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
        {[['Active Providers', window.PROVIDERS.length, '#2f6bf6'],
          ['Total Reimbursed', '€'+total.toFixed(2)+'M', '#16a34a'],
          ['Avg per Provider', '€'+avg.toFixed(2)+'M', '#7c5cfc']].map(([l,v,c],i)=>(
          <window.Reveal key={l} delay={40+i*70}>
            <window.Card t={t}>
              <div style={{fontSize:12.5, color:t.textSecondary, fontWeight:500, marginBottom:6}}>{l}</div>
              <div style={{fontSize:25, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em'}}>{v}</div>
              <div style={{height:3, marginTop:12, borderRadius:2, background:c, width:'62%'}}/>
            </window.Card>
          </window.Reveal>
        ))}
      </div>
      {/* ranked bars */}
      <window.Reveal delay={240}>
        <window.Card t={t}>
          <div style={{display:'flex', alignItems:'center', gap:7, marginBottom:18}}>
            <span style={{fontSize:14, fontWeight:700, color:t.textPrimary}}>Top Providers by Reimbursed Amount</span>
            <window.InfoTip t={t} text="Providers ranked by total reimbursed value this period."/>
          </div>
          <window.ProviderBars t={t}/>
        </window.Card>
      </window.Reveal>
      {/* provider cards */}
      <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:14}}>
        {window.PROVIDERS.map((p,i)=>{
          const m = PROVIDER_META[p.name] || {city:'—', claims:0, status:'healthy', trend:''};
          const up = m.trend.startsWith('+');
          return (
            <window.Reveal key={p.name} delay={300+i*70}>
              <window.Card t={t}>
                <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:16}}>
                  <span style={{width:44, height:44, borderRadius:12, background:t.accentSoft, color:t.accent,
                    display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                    <window.Icon name="hospital" size={22} strokeWidth={1.9}/>
                  </span>
                  <div style={{minWidth:0, flex:1}}>
                    <div style={{fontSize:14.5, fontWeight:700, color:t.textPrimary, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis'}}>{p.name}</div>
                    <div style={{fontSize:12, color:t.textMuted}}>{m.city}</div>
                  </div>
                  <span title={stLabel[m.status]} style={{width:10, height:10, borderRadius:'50%', flexShrink:0,
                    background:stColor[m.status], boxShadow:`0 0 0 3px ${stColor[m.status]}22`}}/>
                </div>
                <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end'}}>
                  <div>
                    <div style={{fontSize:11.5, color:t.textSecondary, marginBottom:3}}>Reimbursed</div>
                    <div style={{fontSize:21, fontWeight:800, color:t.textPrimary, letterSpacing:'-0.02em'}}>€{p.amount.toFixed(2)}M</div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div style={{fontSize:11.5, color:t.textSecondary, marginBottom:3}}>{m.claims} claims</div>
                    <div style={{display:'inline-flex', alignItems:'center', gap:4, fontSize:12, fontWeight:700,
                      color: up?'#16a34a':'#ef4444'}}>
                      <window.Icon name={up?'arrowup':'arrowdown'} size={13} strokeWidth={2.6}/>{m.trend}
                    </div>
                  </div>
                </div>
              </window.Card>
            </window.Reveal>
          );
        })}
      </div>
    </div>
  );
};

// ---------- Generic placeholder ----------
const HD_Placeholder = ({ t, label }) => (
  <window.Reveal delay={40}>
    <window.Card t={t} style={{minHeight:420, display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:14}}>
      <span style={{width:62, height:62, borderRadius:18, background:t.accentSoft, color:t.accent,
        display:'flex', alignItems:'center', justifyContent:'center'}}>
        <window.Icon name={(window.NAV.find(n=>n.label===label)||{}).icon||'grid'} size={28} strokeWidth={1.7}/>
      </span>
      <div style={{fontSize:18, fontWeight:700, color:t.textPrimary}}>{label}</div>
      <div style={{fontSize:13.5, color:t.textSecondary, maxWidth:360, textAlign:'center', lineHeight:1.5}}>
        The <b>Overview</b> and <b>Providers</b> pages are fully built in this preview. Other sections are part of the full product.
      </div>
    </window.Card>
  </window.Reveal>
);

const HD_TITLES = { overview:'Overview', claims:'Claims', reimbursements:'Reimbursements',
  providers:'Providers', members:'Members', analytics:'Analytics', alerts:'Alerts',
  reports:'Reports', organisation:'Organisation', settings:'Settings' };

const HD_App = () => {
  const [dark, setDark] = useState(false);
  const [active, setActive] = useState('overview');
  const [drill, setDrill] = useState(false);
  const t = dark ? window.TOKENS.dark : window.TOKENS.light;
  const page = active==='overview' ? <HD_Overview t={t} openDrill={()=>setDrill(true)} themeName={dark?'dark':'light'}/>
    : active==='providers' ? <HD_Providers t={t}/>
    : <HD_Placeholder t={t} label={HD_TITLES[active]}/>;
  return (
    <div style={{ display:'flex', height:'100vh', overflow:'hidden',
      background:`radial-gradient(900px 500px at 75% -5%, ${t.accentSoft}, transparent 60%), linear-gradient(160deg, ${t.appBg}, ${t.appBg2})`,
      fontFamily:'"Inter", -apple-system, BlinkMacSystemFont, sans-serif' }}>
      <HD_Sidebar t={t} themeName={dark?'dark':'light'} active={active} setActive={setActive}/>
      <div style={{flex:1, display:'flex', flexDirection:'column', minWidth:0}}>
        <HD_Header t={t} dark={dark} setDark={setDark} title={HD_TITLES[active]}/>
        <main key={active} style={{flex:1, overflowY:'auto', padding:'24px 28px 48px'}}>
          {page}
        </main>
      </div>
      {drill && <window.HealthDrilldown t={t} onClose={()=>setDrill(false)}/>}
    </div>
  );
};

window.HDApp = HD_App;



    ReactDOM.createRoot(document.getElementById('root')).render(<window.HDApp/>);
  

Lumen — Dashboard (Health Score)

✅ Low Risk - https://protective-ivory-a1e3l7eh-dp44g626ygh1.edgeone.app/

Requests	IP Address	Location	AS Autonomous System
2	43.152.26.58	Singapore	AS139341ACE
2	1	-	-

Security Scan Report: protective-ivory-a1e3l7eh-dp44g626ygh1.edgeone.app

Summary

AI Security Verdict

Low Risk

Risk Factors

Safety Factors

Details

Screenshot

Page Load Overview

Language Analysis

Primary Language

Detection Details

Website Classification

Primary Category

All Detected Categories

Detected Features

Domain & IP Information

Content Similarity HashesFor malware variant detection

TLSH (Trend Micro Locality Sensitive Hash)

ssdeep (Context Triggered Piecewise Hashing)

sdhash (Similarity Digest Hashing)

Image Hashes

Perceptual Hashes

Other Hashes

Scan History