{"title":"VAT Summary Report","body":[{"type":"html","html":"<div data-controller=\"VatSummaryReport\" 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    <div class=\"flex gap-2\">\n      <button class=\"btn btn-sm btn-outline\" data-role=\"export-pdf\">Export PDF</button>\n      <button class=\"btn btn-sm btn-primary\" data-role=\"refresh-data\">Refresh</button>\n    </div>\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-4 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\">VAT Summary by Rate</h3>\n      <div class=\"overflow-x-auto\">\n        <table class=\"table table-sm\">\n          <thead>\n            <tr>\n              <th>VAT Code</th>\n              <th>VAT Rate</th>\n              <th class=\"text-right\">Transactions</th>\n              <th class=\"text-right\">Units Sold</th>\n              <th class=\"text-right\">Taxable Amount</th>\n              <th class=\"text-right\">VAT Amount</th>\n              <th class=\"text-right\">Total Revenue</th>\n            </tr>\n          </thead>\n          <tbody data-role=\"vat-table-body\"></tbody>\n          <tfoot>\n            <tr class=\"font-bold\">\n              <td colspan=\"2\">TOTAL</td>\n              <td class=\"text-right\" data-role=\"total-transactions\">0</td>\n              <td class=\"text-right\" data-role=\"total-units\">0</td>\n              <td class=\"text-right\" data-role=\"total-taxable\">$0.00</td>\n              <td class=\"text-right\" data-role=\"total-vat\">$0.00</td>\n              <td class=\"text-right\" data-role=\"total-revenue\">$0.00</td>\n            </tr>\n          </tfoot>\n        </table>\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\">\n      <div class=\"card-body\">\n        <h3 class=\"card-title\">VAT Distribution</h3>\n        <div class=\"h-64\">\n          <canvas data-role=\"vat-pie-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\">VAT Collection Breakdown</h3>\n        <div class=\"h-64\">\n          <canvas data-role=\"vat-bar-chart\"></canvas>\n        </div>\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\">VAT Summary Details</h3>\n      <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div>\n          <h4 class=\"font-semibold text-sm mb-2\">Zero-Rated (0%)</h4>\n          <ul class=\"text-sm space-y-1\">\n            <li>Transactions: <span class=\"font-mono\" data-role=\"zero-rated-count\">0</span></li>\n            <li>Taxable Amount: <span class=\"font-mono\" data-role=\"zero-rated-taxable\">$0.00</span></li>\n            <li>VAT Collected: <span class=\"font-mono\" data-role=\"zero-rated-vat\">$0.00</span></li>\n          </ul>\n        </div>\n        <div>\n          <h4 class=\"font-semibold text-sm mb-2\">Standard Rate (12.5%)</h4>\n          <ul class=\"text-sm space-y-1\">\n            <li>Transactions: <span class=\"font-mono\" data-role=\"standard-count\">0</span></li>\n            <li>Taxable Amount: <span class=\"font-mono\" data-role=\"standard-taxable\">$0.00</span></li>\n            <li>VAT Collected: <span class=\"font-mono\" data-role=\"standard-vat\">$0.00</span></li>\n          </ul>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}