Implement complete frontend with admin panel and theme system

- Add admin authentication and dashboard
- Create event management pages (list, create, edit, archive)
- Implement gallery enhancements (search, sorting, bulk download)
- Add email configuration and archive management pages
- Integrate Umami analytics with tracking throughout the app
- Add comprehensive error boundaries and loading states
- Implement accessibility features (WCAG 2.1 AA compliance)
- Create theme system with preset themes and customization
- Add branding settings and company information management
- Fix backend database initialization and health check
- Configure proper API URLs and environment variables

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/services/analytics.service.ts

@@ -0,0 +1,144 @@
+// Umami Analytics Service
+// Provides integration with Umami for tracking page views and events
+
+interface UmamiConfig {
+  websiteId?: string;
+  hostUrl?: string;
+  autoTrack?: boolean;
+  doNotTrack?: boolean;
+  domains?: string[];
+}
+
+declare global {
+  interface Window {
+    umami?: {
+      track: (eventName: string, eventData?: any) => void;
+      trackView: (url?: string, referrer?: string, websiteId?: string) => void;
+      trackEvent: (
+        eventValue: string,
+        eventType: string,
+        url?: string,
+        websiteId?: string
+      ) => void;
+    };
+  }
+}
+
+class AnalyticsService {
+  private initialized = false;
+  private websiteId: string | null = null;
+  // private hostUrl: string | null = null;
+
+  initialize(config: UmamiConfig) {
+    if (this.initialized) return;
+
+    const { websiteId, hostUrl, autoTrack = true, doNotTrack = true } = config;
+
+    if (!websiteId || !hostUrl) {
+      console.warn('Umami Analytics: Missing websiteId or hostUrl');
+      return;
+    }
+
+    this.websiteId = websiteId;
+    // this.hostUrl = hostUrl;
+
+    // Create and inject Umami script
+    const script = document.createElement('script');
+    script.async = true;
+    script.defer = true;
+    script.src = `${hostUrl}/script.js`;
+    script.setAttribute('data-website-id', websiteId);
+    
+    if (!autoTrack) {
+      script.setAttribute('data-auto-track', 'false');
+    }
+    
+    if (doNotTrack) {
+      script.setAttribute('data-do-not-track', 'true');
+    }
+
+    if (config.domains && config.domains.length > 0) {
+      script.setAttribute('data-domains', config.domains.join(','));
+    }
+
+    document.head.appendChild(script);
+    this.initialized = true;
+  }
+
+  // Track custom events
+  track(eventName: string, eventData?: Record<string, any>) {
+    if (!this.initialized || !window.umami) {
+      console.warn('Umami Analytics not initialized');
+      return;
+    }
+
+    // Umami expects flat event data
+    window.umami.track(eventName, eventData);
+  }
+
+  // Track page views manually
+  trackPageView(url?: string, referrer?: string) {
+    if (!this.initialized || !window.umami) {
+      console.warn('Umami Analytics not initialized');
+      return;
+    }
+
+    window.umami.trackView(url, referrer, this.websiteId || undefined);
+  }
+
+  // Gallery-specific tracking events
+  trackGalleryEvent(eventType: 'password_entry' | 'photo_view' | 'photo_download' | 'gallery_expired' | 'bulk_download', data?: any) {
+    this.track(`gallery_${eventType}`, data);
+  }
+
+  // Admin-specific tracking events
+  trackAdminEvent(eventType: 'login' | 'event_created' | 'event_archived' | 'event_deleted' | 'settings_updated', data?: any) {
+    this.track(`admin_${eventType}`, data);
+  }
+
+  // Track download events with more context
+  trackDownload(photoId: string | number, gallerySlug: string, isBulk: boolean = false) {
+    this.track('photo_download', {
+      photo_id: photoId,
+      gallery: gallerySlug,
+      bulk: isBulk,
+      timestamp: new Date().toISOString()
+    });
+  }
+
+  // Track expiration warning views
+  trackExpirationWarning(gallerySlug: string, daysRemaining: number) {
+    this.track('expiration_warning_viewed', {
+      gallery: gallerySlug,
+      days_remaining: daysRemaining,
+      timestamp: new Date().toISOString()
+    });
+  }
+
+  // Track search usage
+  trackSearch(query: string, resultsCount: number, context: 'gallery' | 'admin') {
+    this.track('search_performed', {
+      query_length: query.length,
+      results_count: resultsCount,
+      context,
+      timestamp: new Date().toISOString()
+    });
+  }
+}
+
+export const analyticsService = new AnalyticsService();
+
+// Helper hook for React components
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+export const useAnalytics = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    // Track page views on route change
+    analyticsService.trackPageView(location.pathname + location.search);
+  }, [location]);
+
+  return analyticsService;
+};

frontend/src/services/auth.service.ts

@@ -3,11 +3,8 @@ import type { LoginResponse, GalleryAuthResponse } from '../types';
 
 export const authService = {
   // Admin authentication
-  async adminLogin(username: string, password: string): Promise<LoginResponse> {
-    const response = await api.post<LoginResponse>('/api/auth/admin/login', {
-      username,
-      password,
-    });
+  async adminLogin(credentials: { email: string; password: string }): Promise<LoginResponse> {
+    const response = await api.post<LoginResponse>('/api/auth/admin/login', credentials);
     
     setAuthToken(response.data.token, true);
     return response.data;