{"title":"Branch Performance Dashboard","body":[{"type":"html","html":"<div data-controller=\"BranchPerformanceDashboard\" 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-48\">\n        <span class=\"label-text text-sm\">Date Range</span>\n        <input type=\"date\" class=\"input input-bordered input-sm\" data-filter=\"start_date\" />\n      </label>\n      <label class=\"form-control w-48\">\n        <span class=\"label-text text-sm\">To</span>\n        <input type=\"date\" class=\"input input-bordered input-sm\" data-filter=\"end_date\" />\n      </label>\n    </div>\n    <button class=\"btn btn-sm btn-primary\" onclick=\"refreshBranchPerformance()\">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=\"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\">Branch Sales Comparison</h3>\n        <div class=\"h-80\">\n          <canvas data-role=\"branch-comparison-chart\"></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\">\n        <h3 class=\"card-title\">Branch Performance Trend</h3>\n        <div class=\"h-80\">\n          <canvas data-role=\"branch-trend-chart\"></canvas>\n        </div>\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      <h3 class=\"card-title\">Branch Performance Table</h3>\n      <div class=\"overflow-x-auto\">\n        <table class=\"table table-sm\" data-role=\"branch-table\">\n          <thead>\n            <tr><th>Branch</th><th>Total Sales</th><th>Transactions</th><th>Avg Transaction</th><th>Top Product</th><th>Growth %</th></tr>\n          </thead>\n          <tbody></tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}