{"title":"Customer Segmentation (RFM)","body":[{"type":"html","html":"<div data-controller=\"CustomerSegmentationRfm\" class=\"space-y-6\">\n  <div class=\"flex flex-wrap items-center justify-between gap-3\">\n    <label class=\"form-control w-48\">\n      <span class=\"label-text text-sm\">Analysis Period (months)</span>\n      <input type=\"number\" class=\"input input-bordered input-sm\" data-filter=\"months\" value=\"12\" min=\"1\" max=\"36\" />\n    </label>\n    <button class=\"btn btn-sm btn-primary\" onclick=\"refreshCustomerRfm()\">Refresh</button>\n  </div>\n  <div class=\"hidden text-sm text-error\" data-role=\"error-container\"></div>\n  <div class=\"alert alert-info mb-4\">\n    <svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" class=\"stroke-current shrink-0 w-6 h-6\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\"></path></svg>\n    <span><strong>RFM Analysis:</strong> Recency (days since last purchase), Frequency (number of purchases), Monetary (total revenue)</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=\"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\">Customer Segments</h3>\n        <div class=\"h-64\">\n          <canvas data-role=\"segment-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\">RFM Score Distribution</h3>\n        <div class=\"h-64\">\n          <canvas data-role=\"rfm-distribution-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\">Customer Segmentation Table</h3>\n      <div class=\"overflow-x-auto\">\n        <table class=\"table table-sm\" data-role=\"rfm-table\">\n          <thead>\n            <tr><th>Customer</th><th>Segment</th><th>Recency (days)</th><th>Frequency</th><th>Monetary</th><th>RFM Score</th><th>Action</th></tr>\n          </thead>\n          <tbody></tbody>\n        </table>\n      </div>\n    </div>\n  </div>\n</div>"}],"footer":[{"type":"button","label":"Close","onClick":"closeModal"}]}