{"body": [{"html": "<div data-controller=\"ProcurementPulseBoard\" class=\"space-y-6\">\n  <div class=\"flex flex-wrap items-center justify-between gap-3\">\n    <div class=\"flex flex-wrap 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      <label class=\"form-control w-40\">\n        <span class=\"label-text text-sm\">Status</span>\n        <select class=\"select select-bordered select-sm\" data-filter=\"status\">\n          <option value=\"\">All statuses</option>\n          <option value=\"pending\">Pending</option>\n          <option value=\"approved\">Approved</option>\n          <option value=\"ordered\">Ordered</option>\n          <option value=\"completed\">Completed</option>\n        </select>\n      </label>\n    </div>\n    <button class=\"btn btn-sm btn-primary\" onclick=\"refreshProcurementPulseBoard()\">Refresh</button>\n  </div>\n  <div class=\"hidden text-sm text-error\" data-role=\"error-container\"></div>\n  <div class=\"grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4\" data-role=\"metric-cards\"></div>\n  <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n    <div class=\"card-body\">\n      <div class=\"flex justify-between items-center\">\n        <h3 class=\"card-title\">Stage Pipeline</h3>\n        <span class=\"text-xs opacity-70\" data-role=\"funnel-range\"></span>\n      </div>\n      <div class=\"h-56\">\n        <canvas data-role=\"funnel-chart\"></canvas>\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        <div class=\"flex justify-between items-center\">\n          <h3 class=\"card-title\">Stage SLA Heatmap</h3>\n          <span class=\"text-xs opacity-70\" data-role=\"heatmap-range\"></span>\n        </div>\n        <div class=\"overflow-x-auto\">\n          <table class=\"table table-sm\" data-role=\"heatmap-table\">\n            <thead></thead>\n            <tbody></tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n      <div class=\"card-body\">\n        <div class=\"flex justify-between items-center\">\n          <h3 class=\"card-title\">Cycle Timeline</h3>\n          <span class=\"text-xs opacity-70\" data-role=\"timeline-range\"></span>\n        </div>\n        <div class=\"h-64\">\n          <canvas data-role=\"timeline-chart\"></canvas>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", "type": "html"}], "title": "Procurement Pulse Board", "footer": [{"type": "button", "label": "Close", "onClick": "closeModal"}]}