{"title":"Transaction Export Dashboard","body":[{"type":"html","html":"<div data-controller=\"TransactionExportDashboard\" 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      <label class=\"form-control w-32\">\n        <span class=\"label-text text-sm\">Format</span>\n        <select class=\"select select-bordered select-sm\" data-filter=\"format\">\n          <option value=\"csv\">CSV</option>\n          <option value=\"excel\">Excel</option>\n          <option value=\"json\">JSON</option>\n        </select>\n      </label>\n    </div>\n    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm btn-outline\" onclick=\"previewTransactionExport()\">Preview</button>\n      <button class=\"btn btn-sm btn-primary\" onclick=\"downloadTransactionExport()\">Export</button>\n    </div>\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><strong>Note:</strong> Large exports may take several minutes. Export includes all transaction details, customer information, and product data.</span>\n  </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\">Export Preview (First 100 rows)</h3>\n      <div class=\"overflow-x-auto\" style=\"max-height: 400px;\">\n        <table class=\"table table-xs table-pin-rows\" data-role=\"preview-table\">\n          <thead>\n            <tr><th>Date</th><th>Transaction #</th><th>Product</th><th>Customer</th><th>Qty</th><th>Price</th><th>Discount</th><th>VAT</th><th>Total</th><th>Payment</th><th>Cashier</th></tr>\n          </thead>\n          <tbody></tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}