{"title":"Slow Moving Items","body":[{"type":"html","html":"<div data-controller=\"SlowMovingItems\" 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\">Days Threshold</span>\n        <input type=\"number\" class=\"input input-bordered input-sm\" data-filter=\"days-threshold\" value=\"90\" min=\"30\" max=\"365\" />\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=\"alert alert-warning\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"stroke-current shrink-0 h-6 w-6\" fill=\"none\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\" /></svg>\n    <span>Products with no sales in the last <strong data-role=\"threshold-display\">90</strong> days. Consider promotional activities or stock clearance.</span>\n  </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\">Slow Moving Products</h3>\n      <div class=\"overflow-x-auto\">\n        <table class=\"table table-sm table-zebra\">\n          <thead>\n            <tr>\n              <th>Product Name</th>\n              <th>Barcode</th>\n              <th>Category</th>\n              <th class=\"text-right\">Last Sale Date</th>\n              <th class=\"text-right\">Days Since Sale</th>\n              <th class=\"text-right\">Current Stock</th>\n              <th class=\"text-right\">Value at Risk</th>\n            </tr>\n          </thead>\n          <tbody data-role=\"slow-items-table-body\"></tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}