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/components/admin/PhotoUpload.tsx

@@ -0,0 +1,280 @@
+import React, { useState, useRef } from 'react';
+import { Upload, X, Image, Loader2 } from 'lucide-react';
+import { Button } from '../common';
+import { clsx } from 'clsx';
+import { api } from '../../config/api';
+import { toast } from 'react-toastify';
+import { useQuery } from '@tanstack/react-query';
+import { categoriesService } from '../../services/categories.service';
+import { useTranslation } from 'react-i18next';
+
+interface PhotoUploadProps {
+  eventId: number;
+  onUploadComplete?: () => void;
+}
+
+export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadComplete }) => {
+  const { t } = useTranslation();
+  const [isUploading, setIsUploading] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const [uploadProgress, setUploadProgress] = useState(0);
+  const [currentChunk, setCurrentChunk] = useState(0);
+  const [totalChunks, setTotalChunks] = useState(0);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  // Fetch categories for this event
+  const { data: categories = [] } = useQuery({
+    queryKey: ['event-categories', eventId],
+    queryFn: () => categoriesService.getEventCategories(eventId),
+  });
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    const imageFiles = files.filter(file => 
+      ['image/jpeg', 'image/png', 'image/webp'].includes(file.type)
+    );
+    
+    // Check total file count with existing files
+    const totalFiles = selectedFiles.length + imageFiles.length;
+    if (totalFiles > 500) {
+      const allowedNewFiles = 500 - selectedFiles.length;
+      if (allowedNewFiles <= 0) {
+        toast.error(t('upload.maxFilesReached') || 'Maximum 500 files allowed');
+        return;
+      }
+      toast.warning(t('upload.someFilesSkipped') || `Only ${allowedNewFiles} more files can be added (500 max)`);
+      setSelectedFiles(prev => [...prev, ...imageFiles.slice(0, allowedNewFiles)]);
+      return;
+    }
+    
+    setSelectedFiles(prev => [...prev, ...imageFiles]);
+  };
+
+  const removeFile = (index: number) => {
+    setSelectedFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpload = async () => {
+    if (selectedFiles.length === 0) return;
+    
+    // Validate file count
+    if (selectedFiles.length > 500) {
+      toast.error(t('upload.tooManyFiles') || 'Maximum 500 files can be uploaded at once');
+      return;
+    }
+
+    setIsUploading(true);
+    setUploadProgress(0);
+
+    // For large uploads, chunk the files to prevent memory issues
+    const CHUNK_SIZE = 50; // Upload 50 files at a time
+    const chunks = [];
+    
+    for (let i = 0; i < selectedFiles.length; i += CHUNK_SIZE) {
+      chunks.push(selectedFiles.slice(i, i + CHUNK_SIZE));
+    }
+
+    setTotalChunks(chunks.length);
+    let totalUploaded = 0;
+    let failedFiles = [];
+
+    try {
+      for (let chunkIndex = 0; chunkIndex < chunks.length; chunkIndex++) {
+        setCurrentChunk(chunkIndex + 1);
+        const chunk = chunks[chunkIndex];
+        const formData = new FormData();
+        
+        chunk.forEach((file) => {
+          formData.append('photos', file);
+        });
+        
+        if (selectedCategoryId) {
+          formData.append('category_id', selectedCategoryId.toString());
+        }
+
+        try {
+          const response = await api.post(`/admin/events/${eventId}/upload`, formData, {
+            onUploadProgress: (progressEvent) => {
+              if (progressEvent.total) {
+                // Calculate overall progress across all chunks
+                const chunkProgress = progressEvent.loaded / progressEvent.total;
+                const overallProgress = ((chunkIndex + chunkProgress) / chunks.length) * 100;
+                setUploadProgress(Math.round(overallProgress));
+              }
+            },
+          });
+
+          totalUploaded += chunk.length;
+          console.log(`Chunk ${chunkIndex + 1}/${chunks.length} uploaded:`, response.data);
+        } catch (error: any) {
+          console.error(`Error uploading chunk ${chunkIndex + 1}:`, error);
+          failedFiles.push(...chunk.map(f => f.name));
+          
+          // Continue with next chunk even if one fails
+          continue;
+        }
+      }
+
+      // Clear selected files
+      setSelectedFiles([]);
+      if (fileInputRef.current) {
+        fileInputRef.current.value = '';
+      }
+
+      // Show appropriate message
+      if (failedFiles.length === 0) {
+        toast.success(t('upload.uploadComplete') || `Successfully uploaded ${totalUploaded} files`);
+      } else {
+        toast.warning(
+          t('upload.someFilesFailed') || 
+          `Uploaded ${totalUploaded} files. ${failedFiles.length} files failed.`
+        );
+      }
+      
+      // Call callback
+      if (onUploadComplete) {
+        onUploadComplete();
+      }
+    } catch (error: any) {
+      console.error('Upload error:', error);
+      toast.error(error.response?.data?.error || t('toast.uploadError'));
+    } finally {
+      setIsUploading(false);
+      setUploadProgress(0);
+      setCurrentChunk(0);
+      setTotalChunks(0);
+    }
+  };
+
+  const formatFileSize = (bytes: number) => {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  };
+
+  return (
+    <div className="space-y-4">
+      {/* Category Selection */}
+      <div>
+        <label className="block text-sm font-medium text-neutral-700 mb-2">
+          {t('upload.photoCategory')}
+        </label>
+        <select
+          value={selectedCategoryId || ''}
+          onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : null)}
+          className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
+        >
+          <option value="">{t('upload.noCategory')}</option>
+          {categories.map((category) => (
+            <option key={category.id} value={category.id}>
+              {category.name} {!category.is_global && t('upload.eventSpecific')}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* File Input Area */}
+      <div
+        className={clsx(
+          "border-2 border-dashed rounded-lg p-8 text-center transition-colors",
+          "hover:border-primary-400 hover:bg-primary-50/50",
+          selectedFiles.length > 0 ? "border-primary-400 bg-primary-50/30" : "border-neutral-300"
+        )}
+        onClick={() => fileInputRef.current?.click()}
+      >
+        <Upload className="w-12 h-12 mx-auto text-neutral-400 mb-4" />
+        <p className="text-neutral-700 font-medium mb-1">
+          {t('upload.clickToUpload')}
+        </p>
+        <p className="text-sm text-neutral-500">
+          {t('upload.fileRequirements')}
+        </p>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept="image/jpeg,image/png,image/webp"
+          onChange={handleFileSelect}
+          className="hidden"
+        />
+      </div>
+
+      {/* Selected Files */}
+      {selectedFiles.length > 0 && (
+        <div className="space-y-2">
+          <p className="text-sm font-medium text-neutral-700">
+            {t('upload.selectedFiles')} ({selectedFiles.length})
+          </p>
+          <div className="max-h-48 overflow-y-auto space-y-2">
+            {selectedFiles.map((file, index) => (
+              <div
+                key={index}
+                className="flex items-center justify-between p-2 bg-neutral-50 rounded-lg"
+              >
+                <div className="flex items-center gap-3">
+                  <Image className="w-5 h-5 text-neutral-400" />
+                  <div>
+                    <p className="text-sm font-medium text-neutral-700 truncate max-w-xs">
+                      {file.name}
+                    </p>
+                    <p className="text-xs text-neutral-500">
+                      {formatFileSize(file.size)}
+                    </p>
+                  </div>
+                </div>
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeFile(index);
+                  }}
+                  className="p-1 hover:bg-neutral-200 rounded"
+                >
+                  <X className="w-4 h-4" />
+                </button>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Upload Button */}
+      <div className="flex justify-end">
+        <Button
+          variant="primary"
+          onClick={handleUpload}
+          disabled={selectedFiles.length === 0 || isUploading}
+          leftIcon={isUploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
+        >
+          {isUploading ? t('upload.uploading') : t('common.upload') + ` ${selectedFiles.length} ${t(selectedFiles.length === 1 ? 'common.photo' : 'common.photos')}`}
+        </Button>
+      </div>
+
+      {/* Progress Bar */}
+      {isUploading && (
+        <div className="mt-4">
+          <div className="flex justify-between text-sm text-neutral-600 mb-1">
+            <span>
+              {t('upload.uploading')}
+              {totalChunks > 1 && ` (${t('common.chunk') || 'Chunk'} ${currentChunk}/${totalChunks})`}
+            </span>
+            <span>{uploadProgress}%</span>
+          </div>
+          <div className="w-full bg-neutral-200 rounded-full h-2">
+            <div
+              className="bg-primary-600 h-2 rounded-full transition-all duration-300"
+              style={{ width: `${uploadProgress}%` }}
+            />
+          </div>
+          {totalChunks > 1 && (
+            <p className="text-xs text-neutral-500 mt-1">
+              {t('upload.uploadingChunks') || `Uploading ${selectedFiles.length} files in ${totalChunks} batches...`}
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+PhotoUpload.displayName = 'PhotoUpload';