{"body": [{"html": "<div data-controller=\"CostOptimizationLab\" 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-32\">\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-36\">\n        <span class=\"label-text text-sm\">Volume lever</span>\n        <input class=\"input input-bordered input-sm\" type=\"number\" step=\"0.01\" min=\"0\" data-filter=\"volumeFactor\" value=\"0.08\" />\n      </label>\n      <label class=\"form-control w-36\">\n        <span class=\"label-text text-sm\">Mix shift</span>\n        <input class=\"input input-bordered input-sm\" type=\"number\" step=\"0.01\" min=\"0\" data-filter=\"mixShift\" value=\"0.12\" />\n      </label>\n      <label class=\"form-control w-36\">\n        <span class=\"label-text text-sm\">Payment term</span>\n        <input class=\"input input-bordered input-sm\" type=\"number\" step=\"0.01\" min=\"0\" data-filter=\"paymentTerm\" value=\"0.015\" />\n      </label>\n    </div>\n    <button class=\"btn btn-sm btn-primary\" onclick=\"refreshCostOptimizationLab()\">Recalculate</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      <h3 class=\"card-title\">Value Realisation Waterfall</h3>\n      <div class=\"h-72\">\n        <canvas data-role=\"waterfall-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 space-y-3\" data-role=\"scenario-panel\"></div>\n    </div>\n    <div class=\"card bg-base-100 shadow-md shadow-slate-400/50\">\n      <div class=\"card-body\">\n        <h3 class=\"card-title\">Variance by Category</h3>\n        <div class=\"overflow-x-auto\">\n          <table class=\"table table-sm\" data-role=\"variance-table\">\n            <thead>\n              <tr><th>Category</th><th>Budget</th><th>Actual</th><th>Variance</th><th>%</th></tr>\n            </thead>\n            <tbody></tbody>\n          </table>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>", "type": "html"}], "title": "Cost Optimization Lab", "footer": [{"type": "button", "label": "Close", "onClick": "closeModal"}]}