@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/daily/CostTable.astro

@@ -0,0 +1,946 @@
+---
+/**
+ * CostTable.astro
+ *
+ * Sortable table for daily cost breakdown.
+ * Subscribes to nanostores for reactive data updates.
+ * Part of task-20.1: Phase 2.3 - Create CostTable.astro with improved styling
+ *
+ * Features:
+ * - Sortable columns (click header)
+ * - Search/filter input
+ * - CSV export
+ * - Melbourne timezone formatting
+ * - Reactive updates via nanostores
+ */
+import type { ResourceType } from '../usage-colors';
+
+// Generate unique table ID
+const tableId = `cost-table-${Math.random().toString(36).slice(2, 9)}`;
+
+// Resource columns
+const resourceColumns: { key: ResourceType; label: string; short: string }[] = [
+  { key: 'workers', label: 'Workers', short: 'WK' },
+  { key: 'd1', label: 'D1', short: 'D1' },
+  { key: 'kv', label: 'KV', short: 'KV' },
+  { key: 'r2', label: 'R2', short: 'R2' },
+  { key: 'vectorize', label: 'Vectorize', short: 'VZ' },
+  { key: 'aiGateway', label: 'AI Gateway', short: 'AI' },
+  { key: 'durableObjects', label: 'Durable Objects', short: 'DO' },
+  { key: 'workersAI', label: 'Workers AI', short: 'WAI' },
+  { key: 'queues', label: 'Queues', short: 'Q' },
+];
+---
+
+<div
+  class="cost-table-container"
+  data-component="cost-table"
+  id={tableId}
+  data-table-id={tableId}
+  data-columns={JSON.stringify(resourceColumns)}
+>
+  <!-- Controls -->
+  <div class="table-controls">
+    <div class="search-box">
+      <svg class="search-icon" viewBox="0 0 16 16" fill="currentColor">
+        <path
+          fill-rule="evenodd"
+          d="M11.5 7a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z"
+        ></path>
+      </svg>
+      <input
+        type="text"
+        class="search-input"
+        placeholder="Filter by date..."
+        data-action="search"
+      />
+    </div>
+
+    <div class="selection-badge" id={`${tableId}-badge`} hidden>
+      <span class="badge-text" id={`${tableId}-badge-text`}></span>
+      <button type="button" class="badge-clear" data-action="clear">
+        <svg viewBox="0 0 16 16" fill="currentColor">
+          <path
+            d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+          ></path>
+        </svg>
+      </button>
+    </div>
+  </div>
+
+  <!-- Table -->
+  <div class="table-scroll">
+    <table class="data-table">
+      <thead>
+        <tr>
+          <th class="sortable date-col" data-sort="date" data-order="desc">
+            <span class="th-inner">
+              Date
+              <svg class="sort-arrow active desc" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"
+                ></path>
+              </svg>
+            </span>
+          </th>
+          {
+            resourceColumns.map((col) => (
+              <th class="sortable num-col" data-sort={col.key}>
+                <span class="th-inner">
+                  <span class="label-full">{col.label}</span>
+                  <span class="label-short">{col.short}</span>
+                  <svg class="sort-arrow" viewBox="0 0 16 16" fill="currentColor">
+                    <path d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z" />
+                  </svg>
+                </span>
+              </th>
+            ))
+          }
+          <th class="sortable num-col total-col" data-sort="total">
+            <span class="th-inner">
+              Total
+              <svg class="sort-arrow" viewBox="0 0 16 16" fill="currentColor">
+                <path
+                  d="M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z"
+                ></path>
+              </svg>
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody id={`${tableId}-body`}>
+        <tr class="empty-row visible">
+          <td colspan="12" class="empty-cell">
+            <span class="empty-text">Loading data...</span>
+          </td>
+        </tr>
+      </tbody>
+      <tfoot id={`${tableId}-foot`}>
+        <tr class="totals-row">
+          <td class="totals-label">Total</td>
+          <td class="num-col" colspan="10">-</td>
+        </tr>
+      </tfoot>
+    </table>
+  </div>
+
+  <!-- Footer -->
+  <div class="table-footer">
+    <span class="row-count" id={`${tableId}-count`}>0 rows</span>
+    <button type="button" class="export-btn" data-action="export">
+      <svg viewBox="0 0 16 16" fill="currentColor">
+        <path
+          d="M2.75 14A1.75 1.75 0 011 12.25v-2.5a.75.75 0 011.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25v-2.5a.75.75 0 011.5 0v2.5A1.75 1.75 0 0113.25 14H2.75z"
+        ></path>
+        <path
+          d="M7.25 7.689V2a.75.75 0 011.5 0v5.689l1.97-1.969a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L4.22 6.78a.75.75 0 111.06-1.06l1.97 1.969z"
+        ></path>
+      </svg>
+      CSV
+    </button>
+  </div>
+</div>
+
+<style>
+  .cost-table-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 280px;
+  }
+
+  /* Controls */
+  .table-controls {
+    display: flex;
+    align-items: center;
+    gap: var(--usage-spacing-sm);
+    padding: var(--usage-spacing-sm) var(--usage-spacing-md);
+    border-bottom: 1px solid var(--usage-border-subtle);
+  }
+
+  .search-box {
+    position: relative;
+    flex: 1;
+    max-width: 200px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 12px;
+    height: 12px;
+    color: var(--usage-text-muted);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 6px 10px 6px 28px;
+    background: var(--usage-bg-card);
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-sm);
+    font-size: 0.75rem;
+    color: var(--usage-text-primary);
+    transition:
+      border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--usage-accent-blue, #0969da);
+    box-shadow: 0 0 0 2px rgba(9, 105, 218, 0.15);
+  }
+
+  .search-input::placeholder {
+    color: var(--usage-text-muted);
+  }
+
+  .selection-badge {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: var(--usage-accent-blue, #0969da);
+    border-radius: var(--usage-radius-sm);
+    color: white;
+    font-size: 0.6875rem;
+    font-weight: 500;
+  }
+
+  .selection-badge[hidden] {
+    display: none;
+  }
+
+  .badge-clear {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    padding: 0;
+    background: rgba(255, 255, 255, 0.25);
+    border: none;
+    border-radius: 2px;
+    color: white;
+    cursor: pointer;
+    transition: background 0.1s ease;
+  }
+
+  .badge-clear:hover {
+    background: rgba(255, 255, 255, 0.4);
+  }
+
+  .badge-clear svg {
+    width: 10px;
+    height: 10px;
+  }
+
+  /* Table scroll */
+  .table-scroll {
+    flex: 1;
+    overflow: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  /* Data table */
+  .data-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.75rem;
+  }
+
+  .data-table th {
+    padding: 8px 10px;
+    background: var(--usage-bg-tertiary, var(--usage-bg-secondary));
+    font-weight: 600;
+    color: var(--usage-text-secondary);
+    text-align: left;
+    white-space: nowrap;
+    border-bottom: 1px solid var(--usage-border-subtle);
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .data-table th.num-col {
+    text-align: right;
+  }
+
+  .data-table th.sortable {
+    cursor: pointer;
+    user-select: none;
+    transition: background 0.1s ease;
+  }
+
+  .data-table th.sortable:hover {
+    background: var(--usage-bg-hover, var(--usage-bg-secondary));
+  }
+
+  .th-inner {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+  }
+
+  .label-short {
+    display: none;
+  }
+
+  .sort-arrow {
+    width: 10px;
+    height: 10px;
+    opacity: 0.25;
+    transition:
+      opacity 0.1s ease,
+      transform 0.15s ease;
+  }
+
+  .sort-arrow.active {
+    opacity: 1;
+  }
+
+  .sort-arrow.asc {
+    transform: rotate(180deg);
+  }
+
+  .data-table td {
+    padding: 8px 10px;
+    border-bottom: 1px solid var(--usage-border-subtle);
+    color: var(--usage-text-primary);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .data-table td.num-col {
+    text-align: right;
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.6875rem;
+  }
+
+  .data-table tr.data-row {
+    transition: background 0.1s ease;
+  }
+
+  .data-table tr.data-row:hover {
+    background: var(--usage-bg-hover, rgba(0, 0, 0, 0.02));
+  }
+
+  .data-table tr.data-row.selected {
+    background: rgba(9, 105, 218, 0.08);
+  }
+
+  .data-table tr.data-row.hidden {
+    display: none;
+  }
+
+  .date-cell {
+    font-weight: 500;
+    white-space: nowrap;
+  }
+
+  .cost-val {
+    display: inline-block;
+  }
+
+  .cost-val.zero {
+    color: var(--usage-text-muted);
+  }
+
+  .cost-val.total {
+    font-weight: 600;
+  }
+
+  .total-col {
+    background: rgba(0, 0, 0, 0.02);
+  }
+
+  :global([data-theme='dark']) .total-col {
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  /* Totals row */
+  .totals-row {
+    background: var(--usage-bg-tertiary, var(--usage-bg-secondary));
+    font-weight: 600;
+  }
+
+  .totals-row td {
+    padding: 10px;
+    border-bottom: none;
+  }
+
+  .totals-label {
+    font-weight: 600;
+    color: var(--usage-text-primary);
+  }
+
+  .grand-total {
+    font-weight: 700;
+    color: var(--usage-accent-blue, #0969da);
+    font-size: 0.8125rem;
+  }
+
+  /* Empty state */
+  .empty-row {
+    display: none;
+  }
+
+  .empty-row.visible {
+    display: table-row;
+  }
+
+  .empty-cell {
+    text-align: center;
+    padding: var(--usage-spacing-xl) !important;
+  }
+
+  .empty-text {
+    color: var(--usage-text-muted);
+    font-size: 0.8125rem;
+  }
+
+  /* Footer */
+  .table-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--usage-spacing-xs) var(--usage-spacing-md);
+    border-top: 1px solid var(--usage-border-subtle);
+    background: var(--usage-bg-tertiary, var(--usage-bg-secondary));
+  }
+
+  .row-count {
+    font-size: 0.6875rem;
+    font-family: var(--usage-font-mono, monospace);
+    color: var(--usage-text-muted);
+  }
+
+  .export-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    padding: 4px 8px;
+    background: transparent;
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-sm);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    color: var(--usage-text-secondary);
+    cursor: pointer;
+    transition:
+      background 0.1s ease,
+      border-color 0.1s ease,
+      color 0.1s ease;
+  }
+
+  .export-btn:hover {
+    background: var(--usage-bg-hover);
+    border-color: var(--usage-border-default);
+    color: var(--usage-text-primary);
+  }
+
+  .export-btn svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* Responsive */
+  @media (max-width: 900px) {
+    .label-full {
+      display: none;
+    }
+
+    .label-short {
+      display: inline;
+    }
+
+    .data-table th,
+    .data-table td {
+      padding: 6px 4px;
+    }
+  }
+
+  /* Mobile: Condensed view with primary metrics only */
+  @media (max-width: 640px) {
+    .table-controls {
+      padding: var(--usage-spacing-xs) var(--usage-spacing-sm);
+    }
+
+    .search-box {
+      max-width: none;
+    }
+
+    .data-table {
+      font-size: 0.6875rem;
+    }
+
+    .data-table th,
+    .data-table td {
+      padding: 4px 2px;
+    }
+
+    .data-table td.num-col {
+      font-size: 0.625rem;
+    }
+
+    /* Hide less critical columns on mobile */
+    .data-table th:nth-child(n + 6):not(:last-child),
+    .data-table td:nth-child(n + 6):not(:last-child) {
+      display: none;
+    }
+
+    .date-cell {
+      font-size: 0.6875rem;
+    }
+
+    .table-footer {
+      padding: var(--usage-spacing-xs);
+      flex-direction: column;
+      gap: 0.5rem;
+      align-items: flex-start;
+    }
+
+    .export-btn {
+      width: 100%;
+      justify-content: center;
+    }
+  }
+
+  /* Extra small mobile */
+  @media (max-width: 480px) {
+    .cost-table-container {
+      min-height: 200px;
+    }
+
+    .data-table {
+      font-size: 0.625rem;
+    }
+
+    .data-table th,
+    .data-table td {
+      padding: 3px 2px;
+    }
+
+    /* Show only Date, Workers, D1, and Total on very small screens */
+    .data-table th:nth-child(n + 4):not(:last-child),
+    .data-table td:nth-child(n + 4):not(:last-child) {
+      display: none;
+    }
+
+    .label-short {
+      font-size: 0.5625rem;
+    }
+  }
+
+  /* Dark mode overrides */
+  :global([data-theme='dark']) .cost-table-container,
+  :global(.dark) .cost-table-container {
+    background: #21262d;
+  }
+
+  :global([data-theme='dark']) .table-controls,
+  :global(.dark) .table-controls {
+    background: #21262d;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .search-input,
+  :global(.dark) .search-input {
+    background: #161b22;
+    border-color: #30363d;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .search-input::placeholder,
+  :global(.dark) .search-input::placeholder {
+    color: #484f58;
+  }
+
+  :global([data-theme='dark']) .search-icon,
+  :global(.dark) .search-icon {
+    color: #484f58;
+  }
+
+  :global([data-theme='dark']) .data-table th,
+  :global(.dark) .data-table th {
+    background: #161b22;
+    color: #8b949e;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .data-table th.sortable:hover,
+  :global(.dark) .data-table th.sortable:hover {
+    background: #21262d;
+  }
+
+  :global([data-theme='dark']) .data-table td,
+  :global(.dark) .data-table td {
+    color: #e6edf3;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .data-table tr.data-row:hover,
+  :global(.dark) .data-table tr.data-row:hover {
+    background: rgba(56, 139, 253, 0.1);
+  }
+
+  :global([data-theme='dark']) .data-table tr.data-row.selected,
+  :global(.dark) .data-table tr.data-row.selected {
+    background: rgba(56, 139, 253, 0.15);
+  }
+
+  :global([data-theme='dark']) .cost-val.zero,
+  :global(.dark) .cost-val.zero {
+    color: #484f58;
+  }
+
+  :global([data-theme='dark']) .totals-row,
+  :global(.dark) .totals-row {
+    background: #161b22;
+  }
+
+  :global([data-theme='dark']) .totals-label,
+  :global(.dark) .totals-label {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .grand-total,
+  :global(.dark) .grand-total {
+    color: #58a6ff;
+  }
+
+  :global([data-theme='dark']) .table-footer,
+  :global(.dark) .table-footer {
+    background: #161b22;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .row-count,
+  :global(.dark) .row-count {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .export-btn,
+  :global(.dark) .export-btn {
+    color: #8b949e;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .export-btn:hover,
+  :global(.dark) .export-btn:hover {
+    background: #21262d;
+    border-color: #484f58;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .empty-text,
+  :global(.dark) .empty-text {
+    color: #8b949e;
+  }
+</style>
+
+<script>
+  import { $dailyData, $selectedDate, $timezone } from '../state/usageStore';
+
+  // Get tableId and resourceColumns from data attributes
+  const containerEl = document.querySelector('[data-component="cost-table"]');
+  const tableId = containerEl?.dataset.tableId;
+  const cols = containerEl?.dataset.columns ? JSON.parse(containerEl.dataset.columns) : [];
+
+  if (!tableId) {
+    console.error('CostTable: Missing table ID');
+  }
+
+  const container = tableId ? document.getElementById(tableId) : null;
+  if (!container) console.error('CostTable container not found');
+
+  const tbody = document.getElementById(`${tableId}-body`);
+  const tfoot = document.getElementById(`${tableId}-foot`);
+  const countEl = document.getElementById(`${tableId}-count`);
+  const badge = document.getElementById(`${tableId}-badge`);
+  const badgeText = document.getElementById(`${tableId}-badge-text`);
+  const searchInput = container.querySelector('[data-action="search"]');
+  const clearBtn = container.querySelector('[data-action="clear"]');
+  const exportBtn = container.querySelector('[data-action="export"]');
+  const headers = container.querySelectorAll('th.sortable');
+
+  let currentSort = { key: 'date', order: 'desc' };
+  let searchTerm = '';
+
+  // Format cost value
+  function fmt(v) {
+    if (v === 0) return '-';
+    return '$' + v.toFixed(v < 0.01 ? 4 : 2);
+  }
+
+  // Format date for Melbourne
+  function fmtDate(dateStr) {
+    const date = new Date(dateStr);
+    return date.toLocaleDateString('en-AU', {
+      timeZone: $timezone.get(),
+      weekday: 'short',
+      day: 'numeric',
+      month: 'short',
+    });
+  }
+
+  // Create a cost value span
+  function createCostSpan(value, extraClass) {
+    const span = document.createElement('span');
+    span.className =
+      'cost-val' + (value === 0 ? ' zero' : '') + (extraClass ? ' ' + extraClass : '');
+    span.textContent = fmt(value);
+    return span;
+  }
+
+  // Clear all children from an element
+  function clearChildren(el) {
+    while (el.firstChild) {
+      el.removeChild(el.firstChild);
+    }
+  }
+
+  // Render empty state
+  function renderEmptyState() {
+    clearChildren(tbody);
+    const tr = document.createElement('tr');
+    tr.className = 'empty-row visible';
+    const td = document.createElement('td');
+    td.colSpan = 12;
+    td.className = 'empty-cell';
+    const span = document.createElement('span');
+    span.className = 'empty-text';
+    span.textContent = 'No data available';
+    td.appendChild(span);
+    tr.appendChild(td);
+    tbody.appendChild(tr);
+
+    clearChildren(tfoot);
+    const footTr = document.createElement('tr');
+    footTr.className = 'totals-row';
+    const labelTd = document.createElement('td');
+    labelTd.className = 'totals-label';
+    labelTd.textContent = 'Total';
+    footTr.appendChild(labelTd);
+    const emptyTd = document.createElement('td');
+    emptyTd.className = 'num-col';
+    emptyTd.colSpan = 10;
+    emptyTd.textContent = '-';
+    footTr.appendChild(emptyTd);
+    tfoot.appendChild(footTr);
+
+    countEl.textContent = '0 rows';
+  }
+
+  // Render table rows using safe DOM methods
+  function renderRows() {
+    const data = $dailyData.get();
+    const selected = $selectedDate.get();
+
+    if (data.length === 0) {
+      renderEmptyState();
+      return;
+    }
+
+    // Sort data
+    const sorted = [...data].sort((a, b) => {
+      const key = currentSort.key;
+      const aVal = key === 'date' ? a.date : a[key] || 0;
+      const bVal = key === 'date' ? b.date : b[key] || 0;
+
+      if (currentSort.order === 'asc') {
+        return aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
+      }
+      return aVal > bVal ? -1 : aVal < bVal ? 1 : 0;
+    });
+
+    // Clear and rebuild tbody
+    clearChildren(tbody);
+
+    sorted.forEach((row) => {
+      const isSelected = row.date === selected;
+      const dateFormatted = fmtDate(row.date);
+      const matchesSearch = !searchTerm || dateFormatted.toLowerCase().includes(searchTerm);
+
+      const tr = document.createElement('tr');
+      tr.className =
+        'data-row' + (isSelected ? ' selected' : '') + (!matchesSearch ? ' hidden' : '');
+      tr.dataset.date = row.date;
+
+      // Date cell
+      const dateCell = document.createElement('td');
+      dateCell.className = 'date-cell';
+      dateCell.textContent = dateFormatted;
+      tr.appendChild(dateCell);
+
+      // Resource cells
+      cols.forEach((c) => {
+        const td = document.createElement('td');
+        td.className = 'num-col';
+        td.appendChild(createCostSpan(row[c.key] || 0));
+        tr.appendChild(td);
+      });
+
+      // Total cell
+      const totalTd = document.createElement('td');
+      totalTd.className = 'num-col total-col';
+      totalTd.appendChild(createCostSpan(row.total, 'total'));
+      tr.appendChild(totalTd);
+
+      tbody.appendChild(tr);
+    });
+
+    // Calculate and render totals
+    const totals = data.reduce((acc, d) => {
+      cols.forEach((c) => {
+        acc[c.key] = (acc[c.key] || 0) + (d[c.key] || 0);
+      });
+      acc.total = (acc.total || 0) + d.total;
+      return acc;
+    }, {});
+
+    clearChildren(tfoot);
+    const footTr = document.createElement('tr');
+    footTr.className = 'totals-row';
+
+    const labelTd = document.createElement('td');
+    labelTd.className = 'totals-label';
+    labelTd.textContent = 'Total';
+    footTr.appendChild(labelTd);
+
+    cols.forEach((c) => {
+      const td = document.createElement('td');
+      td.className = 'num-col';
+      td.appendChild(createCostSpan(totals[c.key] || 0));
+      footTr.appendChild(td);
+    });
+
+    const grandTotalTd = document.createElement('td');
+    grandTotalTd.className = 'num-col total-col';
+    grandTotalTd.appendChild(createCostSpan(totals.total, 'grand-total'));
+    footTr.appendChild(grandTotalTd);
+
+    tfoot.appendChild(footTr);
+
+    // Update count
+    const visibleCount = sorted.filter(
+      (r) => !searchTerm || fmtDate(r.date).toLowerCase().includes(searchTerm)
+    ).length;
+    countEl.textContent = `${visibleCount} of ${data.length} rows`;
+
+    // Update badge
+    if (selected) {
+      badge.hidden = false;
+      badgeText.textContent = fmtDate(selected);
+    } else {
+      badge.hidden = true;
+    }
+  }
+
+  // Apply search filter
+  function applySearch() {
+    const rows = tbody.querySelectorAll('.data-row');
+    let visible = 0;
+
+    rows.forEach((row) => {
+      const dateCell = row.querySelector('.date-cell');
+      const matches = !searchTerm || dateCell.textContent.toLowerCase().includes(searchTerm);
+      row.classList.toggle('hidden', !matches);
+      if (matches) visible++;
+    });
+
+    const total = $dailyData.get().length;
+    countEl.textContent = `${visible} of ${total} rows`;
+  }
+
+  // Update sort visuals
+  function updateSortVisuals() {
+    headers.forEach((h) => {
+      const icon = h.querySelector('.sort-arrow');
+      if (h.dataset.sort === currentSort.key) {
+        h.dataset.order = currentSort.order;
+        icon.classList.add('active', currentSort.order);
+        icon.classList.remove(currentSort.order === 'asc' ? 'desc' : 'asc');
+      } else {
+        h.dataset.order = '';
+        icon.classList.remove('active', 'asc', 'desc');
+      }
+    });
+  }
+
+  // Export CSV
+  function exportCSV() {
+    const data = $dailyData.get();
+    if (data.length === 0) return;
+
+    const header = ['Date', ...cols.map((c) => c.label), 'Total'].join(',');
+    const rows = data.map((r) =>
+      [r.date, ...cols.map((c) => (r[c.key] || 0).toFixed(4)), r.total.toFixed(4)].join(',')
+    );
+
+    const totals = data.reduce((acc, d) => {
+      cols.forEach((c) => {
+        acc[c.key] = (acc[c.key] || 0) + (d[c.key] || 0);
+      });
+      acc.total = (acc.total || 0) + d.total;
+      return acc;
+    }, {});
+
+    rows.push(
+      ['TOTAL', ...cols.map((c) => (totals[c.key] || 0).toFixed(4)), totals.total.toFixed(4)].join(
+        ','
+      )
+    );
+
+    const csv = [header, ...rows].join('\n');
+    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `cloudflare-costs-${new Date().toISOString().split('T')[0]}.csv`;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    URL.revokeObjectURL(url);
+  }
+
+  // Event handlers
+  searchInput?.addEventListener('input', (e) => {
+    searchTerm = e.target.value.toLowerCase();
+    applySearch();
+  });
+
+  clearBtn?.addEventListener('click', () => {
+    $selectedDate.set(null);
+  });
+
+  exportBtn?.addEventListener('click', exportCSV);
+
+  headers.forEach((h) => {
+    h.addEventListener('click', () => {
+      const key = h.dataset.sort;
+      if (currentSort.key === key) {
+        currentSort.order = currentSort.order === 'desc' ? 'asc' : 'desc';
+      } else {
+        currentSort = { key, order: 'desc' };
+      }
+      updateSortVisuals();
+      renderRows();
+    });
+  });
+
+  // Subscribe to store changes
+  $dailyData.subscribe(() => {
+    renderRows();
+  });
+
+  $selectedDate.subscribe(() => {
+    renderRows();
+  });
+
+  // Initial render
+  renderRows();
+  updateSortVisuals();
+</script>