@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

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

@@ -0,0 +1,272 @@
+---
+/**
+ * ProjectCardsGrid Component
+ *
+ * Grid layout for project cards showing:
+ * - Scout
+ * - Brand Copilot
+ * - Australian History MCP (semantic-librarian)
+ * - Platform (shared infrastructure)
+ *
+ * Each card displays MTD cost, utilization, traffic light status, and sparkline.
+ */
+
+import ProjectCard from './ProjectCard.astro';
+import {
+  PROJECT_ALLOWANCES,
+  CF_ALLOWANCES,
+  type ServiceType,
+} from '../../lib/usage/allowance-config';
+
+// Build project configurations from allowance-config.ts
+const projects = PROJECT_ALLOWANCES.map((p) => {
+  const primaryResourceLabel =
+    CF_ALLOWANCES[p.primaryResource as ServiceType]?.name?.split(' ')[0] ?? p.primaryResource;
+  return {
+    projectId: p.projectId,
+    projectName: p.projectName,
+    primaryResource: primaryResourceLabel,
+  };
+});
+---
+
+<section class="project-cards-section" role="region" aria-label="Project usage overview">
+  <div class="section-header">
+    <h2 class="section-title">Project Overview</h2>
+    <div class="section-actions">
+      <button
+        type="button"
+        id="refresh-projects-btn"
+        class="refresh-btn"
+        title="Refresh project data"
+      >
+        <span class="refresh-icon">↻</span>
+        <span class="refresh-text">Refresh</span>
+      </button>
+    </div>
+  </div>
+
+  <div class="project-cards-grid" id="project-cards-grid">
+    {
+      projects.map((project) => (
+        <ProjectCard
+          projectId={project.projectId}
+          projectName={project.projectName}
+          primaryResource={project.primaryResource}
+        />
+      ))
+    }
+  </div>
+
+  <!-- Loading overlay -->
+  <div id="projects-loading" class="projects-loading" style="display: none;">
+    <div class="loading-spinner"></div>
+    <span class="loading-text">Loading project data...</span>
+  </div>
+</section>
+
+<style>
+  .project-cards-section {
+    margin-bottom: 2rem;
+    position: relative;
+  }
+
+  .section-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+
+  .section-title {
+    font-size: 1.125rem;
+    font-weight: 600;
+    color: var(--usage-text-primary);
+    margin: 0;
+  }
+
+  .section-actions {
+    display: flex;
+    gap: 0.5rem;
+  }
+
+  .refresh-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    background: var(--usage-bg-tertiary);
+    border: 1px solid var(--usage-border-default);
+    border-radius: var(--usage-radius-md);
+    color: var(--usage-text-secondary);
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all var(--usage-transition-fast);
+  }
+
+  .refresh-btn:hover {
+    background: var(--usage-bg-hover);
+    border-color: var(--usage-border-hover);
+    color: var(--usage-text-primary);
+  }
+
+  .refresh-btn:active {
+    transform: scale(0.98);
+  }
+
+  .refresh-btn.loading .refresh-icon {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .refresh-icon {
+    font-size: 0.875rem;
+  }
+
+  .project-cards-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+
+  /* Loading overlay */
+  .projects-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--usage-bg-primary);
+    opacity: 0.9;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    border-radius: var(--usage-radius-xl);
+    z-index: 10;
+  }
+
+  .loading-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid var(--usage-border-default);
+    border-top-color: var(--usage-accent-blue);
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  .loading-text {
+    font-size: 0.875rem;
+    color: var(--usage-text-secondary);
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .project-cards-grid {
+      grid-template-columns: 1fr;
+      gap: 1rem;
+    }
+
+    .section-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 0.75rem;
+    }
+  }
+</style>
+
+<script>
+  /**
+   * ProjectCardsGrid JavaScript
+   *
+   * Handles refresh button and coordinates project card updates.
+   */
+
+  // Initialize refresh button
+  function initRefreshButton() {
+    const refreshBtn = document.getElementById('refresh-projects-btn');
+    if (!refreshBtn) return;
+
+    refreshBtn.addEventListener('click', async () => {
+      refreshBtn.classList.add('loading');
+
+      // Dispatch event for parent to handle
+      window.dispatchEvent(new CustomEvent('usage:refresh-projects'));
+
+      // Remove loading state after a delay (actual loading handled by parent)
+      setTimeout(() => {
+        refreshBtn.classList.remove('loading');
+      }, 1000);
+    });
+  }
+
+  // Show/hide loading overlay
+  window.setProjectsLoading = function (loading: boolean) {
+    const overlay = document.getElementById('projects-loading');
+    if (overlay) {
+      overlay.style.display = loading ? 'flex' : 'none';
+    }
+  };
+
+  // Update all project cards from API data
+  window.updateAllProjectCards = function (
+    projects: Array<{
+      projectId: string;
+      projectName: string;
+      primaryResource: string;
+      mtdCost: number;
+      costDeltaPct?: number;
+      utilizationPct: number;
+      utilizationCurrent: number;
+      utilizationLimit: number;
+      utilizationUnit: string;
+      status: 'green' | 'yellow' | 'red';
+      sparklineData: number[];
+      circuitBreakerStatus: 'active' | 'tripped' | 'degraded';
+      circuitBreakerLabel: string;
+    }>
+  ) {
+    for (const project of projects) {
+      if (window.updateProjectCard) {
+        window.updateProjectCard(project);
+      }
+    }
+  };
+
+  // Type declarations
+  declare global {
+    interface Window {
+      setProjectsLoading: (loading: boolean) => void;
+      updateAllProjectCards: (
+        projects: Array<{
+          projectId: string;
+          projectName: string;
+          primaryResource: string;
+          mtdCost: number;
+          costDeltaPct?: number;
+          utilizationPct: number;
+          utilizationCurrent: number;
+          utilizationLimit: number;
+          utilizationUnit: string;
+          status: 'green' | 'yellow' | 'red';
+          sparklineData: number[];
+          circuitBreakerStatus: 'active' | 'tripped' | 'degraded';
+          circuitBreakerLabel: string;
+        }>
+      ) => void;
+    }
+  }
+
+  // Initialize on DOM ready
+  document.addEventListener('DOMContentLoaded', initRefreshButton);
+</script>

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

@@ -0,0 +1,279 @@
+---
+/**
+ * ResourceSearch Component (task-17.14)
+ *
+ * Search input to filter resources by name.
+ * Features debounced filtering, case-insensitive matching.
+ */
+
+export interface Props {
+  initialQuery?: string;
+  placeholder?: string;
+}
+
+const { initialQuery = '', placeholder = 'Search resources...' } = Astro.props;
+---
+
+<div class="resource-search" data-component="resource-search">
+  <div class="search-input-wrapper">
+    <span class="search-icon" aria-hidden="true">
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+        <path
+          d="M14 14L11.1 11.1"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+      </svg>
+    </span>
+    <input
+      type="text"
+      id="resource-search-input"
+      class="search-input"
+      placeholder={placeholder}
+      value={initialQuery}
+      autocomplete="off"
+      spellcheck="false"
+      aria-label="Search resources"
+    />
+    <button
+      type="button"
+      id="search-clear-button"
+      class="clear-button"
+      style={initialQuery ? '' : 'display: none;'}
+      aria-label="Clear search"
+    >
+      <svg
+        width="14"
+        height="14"
+        viewBox="0 0 14 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M10.5 3.5L3.5 10.5M3.5 3.5L10.5 10.5"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"></path>
+      </svg>
+    </button>
+  </div>
+  <div class="keyboard-hint" title="Press ⌘F or Ctrl+F to focus search">
+    <kbd>⌘F</kbd>
+  </div>
+</div>
+
+<style>
+  .resource-search {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .search-input-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1;
+    max-width: 300px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.75rem;
+    color: #9ca3af;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.5rem 2rem 0.5rem 2.25rem;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    background-color: white;
+    color: #374151;
+    font-size: 0.875rem;
+    transition: all 0.15s ease;
+  }
+
+  :global(.dark) .search-input {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f9fafb;
+  }
+
+  .search-input::placeholder {
+    color: #9ca3af;
+  }
+
+  .search-input:hover {
+    border-color: #9ca3af;
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  }
+
+  .clear-button {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background-color: #e5e7eb;
+    color: #6b7280;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 0.15s ease;
+  }
+
+  :global(.dark) .clear-button {
+    background-color: #374151;
+    color: #9ca3af;
+  }
+
+  .clear-button:hover {
+    background-color: #d1d5db;
+    color: #374151;
+  }
+
+  :global(.dark) .clear-button:hover {
+    background-color: #4b5563;
+    color: #f9fafb;
+  }
+
+  .keyboard-hint {
+    display: none;
+    align-items: center;
+    gap: 0.25rem;
+    color: #9ca3af;
+    font-size: 0.625rem;
+  }
+
+  @media (min-width: 768px) {
+    .keyboard-hint {
+      display: flex;
+    }
+  }
+
+  kbd {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.125rem 0.375rem;
+    background-color: #f3f4f6;
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    font-family: inherit;
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: #6b7280;
+  }
+
+  :global(.dark) kbd {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #9ca3af;
+  }
+
+  @media (max-width: 640px) {
+    .resource-search {
+      width: 100%;
+    }
+
+    .search-input-wrapper {
+      max-width: none;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const container = document.querySelector('[data-component="resource-search"]');
+    if (!container) return;
+
+    const input = container.querySelector('#resource-search-input') as HTMLInputElement;
+    const clearButton = container.querySelector('#search-clear-button') as HTMLButtonElement;
+
+    let debounceTimer: ReturnType<typeof setTimeout>;
+
+    // Debounced search handler
+    function handleSearch(query: string) {
+      // Update URL
+      const url = new URL(window.location.href);
+      if (query) {
+        url.searchParams.set('search', query);
+      } else {
+        url.searchParams.delete('search');
+      }
+      window.history.pushState({}, '', url);
+
+      // Dispatch custom event for parent to handle
+      const event = new CustomEvent('resource-search', {
+        bubbles: true,
+        detail: { query },
+      });
+      container.dispatchEvent(event);
+    }
+
+    // Input handler with debounce
+    input.addEventListener('input', () => {
+      const query = input.value.trim();
+
+      // Show/hide clear button
+      clearButton.style.display = query ? 'flex' : 'none';
+
+      // Debounce the search
+      clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(() => handleSearch(query), 300);
+    });
+
+    // Clear button handler
+    clearButton.addEventListener('click', () => {
+      input.value = '';
+      clearButton.style.display = 'none';
+      handleSearch('');
+      input.focus();
+    });
+
+    // Keyboard shortcut: Cmd/Ctrl+F focuses search
+    document.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
+        // Only prevent default if we're not in an input/textarea
+        const target = e.target as HTMLElement;
+        if (target.tagName !== 'INPUT' && target.tagName !== 'TEXTAREA') {
+          e.preventDefault();
+          input.focus();
+          input.select();
+        }
+      }
+
+      // Escape clears search when focused
+      if (e.key === 'Escape' && document.activeElement === input) {
+        input.value = '';
+        clearButton.style.display = 'none';
+        handleSearch('');
+        input.blur();
+      }
+    });
+  });
+</script>