{"title":"Top 10 Best Sellers","body":[{"type":"html","html":"<div data-controller=\"Top10BestSellers\" 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\">Start Date</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\">End Date</span>\n        <input type=\"date\" class=\"input input-bordered input-sm\" data-filter=\"end-date\" />\n      </label>\n      <label class=\"form-control w-40\">\n        <span class=\"label-text text-sm\">Branch</span>\n        <select class=\"select select-bordered select-sm\" data-filter=\"branch\">\n          <option value=\"\">All Branches</option>\n        </select>\n      </label>\n    </div>\n    <button class=\"btn btn-sm btn-primary\" data-role=\"refresh-data\">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-3 gap-4\" data-role=\"metric-cards\"></div>\n  <div class=\"card bg-base-100 shadow-md\">\n    <div class=\"card-body\">\n      <h3 class=\"card-title\">Top 10 Products by Sales Volume</h3>\n      <div class=\"h-96\">\n        <canvas data-role=\"top-products-chart\"></canvas>\n      </div>\n    </div>\n  </div>\n  <div class=\"card bg-base-100 shadow-md\">\n    <div class=\"card-body\">\n      <h3 class=\"card-title\">Best Sellers Table</h3>\n      <div class=\"overflow-x-auto\">\n        <table class=\"table table-sm table-zebra\">\n          <thead>\n            <tr>\n              <th>#</th>\n              <th>Product Name</th>\n              <th>Barcode</th>\n              <th>Category</th>\n              <th class=\"text-right\">Units Sold</th>\n              <th class=\"text-right\">Revenue</th>\n              <th class=\"text-right\">Transactions</th>\n              <th class=\"text-right\">Avg Price</th>\n            </tr>\n          </thead>\n          <tbody data-role=\"products-table-body\"></tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}