@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

package/templates/shared/dashboard/src/components/usage/FilterBar.astro

@@ -0,0 +1,190 @@
+---
+/**
+ * FilterBar Component
+ *
+ * Unified filter bar for the Usage Dashboard. Composes micro-components
+ * that each subscribe to nanostores independently. Layout container only.
+ *
+ * Part of task-21: Usage Dashboard Refactor Phase 3 - Integrated Filter Bar
+ *
+ * @example
+ * ```astro
+ * <FilterBar
+ *   initialPeriod={period}
+ *   initialProject={project}
+ *   initialStartDate={startDate}
+ *   initialEndDate={endDate}
+ * />
+ * ```
+ */
+
+import PeriodButtons from './filters/PeriodButtons.astro';
+import InlineDateRange from './filters/InlineDateRange.astro';
+import ProjectSelect from './filters/ProjectSelect.astro';
+
+interface Props {
+  /** Initial period from URL query params */
+  initialPeriod?: string;
+  /** Initial project from URL query params */
+  initialProject?: string;
+  /** Initial custom start date (YYYY-MM-DD) */
+  initialStartDate?: string;
+  /** Initial custom end date (YYYY-MM-DD) */
+  initialEndDate?: string;
+}
+
+const {
+  initialPeriod = '30d',
+  initialProject = 'all',
+  initialStartDate = '',
+  initialEndDate = '',
+} = Astro.props;
+---
+
+<div class="filter-bar" data-component="filter-bar">
+  <div class="filter-bar-primary">
+    <PeriodButtons initialPeriod={initialPeriod} />
+    <InlineDateRange initialStart={initialStartDate} initialEnd={initialEndDate} maxDays={90} />
+    <ProjectSelect initialProject={initialProject} />
+  </div>
+
+  <!-- Loading indicator (shown during data fetch) -->
+  <div class="filter-bar-status">
+    <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>
+</div>
+
+<style>
+  .filter-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75rem 1rem;
+    background-color: var(--usage-bg-secondary);
+    border: 1px solid var(--usage-border-primary);
+    border-radius: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .filter-bar-primary {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+  }
+
+  .filter-bar-status {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+  }
+
+  .loading-indicator {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    font-size: 0.75rem;
+    color: var(--usage-text-secondary);
+    animation: fadeIn 0.2s ease;
+  }
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  .spinner {
+    animation: spin 0.8s linear infinite;
+    color: var(--usage-accent-primary);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .loading-text {
+    font-weight: 500;
+  }
+
+  /* Responsive: stack vertically on mobile */
+  @media (max-width: 768px) {
+    .filter-bar {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.75rem;
+      padding: 0.5rem 0.75rem;
+    }
+
+    .filter-bar-primary {
+      flex-direction: column;
+      align-items: stretch;
+      gap: 0.75rem;
+    }
+
+    .filter-bar-status {
+      justify-content: center;
+    }
+  }
+
+  /* Tablet: partial wrap */
+  @media (min-width: 769px) and (max-width: 1024px) {
+    .filter-bar-primary {
+      gap: 0.75rem;
+    }
+  }
+</style>
+
+<script>
+  import { $isLoading } from './state/usageStore';
+  import { syncFromURL, initSubscriptions } from './state/usageActions';
+
+  function initFilterBar(): void {
+    const container = document.querySelector('[data-component="filter-bar"]');
+    if (!container) return;
+
+    const loadingIndicator = container.querySelector<HTMLElement>('#filter-loading');
+
+    // Show/hide loading indicator
+    if (loadingIndicator) {
+      $isLoading.subscribe((isLoading) => {
+        loadingIndicator.style.display = isLoading ? 'flex' : 'none';
+      });
+    }
+
+    // Sync store from URL and initialise subscriptions
+    syncFromURL();
+    initSubscriptions();
+  }
+
+  // Initialize on DOM ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initFilterBar);
+  } else {
+    initFilterBar();
+  }
+
+  // Re-initialize on Astro page transitions
+  document.addEventListener('astro:page-load', initFilterBar);
+</script>

package/templates/shared/dashboard/src/components/usage/FilterToggles.astro

@@ -0,0 +1,175 @@
+---
+/**
+ * FilterToggles Component (task-17.13)
+ *
+ * Quick filter toggles for common use cases.
+ * - "Only changed" - Show resources with significant changes
+ * - "Non-zero cost only" - Hide zero-cost resources
+ */
+
+export interface Props {
+  onlyChanged?: boolean;
+  nonZeroCost?: boolean;
+}
+
+const { onlyChanged = false, nonZeroCost = false } = Astro.props;
+---
+
+<div class="filter-toggles" data-component="filter-toggles">
+  <button
+    type="button"
+    class:list={['toggle-button', onlyChanged && 'active']}
+    id="toggle-only-changed"
+    aria-pressed={onlyChanged}
+    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:list={['toggle-button', nonZeroCost && 'active']}
+    id="toggle-non-zero-cost"
+    aria-pressed={nonZeroCost}
+    title="Hide resources with zero cost"
+  >
+    <span class="toggle-icon">$</span>
+    <span class="toggle-label">Non-zero Cost</span>
+  </button>
+</div>
+
+<style>
+  .filter-toggles {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .toggle-button {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    border: 1px solid #d1d5db;
+    border-radius: 9999px;
+    background-color: white;
+    color: #6b7280;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  :global(.dark) .toggle-button {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #9ca3af;
+  }
+
+  .toggle-button:hover {
+    border-color: #9ca3af;
+    background-color: #f9fafb;
+  }
+
+  :global(.dark) .toggle-button:hover {
+    border-color: #4b5563;
+    background-color: #111827;
+  }
+
+  .toggle-button.active {
+    border-color: #3b82f6;
+    background-color: #eff6ff;
+    color: #1d4ed8;
+  }
+
+  :global(.dark) .toggle-button.active {
+    border-color: #3b82f6;
+    background-color: #1e3a8a40;
+    color: #93c5fd;
+  }
+
+  .toggle-button:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
+  }
+
+  .toggle-icon {
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+
+  .toggle-label {
+    font-weight: 500;
+  }
+
+  @media (max-width: 480px) {
+    .filter-toggles {
+      width: 100%;
+    }
+
+    .toggle-button {
+      flex: 1;
+      justify-content: center;
+      min-width: 120px;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('[data-component="filter-toggles"]');
+    if (!container) return;
+
+    const onlyChangedBtn = container.querySelector('#toggle-only-changed') as HTMLButtonElement;
+    const nonZeroCostBtn = container.querySelector('#toggle-non-zero-cost') as HTMLButtonElement;
+
+    function updateUrl(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');
+      }
+
+      // Update URL without reload
+      window.history.pushState({}, '', url);
+
+      // Dispatch custom event for parent to handle
+      const event = new CustomEvent('filter-toggle-change', {
+        bubbles: true,
+        detail: { onlyChanged, nonZeroCost },
+      });
+      container.dispatchEvent(event);
+    }
+
+    function getState() {
+      return {
+        onlyChanged: onlyChangedBtn.classList.contains('active'),
+        nonZeroCost: nonZeroCostBtn.classList.contains('active'),
+      };
+    }
+
+    onlyChangedBtn.addEventListener('click', () => {
+      const isActive = onlyChangedBtn.classList.toggle('active');
+      onlyChangedBtn.setAttribute('aria-pressed', String(isActive));
+      const state = getState();
+      updateUrl(state.onlyChanged, state.nonZeroCost);
+    });
+
+    nonZeroCostBtn.addEventListener('click', () => {
+      const isActive = nonZeroCostBtn.classList.toggle('active');
+      nonZeroCostBtn.setAttribute('aria-pressed', String(isActive));
+      const state = getState();
+      updateUrl(state.onlyChanged, state.nonZeroCost);
+    });
+  });
+</script>