fix(analytics): link sales filters to chart contracts

web/static/css/page-sales-analysis-bem.css

@@ -103,6 +103,24 @@
   color: color-mix(in srgb, var(--momo-page-accent) 60%, var(--momo-text-strong));
 }
 .sa-tag__sep { opacity: 0.5; margin: 0 0.15rem; }
+.sa-period-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  flex: 0 0 auto;
+  padding: 0.2rem 0.45rem;
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: 4px;
+  background: var(--momo-surface);
+  color: var(--momo-text-muted);
+  font-family: var(--momo-font-mono, ui-monospace, monospace);
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+.sa-period-badge i { color: var(--momo-page-accent); }
 .sa-alert { margin: 1rem 0; }
 
 /* ---------- Filter card ---------- */
@@ -602,6 +620,18 @@
 .sa-mkt-title--accent { color: var(--momo-page-accent); }
 .sa-mkt-title--olive  { color: var(--momo-tag-olive); }
 
+.sa-modal-period { margin-top: 0.35rem; }
+.sa-modal-status {
+  padding: 0.75rem;
+  border: 1px solid var(--momo-border-subtle);
+  border-radius: 4px;
+  background: var(--momo-surface);
+  color: var(--momo-text-muted);
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.sa-modal-status[hidden] { display: none; }
+
 /* ---------- Responsive trims ---------- */
 @media (max-width: 991.98px) {
   .sa-insights__col { border-right: none; border-bottom: 1px dashed var(--momo-border-subtle); }

web/static/js/page-sales-analysis.js

@@ -64,7 +64,13 @@
     if (!sel.value) return;
     showLoading('正在載入資料...');
     const form = sel.closest('form');
-    if (form) form.submit();
+    if (form) {
+      const start = form.querySelector('[name="start_date"]');
+      const end = form.querySelector('[name="end_date"]');
+      if (start) start.value = '';
+      if (end) end.value = '';
+      form.requestSubmit();
+    }
   };
 
   window.clearDateRange = function () {
@@ -85,14 +91,71 @@
   };
 
   window.showTopDetail = function (kind, metric) {
-    const url = new URL('/top_detail', window.location.origin);
-    url.searchParams.set('kind', kind);
+    const url = new URL('/api/sales_analysis/top_detail', window.location.origin);
+    url.searchParams.set('type', kind);
     url.searchParams.set('metric', metric);
+    url.searchParams.set('view', 'product');
     // forward existing filters
     new URLSearchParams(window.location.search).forEach((v, k) => {
       if (!url.searchParams.has(k)) url.searchParams.set(k, v);
     });
-    window.open(url.toString(), '_blank');
+    const modalElement = document.getElementById('topDetailModal');
+    const rows = document.getElementById('topDetailRows');
+    const status = document.getElementById('topDetailStatus');
+    const title = document.getElementById('topDetailModalLabel');
+    const exportLink = document.getElementById('topDetailExport');
+    if (!modalElement || !rows || !status || !window.bootstrap) return;
+
+    const labels = {
+      revenue: '業績主推商品',
+      margin: '高毛利守價商品',
+      quantity: '人氣引流商品'
+    };
+    title.textContent = labels[kind] || '商品排行明細';
+    rows.replaceChildren();
+    status.hidden = false;
+    status.textContent = '正在載入排行...';
+    const exportUrl = new URL('/api/sales_analysis/export_top_detail', window.location.origin);
+    url.searchParams.forEach((value, key) => exportUrl.searchParams.set(key, value));
+    exportLink.href = exportUrl.toString();
+    bootstrap.Modal.getOrCreateInstance(modalElement).show();
+
+    fetch(url.toString(), { headers: { Accept: 'application/json' } })
+      .then((response) => {
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        return response.json();
+      })
+      .then((payload) => {
+        const items = Array.isArray(payload.items) ? payload.items : [];
+        if (!items.length) {
+          status.textContent = '所選期間沒有符合條件的商品。';
+          return;
+        }
+        const fragment = document.createDocumentFragment();
+        items.forEach((item, index) => {
+          const row = document.createElement('tr');
+          const values = [
+            fmtNum(index + 1),
+            [item.name, item.product_id].filter(Boolean).join(' · '),
+            item.category || '—',
+            metric === 'qty' ? fmtNum(item.value) : fmtMoney(item.value),
+            item.margin_rate == null ? '—' : `${Number(item.margin_rate).toFixed(1)}%`
+          ];
+          values.forEach((value, cellIndex) => {
+            const cell = document.createElement('td');
+            cell.textContent = String(value);
+            if (cellIndex >= 3) cell.classList.add('text-end');
+            row.appendChild(cell);
+          });
+          fragment.appendChild(row);
+        });
+        rows.appendChild(fragment);
+        status.hidden = true;
+      })
+      .catch((error) => {
+        console.warn('[sales-analysis] top detail failed', error);
+        status.textContent = '排行明細暫時無法載入，請稍後重試。';
+      });
   };
 
   window.exportMarketingExcel = function (campaign) {
@@ -115,8 +178,15 @@
     };
     const start = document.getElementById('start_date');
     const end   = document.getElementById('end_date');
-    if (start) flatpickr(start, { ...opts, onChange: () => end && end.dispatchEvent(new Event('focus')) });
-    if (end)   flatpickr(end,   opts);
+    const clearQuickRange = () => {
+      const range = document.getElementById('data_range');
+      if (range) range.value = '';
+    };
+    if (start) flatpickr(start, { ...opts, onChange: () => {
+      clearQuickRange();
+      if (end && end._flatpickr) end._flatpickr.open();
+    }});
+    if (end) flatpickr(end, { ...opts, onChange: clearQuickRange });
   };
 
   // ─── Read embedded data ────────────────────────────────
@@ -327,10 +397,10 @@
       // quadrant labels
       ctx.fillStyle = mix(INK, 50);
       ctx.font = 'bold 11px system-ui';
-      ctx.fillText('★ 明星 (Star)',     chartArea.left + 12,  chartArea.top + 18);
-      ctx.fillText('? 問題兒童 (Question)', x + 12,         chartArea.top + 18);
-      ctx.fillText('🐮 金牛 (Cash Cow)', chartArea.left + 12, chartArea.bottom - 8);
-      ctx.fillText('🐶 瘦狗 (Dog)',     x + 12,            chartArea.bottom - 8);
+      ctx.fillText('高毛利潛力', chartArea.left + 12, chartArea.top + 18);
+      ctx.fillText('主推明星', x + 12, chartArea.top + 18);
+      ctx.fillText('待調整', chartArea.left + 12, chartArea.bottom - 8);
+      ctx.fillText('走量守價', x + 12, chartArea.bottom - 8);
       ctx.restore();
     }
   });
@@ -344,7 +414,7 @@
       horizontalBar(
         document.getElementById('barChart'),
         data.barData.labels, chartValues(data.barData),
-        data.barData.label || '銷售',
+        data.barData.metric_label || data.barData.label || '銷售',
         data.barData.is_money ? fmtMoney : fmtNum
       );
     }