feat: Add comprehensive system enhancements

- Add version display above storage consumption in admin sidebar
- Fix storage consumption to stick to bottom of window using flexbox
- Add user upload settings to events (allow uploads, category selection)
- Enhance disk space tab to comprehensive system status view
- Add localized date formatting for German/English language support
- Remove quick actions from dashboard for cleaner interface
- Create user photo upload functionality for galleries
- Add database migration for user upload settings
- Update all TypeScript types and interfaces

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

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

frontend/src/components/admin/AdminHeader.tsx

@@ -1,8 +1,8 @@
 import React, { useState, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Menu, User, LogOut, Settings, Bell, Lock, CheckCircle, Trash2 } from 'lucide-react';
-import { format, formatDistanceToNow } from 'date-fns';
 import { useTranslation } from 'react-i18next';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { useAdminAuth } from '../../contexts';
@@ -20,6 +20,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
   const navigate = useNavigate();
   const { user, logout } = useAdminAuth();
   const { t } = useTranslation();
+  const { format, formatDistanceToNow } = useLocalizedDate();
   const [showUserMenu, setShowUserMenu] = useState(false);
   const [showNotifications, setShowNotifications] = useState(false);
   const [showPasswordModal, setShowPasswordModal] = useState(false);
@@ -79,7 +80,7 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
           {/* Desktop breadcrumb or page title could go here */}
           <div className="hidden lg:block">
             <h2 className="text-lg font-semibold text-neutral-900">
-              {format(new Date(), 'EEEE, MMMM d, yyyy')}
+              {format(new Date(), 'PPPP')}
             </h2>
           </div>
 

frontend/src/components/admin/AdminSidebar.tsx

@@ -15,6 +15,7 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { settingsService } from '../../services/settings.service';
+import { VersionInfo } from './VersionInfo';
 
 interface AdminSidebarProps {
   isOpen: boolean;
@@ -89,8 +90,14 @@ export const AdminSidebar: React.FC<AdminSidebarProps> = ({ isOpen, onClose }) =
           })}
         </nav>
 
-        {/* Storage Info */}
-        <StorageInfo />
+        {/* Bottom section - sticky to bottom */}
+        <div className="mt-auto">
+          {/* Version Info */}
+          <VersionInfo />
+          
+          {/* Storage Info */}
+          <StorageInfo />
+        </div>
       </div>
     </div>
   );

frontend/src/components/admin/VersionInfo.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Info } from 'lucide-react';
+import { api } from '../../config/api';
+
+// Frontend version from package.json
+const FRONTEND_VERSION = '1.0.0';
+
+interface SystemVersion {
+  backend: string;
+  frontend: string;
+  node: string;
+  environment: string;
+}
+
+async function fetchSystemVersion(): Promise<SystemVersion> {
+  const response = await api.get<SystemVersion>('/api/admin/system/version');
+  return response.data;
+}
+
+export const VersionInfo: React.FC = () => {
+  const { t } = useTranslation();
+  const { data: versionInfo } = useQuery({
+    queryKey: ['system-version'],
+    queryFn: fetchSystemVersion,
+    staleTime: 5 * 60 * 1000, // Cache for 5 minutes
+  });
+
+  return (
+    <div className="px-4 py-3 border-t border-neutral-200">
+      <div className="flex items-center gap-2 text-xs text-neutral-600">
+        <Info className="w-3 h-3" />
+        <span className="font-medium">{t('admin.version')}</span>
+      </div>
+      <div className="mt-1 space-y-0.5 text-xs text-neutral-500">
+        <div>Frontend: v{FRONTEND_VERSION}</div>
+        {versionInfo && (
+          <div>Backend: v{versionInfo.backend}</div>
+        )}
+      </div>
+    </div>
+  );
+};

frontend/src/components/gallery/GalleryView.tsx

@@ -11,8 +11,10 @@ import { ExpirationBanner } from './ExpirationBanner';
 import { CountdownTimer } from './CountdownTimer';
 import { GalleryLayout } from './GalleryLayout';
 import { PhotoFilterBar } from './PhotoFilterBar';
+import { UserPhotoUpload } from './UserPhotoUpload';
 import { analyticsService } from '../../services/analytics.service';
 import { api } from '../../config/api';
+import { Upload } from 'lucide-react';
 
 interface GalleryViewProps {
   slug: string;
@@ -24,6 +26,8 @@ interface GalleryViewProps {
     welcome_message?: string;
     color_theme?: string;
     expires_at: string;
+    allow_user_uploads?: boolean;
+    upload_category_id?: number | null;
   };
 }
 
@@ -35,6 +39,7 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
   const [searchTerm, setSearchTerm] = useState('');
   const [sortBy, setSortBy] = useState<'date' | 'name' | 'size'>('date');
   const [brandingSettings, setBrandingSettings] = useState<any>(null);
+  const [showUploadModal, setShowUploadModal] = useState(false);
   const themeAppliedRef = useRef(false);
   
   // Fetch photos
@@ -221,9 +226,22 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
       onDownloadAll={handleDownloadAll}
       isDownloading={downloadAllMutation.isPending}
       headerExtra={
-        daysUntilExpiration <= 1 && daysUntilExpiration > 0 ? (
-          <CountdownTimer expiresAt={event.expires_at} className="mr-4" />
-        ) : null
+        <>
+          {daysUntilExpiration <= 1 && daysUntilExpiration > 0 && (
+            <CountdownTimer expiresAt={event.expires_at} className="mr-4" />
+          )}
+          {event.allow_user_uploads && (
+            <Button
+              variant="outline"
+              size="md"
+              leftIcon={<Upload className="w-4 h-4" />}
+              onClick={() => setShowUploadModal(true)}
+              className="mr-2"
+            >
+              {t('upload.uploadPhotos')}
+            </Button>
+          )}
+        </>
       }
     >
       {/* Expiration Banner */}
@@ -251,6 +269,20 @@ export const GalleryView: React.FC<GalleryViewProps> = ({ slug, event }) => {
           <PhotoGrid photos={filteredPhotos} slug={slug} categoryId={selectedCategoryId} />
         </div>
       </div>
+
+      {/* Upload Modal */}
+      {showUploadModal && (
+        <UserPhotoUpload
+          eventId={event.id}
+          categoryId={event.upload_category_id}
+          onUploadComplete={() => {
+            setShowUploadModal(false);
+            // Refetch photos after upload
+            window.location.reload(); // Simple reload for now
+          }}
+          onClose={() => setShowUploadModal(false)}
+        />
+      )}
     </GalleryLayout>
   );
 };

frontend/src/components/gallery/UserPhotoUpload.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import { Upload, X, CheckCircle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
+import { Button, Card, CardContent } from '../common';
+import { api } from '../../config/api';
+
+interface UserPhotoUploadProps {
+  eventId: number;
+  categoryId: number | null | undefined;
+  onUploadComplete: () => void;
+  onClose: () => void;
+}
+
+export const UserPhotoUpload: React.FC<UserPhotoUploadProps> = ({
+  eventId,
+  categoryId,
+  onUploadComplete,
+  onClose,
+}) => {
+  const { t } = useTranslation();
+  const [files, setFiles] = useState<File[]>([]);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<{ [key: string]: number }>({});
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFiles = Array.from(e.target.files || []);
+    
+    // Validate file types
+    const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    const validFiles = selectedFiles.filter(file => {
+      if (!allowedTypes.includes(file.type)) {
+        toast.error(`Invalid file type: ${file.name}`);
+        return false;
+      }
+      // Check file size (50MB max)
+      if (file.size > 50 * 1024 * 1024) {
+        toast.error(`File too large: ${file.name}`);
+        return false;
+      }
+      return true;
+    });
+
+    setFiles(prev => [...prev, ...validFiles]);
+  };
+
+  const removeFile = (index: number) => {
+    setFiles(prev => prev.filter((_, i) => i !== index));
+  };
+
+  const handleUpload = async () => {
+    if (files.length === 0) return;
+
+    setUploading(true);
+    let successCount = 0;
+    let failedCount = 0;
+
+    for (const file of files) {
+      const formData = new FormData();
+      formData.append('photos', file);
+      if (categoryId) {
+        formData.append('category_id', categoryId.toString());
+      }
+
+      try {
+        await api.post(`/api/gallery/${eventId}/upload`, formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+          onUploadProgress: (progressEvent) => {
+            if (progressEvent.total) {
+              const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+              setUploadProgress(prev => ({
+                ...prev,
+                [file.name]: progress,
+              }));
+            }
+          },
+        });
+        successCount++;
+      } catch (error) {
+        console.error(`Failed to upload ${file.name}:`, error);
+        failedCount++;
+      }
+    }
+
+    setUploading(false);
+
+    if (successCount > 0) {
+      toast.success(t('toast.uploadSuccess') + ` (${successCount} ${t('common.photos')})`);
+      onUploadComplete();
+    }
+    
+    if (failedCount > 0) {
+      toast.error(`${failedCount} ${t('upload.someFilesFailed')}`);
+    }
+
+    if (failedCount === 0) {
+      onClose();
+    }
+  };
+
+  const formatBytes = (bytes: number): string => {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <Card className="w-full max-w-2xl max-h-[90vh] overflow-hidden">
+        <CardContent className="p-0">
+          {/* Header */}
+          <div className="flex items-center justify-between p-6 border-b border-neutral-200">
+            <h2 className="text-xl font-semibold text-neutral-900">{t('upload.uploadPhotos')}</h2>
+            <button
+              onClick={onClose}
+              className="p-2 hover:bg-neutral-100 rounded-lg transition-colors"
+            >
+              <X className="w-5 h-5 text-neutral-500" />
+            </button>
+          </div>
+
+          {/* Content */}
+          <div className="p-6 overflow-y-auto" style={{ maxHeight: 'calc(90vh - 200px)' }}>
+            {/* Upload Area */}
+            <div className="mb-6">
+              <label className="block">
+                <div className="border-2 border-dashed border-neutral-300 rounded-lg p-8 text-center hover:border-primary-500 transition-colors cursor-pointer">
+                  <Upload className="w-12 h-12 text-neutral-400 mx-auto mb-3" />
+                  <p className="text-sm font-medium text-neutral-700 mb-1">
+                    {t('upload.clickToUpload')}
+                  </p>
+                  <p className="text-xs text-neutral-500">
+                    {t('upload.fileRequirements')}
+                  </p>
+                  <input
+                    type="file"
+                    className="hidden"
+                    multiple
+                    accept="image/jpeg,image/png,image/webp"
+                    onChange={handleFileSelect}
+                    disabled={uploading}
+                  />
+                </div>
+              </label>
+            </div>
+
+            {/* Selected Files */}
+            {files.length > 0 && (
+              <div className="space-y-2">
+                <h3 className="text-sm font-medium text-neutral-700 mb-2">
+                  {t('upload.selectedFiles')} ({files.length})
+                </h3>
+                {files.map((file, index) => (
+                  <div
+                    key={index}
+                    className="flex items-center justify-between p-3 bg-neutral-50 rounded-lg"
+                  >
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm font-medium text-neutral-900 truncate">
+                        {file.name}
+                      </p>
+                      <p className="text-xs text-neutral-500">
+                        {formatBytes(file.size)}
+                      </p>
+                    </div>
+                    {uploadProgress[file.name] !== undefined ? (
+                      <div className="flex items-center gap-2">
+                        {uploadProgress[file.name] === 100 ? (
+                          <CheckCircle className="w-5 h-5 text-green-600" />
+                        ) : (
+                          <div className="w-20">
+                            <div className="bg-neutral-200 rounded-full h-2">
+                              <div
+                                className="bg-primary-600 h-2 rounded-full transition-all"
+                                style={{ width: `${uploadProgress[file.name]}%` }}
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    ) : (
+                      <button
+                        onClick={() => removeFile(index)}
+                        className="p-1 hover:bg-neutral-200 rounded transition-colors"
+                        disabled={uploading}
+                      >
+                        <X className="w-4 h-4 text-neutral-500" />
+                      </button>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+
+          {/* Footer */}
+          <div className="flex items-center justify-end gap-3 p-6 border-t border-neutral-200">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              disabled={uploading}
+            >
+              {t('common.cancel')}
+            </Button>
+            <Button
+              variant="primary"
+              onClick={handleUpload}
+              disabled={files.length === 0 || uploading}
+              isLoading={uploading}
+            >
+              {uploading ? t('upload.uploading') : t('common.upload')} ({files.length})
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+UserPhotoUpload.displayName = 'UserPhotoUpload';

frontend/src/components/gallery/index.ts

@@ -4,4 +4,5 @@ export { PhotoLightbox } from './PhotoLightbox';
 export { ExpirationBanner } from './ExpirationBanner';
 export { CountdownTimer } from './CountdownTimer';
 export { GalleryLayout } from './GalleryLayout';
-export { PhotoFilterBar } from './PhotoFilterBar';
+export { PhotoFilterBar } from './PhotoFilterBar';
+export { UserPhotoUpload } from './UserPhotoUpload';