Initial commit - Project start (July 17, 2025)

Original: feat: enhance security logging and ensure rate limit blocks are properly tracked

- Add comprehensive logging for rate limit blocks with full request details
  - IP address (with proper proxy detection), user agent, headers, timestamps
  - Rate limit info (current count, limit, remaining, reset time)
  - Separate tracking for auth vs general endpoints

- Enhance authentication failure logging
  - JWT validation failures with detailed error info
  - Admin auth attempts without token
  - Failed token validation with user context
  - All events include IP, path, method, user agent

- Improve Winston logger configuration for production
  - Add automatic log rotation (10MB errors, 50MB combined)
  - Create separate security.log for auth/rate limit events
  - Ensure logs directory exists automatically
  - Add structured JSON format for log aggregation
  - Support container logging with LOG_TO_CONSOLE env var

- Create comprehensive documentation
  - Security logging guide with examples
  - Monitoring recommendations
  - Configuration reference

- Add test script to verify logging functionality

All rate limit settings remain configurable via admin panel:
- Window duration, max requests, auth limits
- Skip authenticated requests option
- Public endpoints only option

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

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

frontend/src/pages/admin/EventsListPage.tsx

@@ -0,0 +1,561 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { 
+  Plus, 
+  Search, 
+  Archive,
+  AlertTriangle,
+  MoreVertical,
+  ExternalLink,
+  Edit,
+  Download,
+  Trash2,
+  Calendar,
+  Users,
+  Image,
+  Activity
+} from 'lucide-react';
+import { parseISO, differenceInDays } from 'date-fns';
+import { toast } from 'react-toastify';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';
+
+import { Button, Input, Card, SkeletonTable, ErrorBoundary } from '../../components/common';
+import { BulkArchiveModal } from '../../components/admin';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { eventsService } from '../../services/events.service';
+import type { Event } from '../../types';
+import { useTranslation } from 'react-i18next';
+
+export const EventsListPage: React.FC = () => {
+  const { t } = useTranslation();
+  const { format } = useLocalizedDate();
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+  const [searchParams, setSearchParams] = useSearchParams();
+  
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedEvents, setSelectedEvents] = useState<number[]>([]);
+  // const [showFilters, setShowFilters] = useState(false);
+  const [activeDropdown, setActiveDropdown] = useState<number | null>(null);
+  const [dropdownPosition, setDropdownPosition] = useState<{ top: number; left: number } | null>(null);
+  const [showBulkArchiveModal, setShowBulkArchiveModal] = useState(false);
+
+  // Get filter from URL
+  const statusFilter = searchParams.get('filter') as 'active' | 'archived' | null;
+  const isExpiringFilter = searchParams.get('filter') === 'expiring';
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as HTMLElement;
+      if (!target.closest('.dropdown-container')) {
+        setActiveDropdown(null);
+        setDropdownPosition(null);
+      }
+    };
+
+    if (activeDropdown !== null) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () => document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [activeDropdown]);
+
+  // Update dropdown position on scroll/resize
+  useEffect(() => {
+    const handleScrollOrResize = () => {
+      if (activeDropdown !== null) {
+        setActiveDropdown(null);
+        setDropdownPosition(null);
+      }
+    };
+
+    window.addEventListener('scroll', handleScrollOrResize, true);
+    window.addEventListener('resize', handleScrollOrResize);
+    
+    return () => {
+      window.removeEventListener('scroll', handleScrollOrResize, true);
+      window.removeEventListener('resize', handleScrollOrResize);
+    };
+  }, [activeDropdown]);
+
+  // Fetch events
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['admin-events', statusFilter],
+    queryFn: () => eventsService.getEvents(1, 100, (statusFilter === 'archived' || statusFilter === 'active') ? statusFilter : undefined),
+  });
+
+  // Archive mutation
+  const archiveMutation = useMutation({
+    mutationFn: eventsService.archiveEvent,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-events'] });
+      toast.success(t('toast.eventArchived'));
+    },
+    onError: () => {
+      toast.error(t('toast.saveError'));
+    },
+  });
+
+  // Delete mutation
+  const deleteMutation = useMutation({
+    mutationFn: eventsService.deleteEvent,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['admin-events'] });
+      toast.success(t('toast.deleteSuccess'));
+    },
+    onError: () => {
+      toast.error(t('toast.deleteError'));
+    },
+  });
+
+  // Bulk archive mutation
+  const bulkArchiveMutation = useMutation({
+    mutationFn: eventsService.bulkArchiveEvents,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({ queryKey: ['admin-events'] });
+      setSelectedEvents([]);
+      setShowBulkArchiveModal(false);
+      
+      if (data.results.failed.length === 0) {
+        toast.success(t('events.bulkArchiveSuccess', { count: data.results.successful.length }));
+      } else {
+        toast.warning(t('events.bulkArchivePartial', { success: data.results.successful.length, failed: data.results.failed.length }));
+      }
+    },
+    onError: () => {
+      toast.error(t('toast.saveError'));
+    },
+  });
+
+  // Filter and search events
+  const filteredEvents = useMemo(() => {
+    if (!data?.events) return [];
+    
+    let events = [...data.events];
+    
+    // Apply status filter
+    if (statusFilter === 'active') {
+      events = events.filter(e => e.is_active && !e.is_archived);
+    } else if (isExpiringFilter) {
+      events = events.filter(e => {
+        if (!e.is_active || e.is_archived) return false;
+        const days = e.expires_at ? differenceInDays(parseISO(e.expires_at), new Date()) : 0;
+        return days <= 7 && days > 0;
+      });
+    } else if (statusFilter === 'archived') {
+      events = events.filter(e => e.is_archived);
+    }
+    
+    // Apply search
+    if (searchTerm) {
+      const term = searchTerm.toLowerCase();
+      events = events.filter(e => 
+        e.event_name.toLowerCase().includes(term) ||
+        e.event_type.toLowerCase().includes(term) ||
+        e.host_email.toLowerCase().includes(term)
+      );
+    }
+    
+    // Sort by creation date (newest first)
+    events.sort((a, b) => {
+      const dateA = a.created_at ? new Date(a.created_at).getTime() : 0;
+      const dateB = b.created_at ? new Date(b.created_at).getTime() : 0;
+      return dateB - dateA;
+    });
+    
+    return events;
+  }, [data?.events, statusFilter, searchTerm]);
+
+  const handleSelectAll = () => {
+    if (selectedEvents.length === filteredEvents.length) {
+      setSelectedEvents([]);
+    } else {
+      setSelectedEvents(filteredEvents.map(e => e.id));
+    }
+  };
+
+  const handleSelectEvent = (id: number) => {
+    setSelectedEvents(prev => 
+      prev.includes(id) 
+        ? prev.filter(i => i !== id)
+        : [...prev, id]
+    );
+  };
+
+  const getEventStatus = (event: Event) => {
+    if (event.is_archived) return { label: t('events.archived'), color: 'text-neutral-500 bg-neutral-100' };
+    if (!event.is_active) return { label: t('events.inactive'), color: 'text-red-600 bg-red-100' };
+    
+    const days = event.expires_at ? differenceInDays(parseISO(event.expires_at), new Date()) : 0;
+    if (days <= 0) return { label: t('events.expired'), color: 'text-red-600 bg-red-100' };
+    if (days <= 7) return { label: t('events.daysLeft', { count: days }), color: 'text-orange-600 bg-orange-100' };
+    
+    return { label: t('events.active'), color: 'text-green-600 bg-green-100' };
+  };
+
+  if (isLoading) {
+    return (
+      <div>
+        <div className="flex justify-between items-center mb-6">
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900">{t('events.title')}</h1>
+            <p className="text-neutral-600 mt-1">{t('events.subtitle')}</p>
+          </div>
+        </div>
+        <SkeletonTable rows={5} />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-red-600">{t('events.failedToLoadEvents')}</p>
+        <Button onClick={() => window.location.reload()} className="mt-4">
+          {t('events.tryAgain')}
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <ErrorBoundary>
+      <div>
+        {/* Page Header */}
+        <div className="flex justify-between items-center mb-6">
+          <div>
+            <h1 className="text-2xl font-bold text-neutral-900">{t('events.title')}</h1>
+            <p className="text-neutral-600 mt-1">{t('events.subtitle')}</p>
+          </div>
+          <Button
+            variant="primary"
+            leftIcon={<Plus className="w-5 h-5" />}
+            onClick={() => navigate('/admin/events/new')}
+          >
+            {t('events.createEvent')}
+          </Button>
+        </div>
+
+      {/* Statistics Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
+        <Card padding="sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-neutral-600">{t('events.stats.totalEvents')}</p>
+              <p className="text-2xl font-bold text-neutral-900">{data?.events.length || 0}</p>
+            </div>
+            <Calendar className="w-8 h-8 text-primary-600" />
+          </div>
+        </Card>
+        
+        <Card padding="sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-neutral-600">{t('events.stats.activeEvents')}</p>
+              <p className="text-2xl font-bold text-neutral-900">
+                {data?.events.filter(e => e.is_active && !e.is_archived).length || 0}
+              </p>
+            </div>
+            <Activity className="w-8 h-8 text-green-600" />
+          </div>
+        </Card>
+        
+        <Card padding="sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-neutral-600">{t('events.stats.totalPhotos')}</p>
+              <p className="text-2xl font-bold text-neutral-900">
+                {data?.events.reduce((sum, e) => sum + (e.photo_count || 0), 0) || 0}
+              </p>
+            </div>
+            <Image className="w-8 h-8 text-blue-600" />
+          </div>
+        </Card>
+        
+        <Card padding="sm">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-sm text-neutral-600">{t('events.stats.expiringEvents')}</p>
+              <p className="text-2xl font-bold text-neutral-900">
+                {data?.events.filter(e => {
+                  if (!e.is_active || e.is_archived) return false;
+                  const days = e.expires_at ? differenceInDays(parseISO(e.expires_at), new Date()) : 0;
+                  return days <= 7 && days > 0;
+                }).length || 0}
+              </p>
+            </div>
+            <AlertTriangle className="w-8 h-8 text-orange-600" />
+          </div>
+        </Card>
+      </div>
+
+      {/* Filters and Search */}
+      <Card padding="sm" className="mb-6">
+        <div className="flex flex-col lg:flex-row gap-4">
+          {/* Search */}
+          <div className="flex-1">
+            <Input
+              type="text"
+              placeholder={t('events.searchEventsPlaceholder')}
+              leftIcon={<Search className="w-5 h-5 text-neutral-400" />}
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+            />
+          </div>
+
+          {/* Filter Buttons */}
+          <div className="flex gap-2">
+            <Button
+              variant={!statusFilter ? 'primary' : 'outline'}
+              size="md"
+              onClick={() => {
+                searchParams.delete('filter');
+                setSearchParams(searchParams);
+              }}
+            >
+              {t('events.all')} ({data?.events.length || 0})
+            </Button>
+            <Button
+              variant={statusFilter === 'active' ? 'primary' : 'outline'}
+              size="md"
+              onClick={() => setSearchParams({ filter: 'active' })}
+            >
+              {t('events.active')}
+            </Button>
+            <Button
+              variant={isExpiringFilter ? 'primary' : 'outline'}
+              size="md"
+              onClick={() => setSearchParams({ filter: 'expiring' })}
+              leftIcon={<AlertTriangle className="w-4 h-4" />}
+            >
+              {t('events.expiring')}
+            </Button>
+            <Button
+              variant={statusFilter === 'archived' ? 'primary' : 'outline'}
+              size="md"
+              onClick={() => setSearchParams({ filter: 'archived' })}
+              leftIcon={<Archive className="w-4 h-4" />}
+            >
+              {t('events.archived')}
+            </Button>
+          </div>
+        </div>
+
+        {/* Bulk Actions */}
+        {selectedEvents.length > 0 && (
+          <div className="mt-4 p-3 bg-primary-50 rounded-lg flex items-center justify-between">
+            <span className="text-sm text-primary-900">
+              {t('events.eventsSelected', { count: selectedEvents.length })}
+            </span>
+            <div className="flex gap-2">
+              <Button variant="outline" size="sm" onClick={() => setSelectedEvents([])}>
+                {t('events.clear')}
+              </Button>
+              <Button 
+                variant="outline" 
+                size="sm"
+                onClick={() => setShowBulkArchiveModal(true)}
+              >
+                {t('events.archiveSelected')}
+              </Button>
+            </div>
+          </div>
+        )}
+      </Card>
+
+      {/* Events Table */}
+      <Card className="overflow-visible">
+        <div className="overflow-x-auto overflow-y-visible">
+          <table className="w-full">
+            <thead className="bg-neutral-50 border-b border-neutral-200">
+              <tr>
+                <th className="px-6 py-3 text-left">
+                  <input
+                    type="checkbox"
+                    checked={selectedEvents.length === filteredEvents.length && filteredEvents.length > 0}
+                    onChange={handleSelectAll}
+                    className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
+                  />
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.event')}
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.type')}
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.date')}
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.status')}
+                </th>
+                <th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.expires')}
+                </th>
+                <th className="px-6 py-3 text-right text-xs font-medium text-neutral-500 uppercase tracking-wider">
+                  {t('events.actions')}
+                </th>
+              </tr>
+            </thead>
+            <tbody className="bg-white divide-y divide-neutral-200">
+              {filteredEvents.length === 0 ? (
+                <tr>
+                  <td colSpan={7} className="px-6 py-12 text-center text-neutral-500">
+                    {t('events.noEventsFound')}
+                  </td>
+                </tr>
+              ) : (
+                filteredEvents.map((event) => {
+                  const status = getEventStatus(event);
+                  
+                  return (
+                    <tr key={event.id} className="hover:bg-neutral-50">
+                      <td className="px-6 py-4">
+                        <input
+                          type="checkbox"
+                          checked={selectedEvents.includes(event.id)}
+                          onChange={() => handleSelectEvent(event.id)}
+                          className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
+                        />
+                      </td>
+                      <td className="px-6 py-4">
+                        <div>
+                          <p className="text-sm font-medium text-neutral-900">{event.event_name}</p>
+                          <p className="text-xs text-neutral-500">{event.host_email}</p>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4 text-sm text-neutral-700">
+                        {event.event_type}
+                      </td>
+                      <td className="px-6 py-4 text-sm text-neutral-700">
+                        {event.event_date ? format(parseISO(event.event_date), 'MMM d, yyyy') : 'N/A'}
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${status.color}`}>
+                          {status.label}
+                        </span>
+                      </td>
+                      <td className="px-6 py-4 text-sm text-neutral-700">
+                        {event.expires_at ? format(parseISO(event.expires_at), 'MMM d, yyyy') : 'N/A'}
+                      </td>
+                      <td className="px-6 py-4 text-right">
+                        <div className="relative inline-block text-left dropdown-container">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              if (activeDropdown === event.id) {
+                                setActiveDropdown(null);
+                                setDropdownPosition(null);
+                              } else {
+                                const rect = e.currentTarget.getBoundingClientRect();
+                                setActiveDropdown(event.id);
+                                setDropdownPosition({
+                                  top: rect.bottom + window.scrollY,
+                                  left: rect.right - 224 + window.scrollX // 224px = 14rem (w-56)
+                                });
+                              }
+                            }}
+                            className="text-neutral-400 hover:text-neutral-600 p-1"
+                          >
+                            <MoreVertical className="w-5 h-5" />
+                          </button>
+                          
+                          {activeDropdown === event.id && dropdownPosition && (
+                            <div 
+                              className="fixed z-50 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
+                              style={{ top: `${dropdownPosition.top}px`, left: `${dropdownPosition.left}px` }}
+                            >
+                              <div className="py-1">
+                                <button
+                                  onClick={() => {
+                                    navigate(`/admin/events/${event.id}`);
+                                    setActiveDropdown(null);
+                                    setDropdownPosition(null);
+                                  }}
+                                  className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+                                >
+                                  <Edit className="w-4 h-4" />
+                                  {t('events.viewDetails')}
+                                </button>
+                                {event.share_link ? (
+                                  <a
+                                    href={event.share_link}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                    className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+                                    onClick={() => {
+                                      setActiveDropdown(null);
+                                      setDropdownPosition(null);
+                                    }}
+                                  >
+                                    <ExternalLink className="w-4 h-4" />
+                                    {t('events.viewGallery')}
+                                  </a>
+                                ) : null}
+                                {!event.is_archived ? (
+                                  <button
+                                    onClick={() => {
+                                      archiveMutation.mutate(event.id);
+                                      setActiveDropdown(null);
+                                      setDropdownPosition(null);
+                                    }}
+                                    className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+                                  >
+                                    <Archive className="w-4 h-4" />
+                                    {t('events.archiveEventAction')}
+                                  </button>
+                                ) : null}
+                                {event.is_archived ? (
+                                  <button
+                                    onClick={() => {
+                                      toast.info(t('events.downloadArchiveSoon'));
+                                      setActiveDropdown(null);
+                                      setDropdownPosition(null);
+                                    }}
+                                    className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
+                                  >
+                                    <Download className="w-4 h-4" />
+                                    {t('events.downloadArchiveAction')}
+                                  </button>
+                                ) : null}
+                                <button
+                                  onClick={() => {
+                                    if (confirm(t('events.deleteEventConfirm'))) {
+                                      deleteMutation.mutate(event.id);
+                                      setActiveDropdown(null);
+                                      setDropdownPosition(null);
+                                    }
+                                  }}
+                                  className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
+                                >
+                                  <Trash2 className="w-4 h-4" />
+                                  {t('events.deleteEvent')}
+                                </button>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card>
+      
+      {/* Bulk Archive Modal */}
+      <BulkArchiveModal
+        isOpen={showBulkArchiveModal}
+        onClose={() => setShowBulkArchiveModal(false)}
+        onConfirm={() => bulkArchiveMutation.mutate(selectedEvents)}
+        selectedEvents={filteredEvents.filter(e => selectedEvents.includes(e.id))}
+        isLoading={bulkArchiveMutation.isPending}
+      />
+      </div>
+    </ErrorBoundary>
+  );
+};
+
+EventsListPage.displayName = 'EventsListPage';