{"body": [{"html": "<div data-controller=\"SupplierRiskRadar\" class=\"space-y-6\">\n  <div class=\"flex flex-wrap items-center justify-between gap-3\">\n    <label class=\"form-control w-40\">\n      <span class=\"label-text text-sm\">Range</span>\n      <select class=\"select select-bordered select-sm\" data-filter=\"range\">\n        <option value=\"30\">Last 30 days</option>\n        <option value=\"60\">Last 60 days</option>\n        <option value=\"90\" selected>Last 90 days</option>\n      </select>\n    </label>\n    <button class=\"btn btn-sm btn-primary\" onclick=\"refreshSupplierRiskRadar()\">Refresh</button>\n  </div>\n  <div class=\"hidden text-sm text-error\" data-role=\"error-container\"></div>\n  <div class=\"grid grid-cols-1 lg:grid-cols-3 gap-6\">\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n      <div class=\"card-body space-y-2\" data-role=\"risk-summary\"></div>\n    </div>\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50 lg:col-span-2\">\n      <div class=\"card-body\">\n        <h3 class=\"card-title\">Risk Profile</h3>\n        <div class=\"h-72\">\n          <canvas data-role=\"risk-radar\"></canvas>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-6\">\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n      <div class=\"card-body\">\n        <h3 class=\"card-title\">Spend Exposure by Region</h3>\n        <div class=\"h-64\">\n          <canvas data-role=\"risk-exposure\"></canvas>\n        </div>\n      </div>\n    </div>\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n      <div class=\"card-body space-y-3\" data-role=\"risk-alerts\"></div>\n    </div>\n  </div>\n</div>", "type": "html"}], "title": "Supplier Risk Radar", "footer": [{"type": "button", "label": "Close", "onClick": "closeModal"}]}