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/AdminAuthenticatedImage.tsx

@@ -0,0 +1,77 @@
+import React, { useState, useEffect } from 'react';
+import { api } from '../../config/api';
+
+interface AdminAuthenticatedImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  fallback?: React.ReactNode;
+}
+
+export const AdminAuthenticatedImage: React.FC<AdminAuthenticatedImageProps> = ({
+  src,
+  fallback,
+  alt,
+  ...props
+}) => {
+  const [imageSrc, setImageSrc] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const loadImage = async () => {
+      try {
+        setLoading(true);
+        setError(false);
+
+        // Make authenticated request to get the image
+        const response = await api.get(src, {
+          responseType: 'blob',
+        });
+
+        if (!cancelled) {
+          // Create object URL from blob
+          const imageUrl = URL.createObjectURL(response.data);
+          setImageSrc(imageUrl);
+          setLoading(false);
+        }
+      } catch (err: any) {
+        // Image loading failed - handled by error state
+        if (!cancelled) {
+          setError(true);
+          setLoading(false);
+        }
+      }
+    };
+
+    if (src) {
+      loadImage();
+    }
+
+    // Cleanup function
+    return () => {
+      cancelled = true;
+      if (imageSrc) {
+        URL.revokeObjectURL(imageSrc);
+      }
+    };
+  }, [src]);
+
+  if (loading) {
+    return (
+      <div className="w-full h-full bg-neutral-200 animate-pulse" />
+    );
+  }
+
+  if (error) {
+    return fallback ? (
+      <>{fallback}</>
+    ) : (
+      <div className="w-full h-full bg-neutral-100 flex items-center justify-center text-neutral-400">
+        <span className="text-xs">Failed to load</span>
+      </div>
+    );
+  }
+
+  return <img src={imageSrc || ''} alt={alt} {...props} />;
+};