fix: GUI improvements and fixes

- Enable JSON module imports in TypeScript config to fix frontend version display
- Fix archive page showing '00' instead of '0' for empty photo counts
- Add null safety to archive photo count calculation
- Update email processor to reinitialize on config changes
- Add auto-retry for failed email transporter initialization

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

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

frontend/src/components/admin/VersionInfo.tsx

@@ -3,9 +3,10 @@ import { useQuery } from '@tanstack/react-query';
 import { useTranslation } from 'react-i18next';
 import { Info } from 'lucide-react';
 import { api } from '../../config/api';
+import packageJson from '../../../package.json';
 
 // Frontend version from package.json
-const FRONTEND_VERSION = '1.0.0';
+const FRONTEND_VERSION = packageJson.version;
 
 interface SystemVersion {
   backend: string;

frontend/src/components/common/Input.tsx

@@ -58,7 +58,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {...props}
           />
           {rightIcon && (
-            <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <div className="absolute inset-y-0 right-0 pr-3 flex items-center">
               <span className="text-neutral-500">{rightIcon}</span>
             </div>
           )}

frontend/src/i18n/locales/de.json

@@ -264,6 +264,7 @@
     "adminEmailHelp": "Erhält Systembenachrichtigungen und Archivbestätigungen",
     "securityAccess": "Sicherheit & Zugriff",
     "galleryPassword": "Galerie-Passwort",
+    "passwordHelperText": "Sie können Datumsangaben wie \"04.07.2025\" oder beliebigen Text mit mindestens 6 Zeichen verwenden",
     "passwordPlaceholder": "Sicheres Passwort eingeben",
     "confirmPassword": "Passwort bestätigen",
     "showPasswords": "Passwörter anzeigen",
@@ -363,7 +364,13 @@
     "eventsSelected_plural": "{{count}} Veranstaltungen ausgewählt",
     "bulkArchive": "Archivieren",
     "confirmBulkArchive": "Sind Sie sicher, dass Sie {{count}} Veranstaltung(en) archivieren möchten?",
-    "confirmBulkArchiveDescription": "Diese Aktion kann nicht rückgängig gemacht werden. Archivierte Veranstaltungen sind nicht mehr öffentlich zugänglich."
+    "confirmBulkArchiveDescription": "Diese Aktion kann nicht rückgängig gemacht werden. Archivierte Veranstaltungen sind nicht mehr öffentlich zugänglich.",
+    "stats": {
+      "totalEvents": "Gesamtveranstaltungen",
+      "activeEvents": "Aktive Veranstaltungen",
+      "totalPhotos": "Gesamtfotos",
+      "expiringEvents": "Bald ablaufend"
+    }
   },
   "settings": {
     "title": "Systemeinstellungen",

frontend/src/i18n/locales/en.json

@@ -282,6 +282,7 @@
     "adminEmailHelp": "Will receive system notifications and archive confirmations",
     "securityAccess": "Security & Access",
     "galleryPassword": "Gallery Password",
+    "passwordHelperText": "You can use dates like \"04.07.2025\" or any text with 6+ characters",
     "confirmPassword": "Confirm Password",
     "showPasswords": "Show passwords",
     "gallerySettings": "Gallery Settings",
@@ -340,6 +341,12 @@
     "expires": "Expires",
     "actions": "Actions",
     "noEventsFound": "No events found",
+    "stats": {
+      "totalEvents": "Total Events",
+      "activeEvents": "Active Events",
+      "totalPhotos": "Total Photos",
+      "expiringEvents": "Expiring Soon"
+    },
     "viewDetails": "View Details",
     "archiveEventAction": "Archive Event",
     "downloadArchiveAction": "Download Archive",

frontend/src/pages/admin/ArchivesPage.tsx

@@ -169,7 +169,7 @@ export const ArchivesPage: React.FC = () => {
             <div>
               <p className="text-sm text-neutral-600">{t('archives.totalPhotos')}</p>
               <p className="text-2xl font-bold text-neutral-900">
-                {archives.reduce((sum, a) => sum + a.photoCount, 0).toLocaleString()}
+                {archives.reduce((sum, a) => sum + (a.photoCount || 0), 0).toLocaleString()}
               </p>
             </div>
             <FileArchive className="w-8 h-8 text-green-600" />

frontend/src/pages/admin/EventsListPage.tsx

@@ -9,7 +9,11 @@ import {
   ExternalLink,
   Edit,
   Download,
-  Trash2
+  Trash2,
+  Calendar,
+  Users,
+  Image,
+  Activity
 } from 'lucide-react';
 import { parseISO, differenceInDays } from 'date-fns';
 import { toast } from 'react-toastify';
@@ -232,6 +236,59 @@ export const EventsListPage: React.FC = () => {
           </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">