@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,1079 @@
+---
+/**
+ * DailyOverview.astro
+ *
+ * Comprehensive usage dashboard container that consolidates:
+ * - Filter controls (period, project, custom dates)
+ * - Stats display (Total, Avg/day, resource count)
+ * - Daily cost chart (stacked bar, full width)
+ * - Daily breakdown table (full width, below chart)
+ * - Secondary filters (compare, search, toggles, export, settings)
+ *
+ * Part of Option B consolidation: Move header controls into Daily section
+ */
+import type { DailyCostBreakdown } from '../../../lib/cloudflare/graphql';
+import CostChart from './CostChart.astro';
+import CostTable from './CostTable.astro';
+import PeriodButtons from '../filters/PeriodButtons.astro';
+import InlineDateRange from '../filters/InlineDateRange.astro';
+import ProjectSelect from '../filters/ProjectSelect.astro';
+
+interface Props {
+  initialData?: DailyCostBreakdown[];
+  initialPeriod?: string;
+  initialProject?: string;
+  initialStartDate?: string;
+  initialEndDate?: string;
+}
+
+const {
+  initialData = [],
+  initialPeriod = '30d',
+  initialProject = 'all',
+  initialStartDate = '',
+  initialEndDate = '',
+} = Astro.props;
+
+// Calculate initial totals for hero stats
+const totalCost = initialData.reduce((sum, d) => sum + d.total, 0);
+const avgDailyCost = initialData.length > 0 ? totalCost / initialData.length : 0;
+---
+
+<section class="daily-overview" data-component="daily-overview">
+  <!-- Geometric accent line -->
+  <div class="accent-bar" aria-hidden="true">
+    <div class="accent-segment accent-segment--primary"></div>
+    <div class="accent-segment accent-segment--secondary"></div>
+    <div class="accent-segment accent-segment--tertiary"></div>
+  </div>
+
+  <!-- Legacy Data Warning Banner (hidden by default, shown when data has rollupVersion=1) -->
+  <div id="legacy-data-warning" class="legacy-data-warning" style="display: none;" role="alert">
+    <span class="warning-icon" aria-hidden="true">⚠️</span>
+    <div class="warning-content">
+      <strong>Historical Data Notice</strong>
+      <p>
+        Some dates in this period contain legacy cost data that may show inflated values. These
+        dates predate our improved data collection method (Jan 4, 2026). Costs shown may be ~15x
+        higher than actual for affected days.
+      </p>
+    </div>
+  </div>
+
+  <!-- Main Header: Title + Primary Filters -->
+  <header class="section-header">
+    <div class="header-row header-row--primary">
+      <div class="header-title">
+        <h2 class="section-title">Usage Dashboard</h2>
+        <span class="section-subtitle" id="date-range-display">
+          {initialData.length > 0 ? `${initialData.length} days` : 'No data'}
+        </span>
+      </div>
+
+      <!-- Primary Filters: Period + Project -->
+      <div class="primary-filters">
+        <PeriodButtons initialPeriod={initialPeriod} />
+        <InlineDateRange initialStart={initialStartDate} initialEnd={initialEndDate} maxDays={90} />
+        <ProjectSelect initialProject={initialProject} />
+      </div>
+    </div>
+
+    <!-- Stats Row: Total, Avg, Resource Count -->
+    <div class="header-row header-row--stats">
+      <div class="stat-pills">
+        <div class="stat-pill stat-pill--hero">
+          <span class="stat-label">Period Cost</span>
+          <span class="stat-value stat-value--large" id="total-cost-display">
+            ${totalCost.toFixed(2)}
+          </span>
+        </div>
+        <div class="stat-pill">
+          <span class="stat-label">Avg/day</span>
+          <span class="stat-value" id="avg-cost-display">
+            ${avgDailyCost.toFixed(2)}
+          </span>
+        </div>
+        <div class="stat-pill stat-pill--muted">
+          <span class="stat-label">Resources</span>
+          <span class="stat-value" id="resource-count-value">0</span>
+        </div>
+      </div>
+
+      <!-- Secondary Actions: Refresh, Export, Settings -->
+      <div class="header-actions">
+        <button
+          type="button"
+          id="refresh-data"
+          class="action-button action-button--primary"
+          aria-label="Refresh data (bypass cache)"
+          title="Refresh data (bypass cache)"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            class="refresh-icon"
+          >
+            <path
+              d="M14 8A6 6 0 1 1 8 2v2"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+            <path
+              d="M5 2 8 4 8 1"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+          </svg>
+          <span class="action-label">Refresh</span>
+        </button>
+        <button
+          type="button"
+          id="export-csv"
+          class="action-button"
+          aria-label="Export as CSV"
+          title="Export as CSV"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 10v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3M4.5 6.5 8 10l3.5-3.5M8 10V2"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+          </svg>
+          <span class="action-label">CSV</span>
+        </button>
+        <button
+          type="button"
+          id="export-json"
+          class="action-button"
+          aria-label="Export as JSON"
+          title="Export as JSON"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M14 10v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-3M4.5 6.5 8 10l3.5-3.5M8 10V2"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+          </svg>
+          <span class="action-label">JSON</span>
+        </button>
+        <a href="/usage/settings" class="action-button" title="Alert Thresholds Settings">
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8.325 2.317a1.724 1.724 0 0 1 3.35 0 1.723 1.723 0 0 0 2.573 1.066c1.067-.648 2.388.673 1.74 1.74a1.723 1.723 0 0 0 1.065 2.572c1.756.426 1.756 2.924 0 3.35a1.723 1.723 0 0 0-1.066 2.573c.649 1.067-.673 2.388-1.74 1.74a1.723 1.723 0 0 0-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.723 1.723 0 0 0-2.573-1.066c-1.067.649-2.388-.673-1.74-1.74a1.723 1.723 0 0 0-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.723 1.723 0 0 0 1.066-2.573c-.649-1.067.673-2.388 1.74-1.74a1.723 1.723 0 0 0 2.572-1.065Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+            <path
+              d="M10 12.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"></path>
+          </svg>
+          <span class="action-label">Settings</span>
+        </a>
+      </div>
+    </div>
+
+    <!-- Tertiary Row: Toggles + Auto-refresh -->
+    <div class="header-row header-row--tertiary">
+      <div class="filter-toggles">
+        <button
+          type="button"
+          class="toggle-pill"
+          id="toggle-only-changed"
+          aria-pressed="false"
+          title="Show only resources with significant changes (>5% cost change or NEW)"
+        >
+          <span class="toggle-icon">Δ</span>
+          <span class="toggle-label">Only Changed</span>
+        </button>
+        <button
+          type="button"
+          class="toggle-pill"
+          id="toggle-non-zero-cost"
+          aria-pressed="false"
+          title="Hide resources with zero cost"
+        >
+          <span class="toggle-icon">$</span>
+          <span class="toggle-label">Non-zero</span>
+        </button>
+      </div>
+
+      <div class="auto-refresh">
+        <label class="toggle-switch" title="Auto-refresh every 30 seconds">
+          <input type="checkbox" id="auto-refresh-toggle" />
+          <span class="toggle-slider"></span>
+        </label>
+        <span class="toggle-text" id="auto-refresh-label">Auto-refresh</span>
+        <span class="refresh-countdown" id="refresh-countdown" style="display: none;"></span>
+      </div>
+
+      <!-- Loading indicator -->
+      <div class="loading-indicator" id="filter-loading" style="display: none;">
+        <svg
+          class="spinner"
+          width="16"
+          height="16"
+          viewBox="0 0 16 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="2" stroke-opacity="0.25"
+          ></circle>
+          <path
+            d="M14 8a6 6 0 0 0-6-6"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"></path>
+        </svg>
+        <span class="loading-text">Loading...</span>
+      </div>
+    </div>
+  </header>
+
+  <!-- Main Content: Chart + Table (stacked, full-width) -->
+  <div class="content-stack">
+    <!-- Daily Costs Chart (full width) -->
+    <div class="chart-panel">
+      <div class="panel-header">
+        <h3 class="panel-title">Daily Costs</h3>
+      </div>
+      <div class="chart-container">
+        <CostChart />
+      </div>
+    </div>
+
+    <!-- Daily Breakdown Table (full width) -->
+    <div class="table-panel">
+      <div class="panel-header">
+        <h3 class="panel-title">Daily Breakdown</h3>
+      </div>
+      <div class="table-container">
+        <CostTable />
+      </div>
+    </div>
+  </div>
+
+  <!-- Loading overlay -->
+  <div class="loading-overlay" id="loading-overlay" aria-hidden="true">
+    <div class="loading-spinner">
+      <div class="spinner-ring"></div>
+      <div class="spinner-ring spinner-ring--delayed"></div>
+    </div>
+  </div>
+</section>
+
+<style>
+  .daily-overview {
+    position: relative;
+    background: var(--usage-bg-card);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-lg);
+    overflow: hidden;
+    margin-bottom: var(--usage-spacing-xl);
+    transition:
+      border-color 0.2s ease,
+      box-shadow 0.2s ease;
+  }
+
+  .daily-overview:hover {
+    border-color: var(--usage-border-hover, var(--usage-border-default));
+    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.08);
+  }
+
+  /* Geometric accent bar */
+  .accent-bar {
+    display: flex;
+    height: 4px;
+    background: var(--usage-border-subtle);
+  }
+
+  .accent-segment {
+    height: 100%;
+    transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  .accent-segment--primary {
+    flex: 5;
+    background: var(--usage-resource-workers, #f59e0b);
+  }
+
+  .accent-segment--secondary {
+    flex: 3;
+    background: var(--usage-resource-aiGateway, #06b6d4);
+  }
+
+  .accent-segment--tertiary {
+    flex: 2;
+    background: var(--usage-resource-d1, #3b82f6);
+  }
+
+  /* Legacy Data Warning Banner */
+  .legacy-data-warning {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--usage-spacing-sm);
+    padding: var(--usage-spacing-sm) var(--usage-spacing-md);
+    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+    border-bottom: 1px solid #f59e0b;
+    color: #92400e;
+  }
+
+  .legacy-data-warning .warning-icon {
+    font-size: 1rem;
+    line-height: 1.5;
+    flex-shrink: 0;
+  }
+
+  .legacy-data-warning .warning-content {
+    flex: 1;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+  }
+
+  .legacy-data-warning .warning-content strong {
+    display: block;
+    font-weight: 600;
+    margin-bottom: 0.125rem;
+    color: #78350f;
+  }
+
+  .legacy-data-warning .warning-content p {
+    margin: 0;
+    opacity: 0.9;
+  }
+
+  :global([data-theme='dark']) .legacy-data-warning,
+  :global(.dark) .legacy-data-warning {
+    background: linear-gradient(135deg, #422006 0%, #78350f 100%);
+    border-color: #b45309;
+    color: #fef3c7;
+  }
+
+  :global([data-theme='dark']) .legacy-data-warning .warning-content strong,
+  :global(.dark) .legacy-data-warning .warning-content strong {
+    color: #fde68a;
+  }
+
+  /* Header */
+  .section-header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-md);
+    padding: var(--usage-spacing-lg);
+    border-bottom: 1px solid var(--usage-border-subtle);
+    background: var(--usage-bg-secondary);
+  }
+
+  .header-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--usage-spacing-md);
+    flex-wrap: wrap;
+  }
+
+  .header-row--primary {
+    gap: var(--usage-spacing-lg);
+  }
+
+  .header-title {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-xs);
+    flex-shrink: 0;
+  }
+
+  .section-title {
+    margin: 0;
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    letter-spacing: -0.01em;
+  }
+
+  .section-subtitle {
+    font-size: 0.8125rem;
+    color: var(--usage-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .primary-filters {
+    display: flex;
+    align-items: center;
+    gap: var(--usage-spacing-md);
+    flex-wrap: wrap;
+  }
+
+  /* Stats Row */
+  .header-row--stats {
+    padding-top: var(--usage-spacing-sm);
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .stat-pills {
+    display: flex;
+    gap: var(--usage-spacing-sm);
+    flex-wrap: wrap;
+  }
+
+  .stat-pill {
+    display: flex;
+    align-items: center;
+    gap: var(--usage-spacing-xs);
+    padding: var(--usage-spacing-xs) var(--usage-spacing-sm);
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-md);
+    font-size: 0.8125rem;
+  }
+
+  .stat-pill--hero {
+    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
+    border-color: #d97706;
+    padding: var(--usage-spacing-sm) var(--usage-spacing-md);
+  }
+
+  .stat-pill.stat-pill--hero .stat-label,
+  .stat-pill.stat-pill--hero .stat-value {
+    color: #ffffff;
+    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
+  }
+
+  :global([data-theme='dark']) .stat-pill--hero {
+    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
+    border-color: #f59e0b;
+  }
+
+  :global([data-theme='dark']) .stat-pill.stat-pill--hero .stat-label,
+  :global([data-theme='dark']) .stat-pill.stat-pill--hero .stat-value {
+    color: #ffffff;
+  }
+
+  .stat-pill--muted {
+    opacity: 0.8;
+  }
+
+  .stat-label {
+    color: var(--usage-text-muted);
+    font-weight: 500;
+    font-size: 0.6875rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .stat-value {
+    color: var(--usage-text-primary);
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    font-family: var(--usage-font-mono, 'JetBrains Mono', monospace);
+  }
+
+  .stat-value--large {
+    font-size: 1.125rem;
+  }
+
+  /* Header Actions */
+  .header-actions {
+    display: flex;
+    gap: var(--usage-spacing-xs);
+  }
+
+  .action-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.625rem;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: var(--usage-radius-sm);
+    color: var(--usage-text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    text-decoration: none;
+  }
+
+  .action-button:hover {
+    background: var(--usage-bg-tertiary);
+    border-color: var(--usage-border-hover);
+    color: var(--usage-text-primary);
+  }
+
+  .action-button--primary {
+    background: var(--usage-accent-blue);
+    border-color: var(--usage-accent-blue);
+    color: #ffffff;
+  }
+
+  .action-button--primary:hover {
+    background: color-mix(in srgb, var(--usage-accent-blue) 85%, #000000);
+    border-color: color-mix(in srgb, var(--usage-accent-blue) 85%, #000000);
+    color: #ffffff;
+  }
+
+  .action-button:disabled,
+  .action-button[disabled] {
+    opacity: 0.6;
+    cursor: not-allowed;
+  }
+
+  /* Spinning animation for refresh icon */
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .refresh-icon.spinning {
+    animation: spin 1s linear infinite;
+  }
+
+  .action-label {
+    display: none;
+  }
+
+  @media (min-width: 768px) {
+    .action-label {
+      display: inline;
+    }
+  }
+
+  /* Tertiary Row */
+  .header-row--tertiary {
+    padding-top: var(--usage-spacing-sm);
+    border-top: 1px solid var(--usage-border-subtle);
+  }
+
+  .filter-toggles {
+    display: flex;
+    gap: var(--usage-spacing-xs);
+    flex-wrap: wrap;
+  }
+
+  .toggle-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.5rem;
+    background: var(--usage-bg-primary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: 9999px;
+    color: var(--usage-text-secondary);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  .toggle-pill:hover {
+    border-color: var(--usage-border-hover);
+    background: var(--usage-bg-tertiary);
+  }
+
+  .toggle-pill[aria-pressed='true'] {
+    background: color-mix(in srgb, var(--usage-accent-primary) 15%, transparent);
+    border-color: var(--usage-accent-primary);
+    color: var(--usage-accent-primary);
+  }
+
+  .toggle-icon {
+    font-weight: 700;
+  }
+
+  /* Auto-refresh */
+  .auto-refresh {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.6875rem;
+    color: var(--usage-text-muted);
+  }
+
+  .toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 32px;
+    height: 18px;
+    cursor: pointer;
+  }
+
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .toggle-slider {
+    position: absolute;
+    inset: 0;
+    background-color: var(--usage-border-primary);
+    border-radius: 9999px;
+    transition: background-color 0.2s ease;
+  }
+
+  .toggle-slider::before {
+    content: '';
+    position: absolute;
+    height: 14px;
+    width: 14px;
+    left: 2px;
+    bottom: 2px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+  }
+
+  .toggle-switch input:checked + .toggle-slider {
+    background-color: var(--usage-accent-primary);
+  }
+
+  .toggle-switch input:checked + .toggle-slider::before {
+    transform: translateX(14px);
+  }
+
+  .toggle-text {
+    font-weight: 500;
+  }
+
+  .refresh-countdown {
+    font-variant-numeric: tabular-nums;
+    font-family: var(--usage-font-mono, monospace);
+    color: var(--usage-accent-primary);
+  }
+
+  /* Loading indicator */
+  .loading-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+    margin-left: auto;
+  }
+
+  .spinner {
+    animation: spin 0.8s linear infinite;
+    color: var(--usage-accent-primary);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    font-weight: 500;
+  }
+
+  /* Content Stack (vertical layout) */
+  .content-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--usage-spacing-lg);
+    padding: var(--usage-spacing-lg);
+  }
+
+  /* Panels */
+  .chart-panel,
+  .table-panel {
+    background: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-subtle);
+    border-radius: var(--usage-radius-md);
+    overflow: hidden;
+  }
+
+  .panel-header {
+    padding: var(--usage-spacing-sm) var(--usage-spacing-md);
+    border-bottom: 1px solid var(--usage-border-subtle);
+    background: var(--usage-bg-tertiary);
+  }
+
+  .panel-title {
+    margin: 0;
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+  }
+
+  .chart-container {
+    min-height: 300px;
+  }
+
+  .table-container {
+    min-height: 300px;
+  }
+
+  /* Loading overlay */
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--usage-bg-card);
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.2s ease,
+      visibility 0.2s ease;
+    z-index: 10;
+  }
+
+  .loading-overlay[data-loading='true'] {
+    opacity: 0.9;
+    visibility: visible;
+  }
+
+  .loading-spinner {
+    position: relative;
+    width: 40px;
+    height: 40px;
+  }
+
+  .spinner-ring {
+    position: absolute;
+    inset: 0;
+    border: 2px solid var(--usage-border-subtle);
+    border-top-color: var(--usage-resource-workers, #f59e0b);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+  }
+
+  .spinner-ring--delayed {
+    inset: 4px;
+    border-top-color: var(--usage-resource-aiGateway, #06b6d4);
+    animation-delay: -0.4s;
+    animation-direction: reverse;
+  }
+
+  /* Responsive */
+  @media (max-width: 767px) {
+    .section-header {
+      padding: var(--usage-spacing-md);
+    }
+
+    .header-row {
+      flex-direction: column;
+      align-items: stretch;
+    }
+
+    .header-title {
+      text-align: center;
+    }
+
+    .primary-filters {
+      justify-content: center;
+    }
+
+    .stat-pills {
+      justify-content: center;
+    }
+
+    .header-actions {
+      justify-content: center;
+    }
+
+    .filter-toggles {
+      justify-content: center;
+    }
+
+    .auto-refresh {
+      justify-content: center;
+    }
+
+    .content-stack {
+      padding: var(--usage-spacing-md);
+    }
+  }
+
+  /* Dark mode - comprehensive overrides */
+  :global([data-theme='dark']) .daily-overview,
+  :global(.dark) .daily-overview {
+    background: #161b22;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .daily-overview:hover,
+  :global(.dark) .daily-overview:hover {
+    border-color: #484f58;
+    box-shadow: 0 4px 24px -8px rgba(0, 0, 0, 0.4);
+  }
+
+  :global([data-theme='dark']) .section-header,
+  :global(.dark) .section-header {
+    background: #161b22;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .section-title,
+  :global(.dark) .section-title {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .section-subtitle,
+  :global(.dark) .section-subtitle {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .header-row--stats,
+  :global(.dark) .header-row--stats {
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .header-row--tertiary,
+  :global(.dark) .header-row--tertiary {
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .stat-pill,
+  :global(.dark) .stat-pill {
+    background: #21262d;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .stat-pill .stat-label,
+  :global(.dark) .stat-pill .stat-label {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .stat-pill .stat-value,
+  :global(.dark) .stat-pill .stat-value {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .toggle-pill,
+  :global(.dark) .toggle-pill {
+    background: #21262d;
+    border-color: #30363d;
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .toggle-pill:hover,
+  :global(.dark) .toggle-pill:hover {
+    background: #262c36;
+    border-color: #484f58;
+  }
+
+  :global([data-theme='dark']) .action-button,
+  :global(.dark) .action-button {
+    background: #21262d;
+    border-color: #30363d;
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .action-button:hover,
+  :global(.dark) .action-button:hover {
+    background: #262c36;
+    border-color: #484f58;
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .action-button--primary,
+  :global(.dark) .action-button--primary {
+    background: #1f6feb;
+    border-color: #1f6feb;
+    color: #ffffff;
+  }
+
+  :global([data-theme='dark']) .action-button--primary:hover,
+  :global(.dark) .action-button--primary:hover {
+    background: #388bfd;
+    border-color: #388bfd;
+    color: #ffffff;
+  }
+
+  :global([data-theme='dark']) .auto-refresh,
+  :global(.dark) .auto-refresh {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .toggle-slider,
+  :global(.dark) .toggle-slider {
+    background-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .loading-indicator,
+  :global(.dark) .loading-indicator {
+    color: #8b949e;
+  }
+
+  :global([data-theme='dark']) .content-stack,
+  :global(.dark) .content-stack {
+    background: #161b22;
+  }
+
+  :global([data-theme='dark']) .chart-panel,
+  :global([data-theme='dark']) .table-panel,
+  :global(.dark) .chart-panel,
+  :global(.dark) .table-panel {
+    background: #21262d;
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .panel-header,
+  :global(.dark) .panel-header {
+    background: #161b22;
+    border-color: #21262d;
+  }
+
+  :global([data-theme='dark']) .panel-title,
+  :global(.dark) .panel-title {
+    color: #e6edf3;
+  }
+
+  :global([data-theme='dark']) .loading-overlay,
+  :global(.dark) .loading-overlay {
+    background: rgba(22, 27, 34, 0.95);
+  }
+
+  :global([data-theme='dark']) .spinner-ring,
+  :global(.dark) .spinner-ring {
+    border-color: #30363d;
+  }
+
+  :global([data-theme='dark']) .accent-bar,
+  :global(.dark) .accent-bar {
+    background: #21262d;
+  }
+</style>
+
+<script>
+  import {
+    $dateRangeDisplay,
+    $totalCost,
+    $averageDailyCost,
+    $isLoading,
+    $hasLegacyData,
+  } from '../state/usageStore';
+  import { syncFromURL, initSubscriptions } from '../state/usageActions';
+
+  // Subscribe to date range changes
+  const displayEl = document.getElementById('date-range-display');
+  if (displayEl) {
+    $dateRangeDisplay.subscribe((value) => {
+      displayEl.textContent = value ? `Showing: ${value}` : 'No data';
+    });
+  }
+
+  // Subscribe to total cost changes
+  const totalEl = document.getElementById('total-cost-display');
+  if (totalEl) {
+    $totalCost.subscribe((value) => {
+      totalEl.textContent = `$${value.toFixed(2)}`;
+    });
+  }
+
+  // Subscribe to average cost changes
+  const avgEl = document.getElementById('avg-cost-display');
+  if (avgEl) {
+    $averageDailyCost.subscribe((value) => {
+      avgEl.textContent = `$${value.toFixed(2)}`;
+    });
+  }
+
+  // Subscribe to loading state
+  const loadingEl = document.getElementById('loading-overlay');
+  const filterLoadingEl = document.getElementById('filter-loading');
+  if (loadingEl) {
+    $isLoading.subscribe((loading) => {
+      loadingEl.setAttribute('data-loading', String(loading));
+      loadingEl.setAttribute('aria-hidden', String(!loading));
+      if (filterLoadingEl) {
+        filterLoadingEl.style.display = loading ? 'flex' : 'none';
+      }
+    });
+  }
+
+  // Subscribe to legacy data warning
+  const legacyWarningEl = document.getElementById('legacy-data-warning');
+  if (legacyWarningEl) {
+    $hasLegacyData.subscribe((hasLegacy) => {
+      legacyWarningEl.style.display = hasLegacy ? 'flex' : 'none';
+    });
+  }
+
+  // Toggle buttons
+  const onlyChangedBtn = document.getElementById('toggle-only-changed');
+  const nonZeroCostBtn = document.getElementById('toggle-non-zero-cost');
+
+  function updateToggleUrl(onlyChanged: boolean, nonZeroCost: boolean) {
+    const url = new URL(window.location.href);
+    if (onlyChanged) {
+      url.searchParams.set('onlyChanged', '1');
+    } else {
+      url.searchParams.delete('onlyChanged');
+    }
+    if (nonZeroCost) {
+      url.searchParams.set('nonZeroCost', '1');
+    } else {
+      url.searchParams.delete('nonZeroCost');
+    }
+    window.history.pushState({}, '', url);
+
+    // Dispatch event for filter change
+    document.dispatchEvent(
+      new CustomEvent('filter-toggle-change', {
+        detail: { onlyChanged, nonZeroCost },
+      })
+    );
+  }
+
+  if (onlyChangedBtn) {
+    onlyChangedBtn.addEventListener('click', () => {
+      const isActive = onlyChangedBtn.getAttribute('aria-pressed') === 'true';
+      onlyChangedBtn.setAttribute('aria-pressed', String(!isActive));
+      const nonZeroActive = nonZeroCostBtn?.getAttribute('aria-pressed') === 'true';
+      updateToggleUrl(!isActive, nonZeroActive || false);
+    });
+  }
+
+  if (nonZeroCostBtn) {
+    nonZeroCostBtn.addEventListener('click', () => {
+      const isActive = nonZeroCostBtn.getAttribute('aria-pressed') === 'true';
+      nonZeroCostBtn.setAttribute('aria-pressed', String(!isActive));
+      const onlyChangedActive = onlyChangedBtn?.getAttribute('aria-pressed') === 'true';
+      updateToggleUrl(onlyChangedActive || false, !isActive);
+    });
+  }
+
+  // Sync store from URL and initialise subscriptions
+  syncFromURL();
+  initSubscriptions();
+</script>