@littlebearapps/platform-admin-sdk 2.0.0 → 2.2.0

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

@@ -0,0 +1,651 @@
+---
+/**
+ * ComparisonModeSelector Component (task-17.10, enhanced in task-17.18)
+ *
+ * Dropdown to select comparison mode for historical views.
+ * Options: Previous Period, Same Period Last Month, Custom Range.
+ *
+ * Task-17.18 Enhancements:
+ * - Date range presets (Last 7d, 30d, 90d, This month, Last month)
+ * - Inline validation feedback (no alerts)
+ * - Improved mobile styling
+ */
+
+import type { CompareMode } from './types';
+
+export interface Props {
+  currentMode: CompareMode;
+  currentPeriod: string;
+  customStartDate?: string;
+  customEndDate?: string;
+}
+
+const {
+  currentMode = 'none',
+  currentPeriod = '30d',
+  customStartDate = '',
+  customEndDate = '',
+} = Astro.props;
+
+// Mode labels
+const modeLabels: Record<CompareMode, string> = {
+  none: 'No Comparison',
+  lastMonth: 'vs Same Period Last Month',
+  custom: 'Custom Date Range',
+};
+
+// Mode descriptions
+const modeDescriptions: Record<CompareMode, string> = {
+  none: 'Show current period only',
+  lastMonth: 'Compare with the same period from last month',
+  custom: 'Select a custom date range to compare',
+};
+
+// Date presets for quick selection
+const datePresets = [
+  { id: 'last7d', label: 'Last 7d', days: 7 },
+  { id: 'last30d', label: 'Last 30d', days: 30 },
+  { id: 'last90d', label: 'Last 90d', days: 90 },
+  { id: 'thisMonth', label: 'This month', days: 0 }, // Special handling
+  { id: 'lastMonth', label: 'Last month', days: -1 }, // Special handling
+];
+---
+
+<div class="comparison-mode-selector" data-component="comparison-mode-selector">
+  <div class="selector-group">
+    <label for="compare-mode" class="selector-label">Compare</label>
+    <div class="select-wrapper">
+      <select
+        id="compare-mode"
+        name="compare"
+        class="selector-select"
+        aria-describedby="compare-mode-desc"
+      >
+        {
+          Object.entries(modeLabels).map(([mode, label]) => (
+            <option value={mode} selected={mode === currentMode}>
+              {label}
+            </option>
+          ))
+        }
+      </select>
+      <span class="select-icon" aria-hidden="true">
+        <svg
+          width="12"
+          height="12"
+          viewBox="0 0 12 12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3 4.5L6 7.5L9 4.5"
+            stroke="currentColor"
+            stroke-width="1.5"
+            stroke-linecap="round"
+            stroke-linejoin="round"></path>
+        </svg>
+      </span>
+    </div>
+  </div>
+
+  <!-- Custom date range inputs (hidden by default) -->
+  <div
+    id="custom-date-range"
+    class="custom-date-range"
+    style={currentMode !== 'custom' ? 'display: none;' : ''}
+  >
+    <!-- Date Range Presets (Task-17.18) -->
+    <div class="date-presets">
+      <span class="presets-label">Quick:</span>
+      <div class="presets-buttons">
+        {
+          datePresets.map((preset) => (
+            <button
+              type="button"
+              class="preset-button"
+              data-preset={preset.id}
+              data-days={preset.days}
+            >
+              {preset.label}
+            </button>
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="date-inputs-row">
+      <div class="date-input-group">
+        <label for="custom-start-date" class="date-label">From</label>
+        <input
+          type="date"
+          id="custom-start-date"
+          name="startDate"
+          class="date-input"
+          value={customStartDate}
+          max={new Date().toISOString().split('T')[0]}
+        />
+      </div>
+      <div class="date-input-group">
+        <label for="custom-end-date" class="date-label">To</label>
+        <input
+          type="date"
+          id="custom-end-date"
+          name="endDate"
+          class="date-input"
+          value={customEndDate}
+          max={new Date().toISOString().split('T')[0]}
+        />
+      </div>
+      <button type="button" id="apply-custom-range" class="apply-button"> Apply </button>
+    </div>
+
+    <!-- Validation feedback (Task-17.18) -->
+    <div id="date-validation-feedback" class="validation-feedback" role="alert" aria-live="polite">
+    </div>
+  </div>
+
+  <p id="compare-mode-desc" class="selector-description">
+    {modeDescriptions[currentMode]}
+  </p>
+</div>
+
+<style>
+  .comparison-mode-selector {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .selector-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .selector-label {
+    font-size: 0.75rem;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.dark) .selector-label {
+    color: #9ca3af;
+  }
+
+  .select-wrapper {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .selector-select {
+    appearance: none;
+    background-color: white;
+    border: 1px solid #d1d5db;
+    border-radius: 0.375rem;
+    padding: 0.5rem 2rem 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    color: #374151;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    min-width: 200px;
+  }
+
+  :global(.dark) .selector-select {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f9fafb;
+  }
+
+  .selector-select:hover {
+    border-color: #9ca3af;
+  }
+
+  .selector-select:focus {
+    outline: none;
+    border-color: #3b82f6;
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+  }
+
+  .select-icon {
+    position: absolute;
+    right: 0.75rem;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: #6b7280;
+  }
+
+  .custom-date-range {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    background-color: #f9fafb;
+    border-radius: 0.375rem;
+    margin-top: 0.25rem;
+  }
+
+  :global(.dark) .custom-date-range {
+    background-color: #111827;
+  }
+
+  /* Date Presets (Task-17.18) */
+  .date-presets {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+  }
+
+  .presets-label {
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.dark) .presets-label {
+    color: #9ca3af;
+  }
+
+  .presets-buttons {
+    display: flex;
+    gap: 0.25rem;
+    flex-wrap: wrap;
+  }
+
+  .preset-button {
+    padding: 0.25rem 0.5rem;
+    background-color: white;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.25rem;
+    font-size: 0.6875rem;
+    color: #6b7280;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .preset-button:hover {
+    background-color: #f3f4f6;
+    border-color: #d1d5db;
+    color: #374151;
+  }
+
+  .preset-button:active,
+  .preset-button.active {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    color: white;
+  }
+
+  :global(.dark) .preset-button {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #9ca3af;
+  }
+
+  :global(.dark) .preset-button:hover {
+    background-color: #374151;
+    color: #f9fafb;
+  }
+
+  :global(.dark) .preset-button:active,
+  :global(.dark) .preset-button.active {
+    background-color: #3b82f6;
+    border-color: #3b82f6;
+    color: white;
+  }
+
+  /* Date Inputs Row */
+  .date-inputs-row {
+    display: flex;
+    align-items: flex-end;
+    gap: 0.75rem;
+  }
+
+  .date-input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .date-label {
+    font-size: 0.625rem;
+    font-weight: 500;
+    color: #6b7280;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  :global(.dark) .date-label {
+    color: #9ca3af;
+  }
+
+  .date-input {
+    appearance: none;
+    background-color: white;
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.5rem;
+    font-size: 0.75rem;
+    color: #374151;
+    min-width: 130px;
+  }
+
+  .date-input.invalid {
+    border-color: #ef4444;
+  }
+
+  :global(.dark) .date-input {
+    background-color: #1f2937;
+    border-color: #374151;
+    color: #f9fafb;
+  }
+
+  .date-input:focus {
+    outline: none;
+    border-color: #3b82f6;
+  }
+
+  .apply-button {
+    padding: 0.375rem 0.75rem;
+    background-color: #3b82f6;
+    color: white;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.75rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    white-space: nowrap;
+  }
+
+  .apply-button:hover {
+    background-color: #2563eb;
+  }
+
+  .apply-button:active {
+    background-color: #1d4ed8;
+  }
+
+  .apply-button:disabled {
+    background-color: #9ca3af;
+    cursor: not-allowed;
+  }
+
+  /* Validation Feedback (Task-17.18) */
+  .validation-feedback {
+    font-size: 0.6875rem;
+    padding: 0.375rem 0.5rem;
+    border-radius: 0.25rem;
+    display: none;
+  }
+
+  .validation-feedback.error {
+    display: block;
+    background-color: #fef2f2;
+    color: #b91c1c;
+    border: 1px solid #fecaca;
+  }
+
+  .validation-feedback.info {
+    display: block;
+    background-color: #eff6ff;
+    color: #1d4ed8;
+    border: 1px solid #bfdbfe;
+  }
+
+  :global(.dark) .validation-feedback.error {
+    background-color: #450a0a;
+    color: #fca5a5;
+    border-color: #7f1d1d;
+  }
+
+  :global(.dark) .validation-feedback.info {
+    background-color: #172554;
+    color: #93c5fd;
+    border-color: #1e40af;
+  }
+
+  .selector-description {
+    font-size: 0.625rem;
+    color: #9ca3af;
+    margin: 0;
+  }
+
+  /* Mobile responsive (Task-17.18 enhanced) */
+  @media (max-width: 640px) {
+    .comparison-mode-selector {
+      width: 100%;
+    }
+
+    .selector-select {
+      width: 100%;
+      min-width: unset;
+    }
+
+    .date-presets {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .presets-buttons {
+      width: 100%;
+    }
+
+    .preset-button {
+      flex: 1;
+      text-align: center;
+      padding: 0.5rem 0.25rem;
+    }
+
+    .date-inputs-row {
+      flex-wrap: wrap;
+    }
+
+    .date-input-group {
+      flex: 1;
+      min-width: 45%;
+    }
+
+    .date-input {
+      width: 100%;
+      min-width: unset;
+    }
+
+    .apply-button {
+      width: 100%;
+      margin-top: 0.5rem;
+      padding: 0.5rem;
+    }
+  }
+</style>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const selector = document.querySelector('[data-component="comparison-mode-selector"]');
+    if (!selector) return;
+
+    const modeSelect = selector.querySelector('#compare-mode') as HTMLSelectElement;
+    const customRange = selector.querySelector('#custom-date-range') as HTMLElement;
+    const startDateInput = selector.querySelector('#custom-start-date') as HTMLInputElement;
+    const endDateInput = selector.querySelector('#custom-end-date') as HTMLInputElement;
+    const applyButton = selector.querySelector('#apply-custom-range') as HTMLButtonElement;
+    const description = selector.querySelector('.selector-description') as HTMLElement;
+    const validationFeedback = selector.querySelector('#date-validation-feedback') as HTMLElement;
+    const presetButtons = selector.querySelectorAll('.preset-button');
+
+    const descriptions: Record<string, string> = {
+      none: 'Show current period only',
+      lastMonth: 'Compare with the same period from last month',
+      custom: 'Select a custom date range to compare',
+    };
+
+    // Helper: Format date as YYYY-MM-DD
+    function formatDate(date: Date): string {
+      return date.toISOString().split('T')[0];
+    }
+
+    // Helper: Show validation feedback
+    function showFeedback(message: string, type: 'error' | 'info') {
+      validationFeedback.textContent = message;
+      validationFeedback.className = 'validation-feedback ' + type;
+    }
+
+    // Helper: Hide validation feedback
+    function hideFeedback() {
+      validationFeedback.textContent = '';
+      validationFeedback.className = 'validation-feedback';
+    }
+
+    // Helper: Validate date range
+    function validateDateRange(): { valid: boolean; error?: string; days?: number } {
+      const startDate = startDateInput.value;
+      const endDate = endDateInput.value;
+
+      if (!startDate || !endDate) {
+        return { valid: false, error: 'Please select both start and end dates' };
+      }
+
+      const start = new Date(startDate);
+      const end = new Date(endDate);
+
+      if (start > end) {
+        startDateInput.classList.add('invalid');
+        return { valid: false, error: 'Start date must be before end date' };
+      }
+
+      const diffDays = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
+
+      if (diffDays > 90) {
+        return {
+          valid: false,
+          error: 'Maximum date range is 90 days. Selected: ' + diffDays + ' days',
+        };
+      }
+
+      startDateInput.classList.remove('invalid');
+      endDateInput.classList.remove('invalid');
+      return { valid: true, days: diffDays };
+    }
+
+    // Handle mode change
+    modeSelect.addEventListener('change', () => {
+      const mode = modeSelect.value;
+
+      // Toggle custom date range visibility
+      if (mode === 'custom') {
+        customRange.style.display = 'flex';
+        hideFeedback();
+      } else {
+        customRange.style.display = 'none';
+        // Update URL and trigger fetch for non-custom modes
+        updateUrlAndFetch(mode);
+      }
+
+      // Update description
+      description.textContent = descriptions[mode] || '';
+    });
+
+    // Handle preset button clicks (Task-17.18)
+    presetButtons.forEach((button) => {
+      button.addEventListener('click', () => {
+        const presetId = button.getAttribute('data-preset');
+        const days = parseInt(button.getAttribute('data-days') || '0', 10);
+        const today = new Date();
+        let startDate: Date;
+        let endDate: Date;
+
+        // Clear active state from all buttons
+        presetButtons.forEach((btn) => btn.classList.remove('active'));
+        button.classList.add('active');
+
+        if (presetId === 'thisMonth') {
+          // This month: 1st of current month to today
+          startDate = new Date(today.getFullYear(), today.getMonth(), 1);
+          endDate = today;
+        } else if (presetId === 'lastMonth') {
+          // Last month: 1st to last day of previous month
+          startDate = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+          endDate = new Date(today.getFullYear(), today.getMonth(), 0);
+        } else {
+          // Last N days
+          endDate = today;
+          startDate = new Date(today);
+          startDate.setDate(startDate.getDate() - days);
+        }
+
+        startDateInput.value = formatDate(startDate);
+        endDateInput.value = formatDate(endDate);
+
+        // Validate and show info
+        const validation = validateDateRange();
+        if (validation.valid) {
+          showFeedback('Selected ' + validation.days + ' days', 'info');
+        }
+      });
+    });
+
+    // Real-time validation on date change (Task-17.18)
+    function handleDateChange() {
+      const validation = validateDateRange();
+      if (startDateInput.value && endDateInput.value) {
+        if (!validation.valid && validation.error) {
+          showFeedback(validation.error, 'error');
+          applyButton.disabled = true;
+        } else {
+          showFeedback('Selected ' + validation.days + ' days', 'info');
+          applyButton.disabled = false;
+        }
+      } else {
+        hideFeedback();
+        applyButton.disabled = false;
+      }
+    }
+
+    startDateInput.addEventListener('change', handleDateChange);
+    endDateInput.addEventListener('change', handleDateChange);
+
+    // Handle apply button click
+    applyButton.addEventListener('click', () => {
+      const validation = validateDateRange();
+
+      if (!validation.valid) {
+        if (validation.error) {
+          showFeedback(validation.error, 'error');
+        }
+        return;
+      }
+
+      hideFeedback();
+      updateUrlAndFetch('custom', startDateInput.value, endDateInput.value);
+    });
+
+    function updateUrlAndFetch(mode: string, startDate?: string, endDate?: string) {
+      const url = new URL(window.location.href);
+      url.searchParams.set('compare', mode);
+
+      if (mode === 'custom' && startDate && endDate) {
+        url.searchParams.set('startDate', startDate);
+        url.searchParams.set('endDate', endDate);
+      } else {
+        url.searchParams.delete('startDate');
+        url.searchParams.delete('endDate');
+      }
+
+      // Update URL without reload
+      window.history.pushState({}, '', url);
+
+      // Dispatch custom event for parent to handle
+      const event = new CustomEvent('compare-mode-change', {
+        bubbles: true,
+        detail: { mode, startDate, endDate },
+      });
+      selector.dispatchEvent(event);
+    }
+  });
+</script>