@littlebearapps/platform-admin-sdk 2.1.0 → 2.2.0

package/templates/shared/dashboard/src/components/ErrorBoundary.astro

@@ -0,0 +1,79 @@
+---
+/**
+ * ErrorBoundary.astro
+ * Error state component with message and retry action
+ * Use for failed data fetches or component errors
+ */
+
+interface Props {
+  title?: string;
+  message?: string;
+  retryLabel?: string;
+  compact?: boolean;
+}
+
+const {
+  title = 'Something went wrong',
+  message = 'We encountered an error loading this content. Please try again.',
+  retryLabel = 'Try again',
+  compact = false,
+} = Astro.props;
+---
+
+<div
+  class={`flex flex-col items-center justify-center text-center bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg ${compact ? 'p-4' : 'p-8'}`}
+  role="alert"
+>
+  {/* Error Icon */}
+  <div class={`text-red-500 dark:text-red-400 ${compact ? 'mb-2' : 'mb-4'}`}>
+    <svg
+      class={`${compact ? 'w-8 h-8' : 'w-12 h-12'}`}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+      ></path>
+    </svg>
+  </div>
+
+  {/* Title */}
+  <h3
+    class={`font-semibold text-red-800 dark:text-red-200 ${compact ? 'text-base mb-1' : 'text-lg mb-2'}`}
+  >
+    {title}
+  </h3>
+
+  {/* Message */}
+  <p
+    class={`text-red-600 dark:text-red-300 max-w-md ${compact ? 'text-sm mb-3' : 'text-base mb-6'}`}
+  >
+    {message}
+  </p>
+
+  {/* Retry Button */}
+  <button
+    type="button"
+    class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-600 rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 min-h-[44px]"
+    data-error-retry
+  >
+    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+      ></path>
+    </svg>
+    {retryLabel}
+  </button>
+
+  {/* Additional Actions Slot */}
+  <div class="mt-4">
+    <slot name="actions" />
+  </div>
+</div>

package/templates/shared/dashboard/src/components/LoadingSkeleton.astro

@@ -0,0 +1,105 @@
+---
+/**
+ * LoadingSkeleton.astro
+ * Skeleton loading placeholders for tables, cards, and forms
+ * Uses Tailwind's animate-pulse for shimmer effect
+ */
+
+interface Props {
+  variant?: 'table' | 'card' | 'form' | 'text' | 'metric';
+  rows?: number;
+  columns?: number;
+}
+
+const { variant = 'text', rows = 3, columns = 4 } = Astro.props;
+---
+
+{
+  variant === 'text' && (
+    <div class="animate-pulse space-y-3">
+      {Array.from({ length: rows }).map((_, i) => (
+        <div
+          class={`h-4 bg-gray-200 dark:bg-gray-700 rounded ${i === rows - 1 ? 'w-2/3' : 'w-full'}`}
+        />
+      ))}
+    </div>
+  )
+}
+
+{
+  variant === 'table' && (
+    <div class="animate-pulse">
+      {/* Table header */}
+      <div
+        class="grid gap-4 mb-4"
+        style={`grid-template-columns: repeat(${columns}, minmax(0, 1fr))`}
+      >
+        {Array.from({ length: columns }).map(() => (
+          <div class="h-4 bg-gray-300 dark:bg-gray-600 rounded" />
+        ))}
+      </div>
+      {/* Table rows */}
+      <div class="space-y-4">
+        {Array.from({ length: rows }).map(() => (
+          <div
+            class="grid gap-4"
+            style={`grid-template-columns: repeat(${columns}, minmax(0, 1fr))`}
+          >
+            {Array.from({ length: columns }).map(() => (
+              <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+{
+  variant === 'card' && (
+    <div class="animate-pulse bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+      <div class="flex items-center gap-4 mb-4">
+        <div class="w-12 h-12 bg-gray-200 dark:bg-gray-700 rounded-full" />
+        <div class="flex-1 space-y-2">
+          <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-3/4" />
+          <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2" />
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded" />
+        <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-5/6" />
+      </div>
+    </div>
+  )
+}
+
+{
+  variant === 'form' && (
+    <div class="animate-pulse space-y-6">
+      {Array.from({ length: rows }).map(() => (
+        <div class="space-y-2">
+          <div class="h-4 bg-gray-200 dark:bg-gray-700 rounded w-1/4" />
+          <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded" />
+        </div>
+      ))}
+      <div class="flex gap-3 pt-4">
+        <div class="h-10 bg-gray-300 dark:bg-gray-600 rounded w-24" />
+        <div class="h-10 bg-gray-200 dark:bg-gray-700 rounded w-24" />
+      </div>
+    </div>
+  )
+}
+
+{
+  variant === 'metric' && (
+    <div class="animate-pulse grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {Array.from({ length: 4 }).map(() => (
+        <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-6">
+          <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/2 mb-3" />
+          <div class="h-8 bg-gray-200 dark:bg-gray-700 rounded w-2/3 mb-2" />
+          <div class="h-3 bg-gray-200 dark:bg-gray-700 rounded w-1/3" />
+        </div>
+      ))}
+    </div>
+  )
+}

package/templates/shared/dashboard/src/components/PageShell.astro

@@ -0,0 +1,72 @@
+---
+/**
+ * PageShell.astro
+ * Consistent page wrapper with title area, subtitle, and action buttons
+ * Use this component to wrap page content for visual consistency across all dashboard pages
+ */
+import Breadcrumbs from './Breadcrumbs.astro';
+
+interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  title: string;
+  subtitle?: string;
+  breadcrumbs?: BreadcrumbItem[];
+  maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full';
+}
+
+const { title, subtitle, breadcrumbs, maxWidth = '7xl' } = Astro.props;
+
+const maxWidthClasses = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '4xl': 'max-w-4xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  full: 'max-w-full',
+};
+---
+
+<div class={`${maxWidthClasses[maxWidth]} mx-auto`}>
+  {/* Breadcrumbs (optional) */}
+  {breadcrumbs && breadcrumbs.length > 0 && <Breadcrumbs items={breadcrumbs} />}
+
+  {/* Page Header */}
+  <div class="mb-8">
+    {/* Title Row - responsive: stacks on mobile */}
+    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+      {/* Title and Subtitle */}
+      <div class="min-w-0 flex-1">
+        <h1 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white truncate">
+          {title}
+        </h1>
+        {
+          subtitle && (
+            <p class="mt-1 text-sm sm:text-base text-gray-600 dark:text-gray-400">{subtitle}</p>
+          )
+        }
+      </div>
+
+      {/* Actions Slot - renders action buttons */}
+      <div class="flex flex-wrap items-center gap-3 sm:flex-shrink-0">
+        <slot name="actions" />
+      </div>
+    </div>
+  </div>
+
+  {/* Page Content */}
+  <slot />
+</div>
+
+<style>
+  /* Ensure long titles don't break layout */
+  h1 {
+    word-break: break-word;
+  }
+</style>

package/templates/shared/dashboard/src/components/SkipLinks.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * SkipLinks.astro
+ * Accessibility skip links for keyboard navigation
+ * Only visible when focused (screen reader and keyboard users)
+ */
+---
+
+<div class="skip-links">
+  <a
+    href="#main-content"
+    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-lg focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
+  >
+    Skip to main content
+  </a>
+  <a
+    href="#sidebar"
+    class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-48 focus:z-[100] focus:px-4 focus:py-2 focus:bg-blue-600 focus:text-white focus:rounded-lg focus:shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
+  >
+    Skip to navigation
+  </a>
+</div>

package/templates/shared/dashboard/src/components/Toast.astro

@@ -0,0 +1,170 @@
+---
+/**
+ * Toast.astro
+ * Individual toast notification component
+ * Variants: success, error, warning, info
+ * Used by ToastContainer - do not use directly
+ */
+
+interface Props {
+  id?: string;
+  type?: 'success' | 'error' | 'warning' | 'info';
+  title: string;
+  message?: string;
+  dismissible?: boolean;
+  duration?: number; // Auto-dismiss after ms (0 = no auto-dismiss)
+}
+
+const { id, type = 'info', title, message, dismissible = true, duration = 5000 } = Astro.props;
+
+const typeStyles = {
+  success: {
+    bg: 'bg-green-50 dark:bg-green-900/30',
+    border: 'border-green-200 dark:border-green-800',
+    icon: 'text-green-500 dark:text-green-400',
+    title: 'text-green-800 dark:text-green-200',
+    message: 'text-green-600 dark:text-green-300',
+  },
+  error: {
+    bg: 'bg-red-50 dark:bg-red-900/30',
+    border: 'border-red-200 dark:border-red-800',
+    icon: 'text-red-500 dark:text-red-400',
+    title: 'text-red-800 dark:text-red-200',
+    message: 'text-red-600 dark:text-red-300',
+  },
+  warning: {
+    bg: 'bg-yellow-50 dark:bg-yellow-900/30',
+    border: 'border-yellow-200 dark:border-yellow-800',
+    icon: 'text-yellow-500 dark:text-yellow-400',
+    title: 'text-yellow-800 dark:text-yellow-200',
+    message: 'text-yellow-600 dark:text-yellow-300',
+  },
+  info: {
+    bg: 'bg-blue-50 dark:bg-blue-900/30',
+    border: 'border-blue-200 dark:border-blue-800',
+    icon: 'text-blue-500 dark:text-blue-400',
+    title: 'text-blue-800 dark:text-blue-200',
+    message: 'text-blue-600 dark:text-blue-300',
+  },
+};
+
+const styles = typeStyles[type];
+---
+
+<div
+  class={`toast flex items-start gap-3 p-4 rounded-lg border shadow-lg ${styles.bg} ${styles.border} animate-slide-in`}
+  role="alert"
+  data-toast-id={id}
+  data-toast-duration={duration}
+>
+  {/* Icon */}
+  <div class={`flex-shrink-0 ${styles.icon}`}>
+    {
+      type === 'success' && (
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      )
+    }
+    {
+      type === 'error' && (
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      )
+    }
+    {
+      type === 'warning' && (
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )
+    }
+    {
+      type === 'info' && (
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      )
+    }
+  </div>
+
+  {/* Content */}
+  <div class="flex-1 min-w-0">
+    <p class={`font-medium text-sm ${styles.title}`}>{title}</p>
+    {message && <p class={`mt-1 text-sm ${styles.message}`}>{message}</p>}
+  </div>
+
+  {/* Dismiss button */}
+  {
+    dismissible && (
+      <button
+        type="button"
+        class={`flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors ${styles.icon}`}
+        aria-label="Dismiss"
+        data-toast-dismiss
+      >
+        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      </button>
+    )
+  }
+</div>
+
+<style>
+  @keyframes slide-in {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-out {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+
+  .animate-slide-in {
+    animation: slide-in 0.3s ease-out;
+  }
+
+  .animate-slide-out {
+    animation: slide-out 0.3s ease-in forwards;
+  }
+</style>

package/templates/shared/dashboard/src/components/ToastContainer.astro

@@ -0,0 +1,156 @@
+---
+/**
+ * ToastContainer.astro
+ * Container for toast notifications - positioned top-right
+ * Include once in DashboardLayout, then use window.showToast() to display toasts
+ *
+ * Usage:
+ *   window.showToast({ type: 'success', title: 'Saved!', message: 'Changes saved successfully' });
+ *   window.showToast({ type: 'error', title: 'Error', message: 'Something went wrong' });
+ */
+---
+
+<div
+  id="toast-container"
+  class="fixed top-20 right-4 z-80 flex flex-col gap-3 w-full max-w-sm pointer-events-none"
+  aria-live="polite"
+  aria-atomic="true"
+>
+  <!-- Toasts will be injected here -->
+</div>
+
+<script is:inline>
+  // Toast management system
+  (function () {
+    let toastId = 0;
+
+    const typeConfig = {
+      success: {
+        bg: 'bg-green-50 dark:bg-green-900/30',
+        border: 'border-green-200 dark:border-green-800',
+        icon: 'text-green-500 dark:text-green-400',
+        title: 'text-green-800 dark:text-green-200',
+        message: 'text-green-600 dark:text-green-300',
+        iconSvg:
+          '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+      },
+      error: {
+        bg: 'bg-red-50 dark:bg-red-900/30',
+        border: 'border-red-200 dark:border-red-800',
+        icon: 'text-red-500 dark:text-red-400',
+        title: 'text-red-800 dark:text-red-200',
+        message: 'text-red-600 dark:text-red-300',
+        iconSvg:
+          '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+      },
+      warning: {
+        bg: 'bg-yellow-50 dark:bg-yellow-900/30',
+        border: 'border-yellow-200 dark:border-yellow-800',
+        icon: 'text-yellow-500 dark:text-yellow-400',
+        title: 'text-yellow-800 dark:text-yellow-200',
+        message: 'text-yellow-600 dark:text-yellow-300',
+        iconSvg:
+          '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>',
+      },
+      info: {
+        bg: 'bg-blue-50 dark:bg-blue-900/30',
+        border: 'border-blue-200 dark:border-blue-800',
+        icon: 'text-blue-500 dark:text-blue-400',
+        title: 'text-blue-800 dark:text-blue-200',
+        message: 'text-blue-600 dark:text-blue-300',
+        iconSvg:
+          '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>',
+      },
+    };
+
+    function dismissToast(id) {
+      const toast = document.querySelector(`[data-toast-id="${id}"]`);
+      if (toast) {
+        toast.style.animation = 'slide-out 0.3s ease-in forwards';
+        setTimeout(() => toast.remove(), 300);
+      }
+    }
+
+    function showToast(options) {
+      const { type = 'info', title, message = '', duration = 5000, dismissible = true } = options;
+
+      const id = ++toastId;
+      const config = typeConfig[type] || typeConfig.info;
+      const container = document.getElementById('toast-container');
+
+      if (!container) return;
+
+      const toast = document.createElement('div');
+      toast.className = `toast flex items-start gap-3 p-4 rounded-lg border shadow-lg pointer-events-auto ${config.bg} ${config.border}`;
+      toast.setAttribute('role', 'alert');
+      toast.setAttribute('data-toast-id', id);
+      toast.style.animation = 'slide-in 0.3s ease-out';
+
+      toast.innerHTML = `
+        <div class="flex-shrink-0 ${config.icon}">${config.iconSvg}</div>
+        <div class="flex-1 min-w-0">
+          <p class="font-medium text-sm ${config.title}">${title}</p>
+          ${message ? `<p class="mt-1 text-sm ${config.message}">${message}</p>` : ''}
+        </div>
+        ${
+          dismissible
+            ? `
+          <button type="button" class="flex-shrink-0 p-1 rounded hover:bg-black/10 dark:hover:bg-white/10 transition-colors ${config.icon}" aria-label="Dismiss" data-toast-dismiss>
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+            </svg>
+          </button>
+        `
+            : ''
+        }
+      `;
+
+      // Add dismiss handler
+      const dismissBtn = toast.querySelector('[data-toast-dismiss]');
+      if (dismissBtn) {
+        dismissBtn.addEventListener('click', () => dismissToast(id));
+      }
+
+      // Auto-dismiss
+      if (duration > 0) {
+        setTimeout(() => dismissToast(id), duration);
+      }
+
+      container.appendChild(toast);
+      return id;
+    }
+
+    // Expose globally
+    window.showToast = showToast;
+    window.dismissToast = dismissToast;
+  })();
+</script>
+
+<style is:global>
+  @keyframes slide-in {
+    from {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+    to {
+      transform: translateX(0);
+      opacity: 1;
+    }
+  }
+
+  @keyframes slide-out {
+    from {
+      transform: translateX(0);
+      opacity: 1;
+    }
+    to {
+      transform: translateX(100%);
+      opacity: 0;
+    }
+  }
+
+  /* Z-index 80 for toasts (above modals) */
+  #toast-container {
+    z-index: 80;
+  }
+</style>