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/pages/admin/AdminDashboard.tsx

@@ -2,10 +2,7 @@ import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { 
   Calendar, 
-  Users, 
-  Archive, 
   AlertTriangle,
-  TrendingUp,
   Download,
   Eye,
   Clock,
@@ -13,8 +10,9 @@ import {
   HardDrive,
   Image
 } from 'lucide-react';
-import { format, differenceInDays, parseISO, formatDistanceToNow } from 'date-fns';
+import { differenceInDays, parseISO } from 'date-fns';
 import { useTranslation } from 'react-i18next';
+import { useLocalizedDate } from '../../hooks/useLocalizedDate';
 
 import { Button, Card, Loading } from '../../components/common';
 import { useQuery } from '@tanstack/react-query';
@@ -32,6 +30,7 @@ interface StatCard {
 export const AdminDashboard: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const { format, formatDistanceToNow } = useLocalizedDate();
 
   // Fetch dashboard statistics
   const { data: dashboardStats, isLoading: statsLoading } = useQuery({
@@ -187,7 +186,7 @@ export const AdminDashboard: React.FC = () => {
                       <div>
                         <h3 className="font-medium text-neutral-900">{event.event_name}</h3>
                         <p className="text-sm text-neutral-600">
-                          {format(parseISO(event.event_date), 'MMM d, yyyy')}
+                          {format(parseISO(event.event_date), 'PP')}
                         </p>
                       </div>
                       <div className="text-right">
@@ -195,7 +194,7 @@ export const AdminDashboard: React.FC = () => {
                           {t('admin.daysLeft', { count: daysLeft })}
                         </p>
                         <p className="text-xs text-neutral-500">
-                          {t('gallery.expires')} {format(parseISO(event.expires_at), 'MMM d')}
+                          {t('gallery.expires')} {format(parseISO(event.expires_at), 'PP')}
                         </p>
                       </div>
                     </div>
@@ -273,44 +272,6 @@ export const AdminDashboard: React.FC = () => {
         </Card>
       </div>
 
-      {/* Quick Actions */}
-      <Card padding="md" className="mt-6">
-        <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('admin.quickActions')}</h2>
-        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
-          <Button
-            variant="outline"
-            leftIcon={<Plus className="w-4 h-4" />}
-            onClick={() => navigate('/admin/events/new')}
-            className="justify-center"
-          >
-            {t('events.createEvent')}
-          </Button>
-          <Button
-            variant="outline"
-            leftIcon={<Archive className="w-4 h-4" />}
-            onClick={() => navigate('/admin/archives')}
-            className="justify-center"
-          >
-            {t('admin.viewArchives')}
-          </Button>
-          <Button
-            variant="outline"
-            leftIcon={<TrendingUp className="w-4 h-4" />}
-            onClick={() => navigate('/admin/analytics')}
-            className="justify-center"
-          >
-            {t('admin.analytics')}
-          </Button>
-          <Button
-            variant="outline"
-            leftIcon={<Users className="w-4 h-4" />}
-            onClick={() => navigate('/admin/settings')}
-            className="justify-center"
-          >
-            {t('navigation.settings')}
-          </Button>
-        </div>
-      </Card>
     </div>
   );
 };

frontend/src/pages/admin/CreateEventPage.tsx

@@ -6,14 +6,17 @@ import {
   Lock,
   Clock,
   ArrowLeft,
-  Info
+  Info,
+  Upload
 } from 'lucide-react';
 import { format, addDays } from 'date-fns';
 import { toast } from 'react-toastify';
 
 import { Button, Input, Card } from '../../components/common';
-import { useMutation } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { eventsService } from '../../services/events.service';
+import { categoriesService } from '../../services/categories.service';
+import { useTranslation } from 'react-i18next';
 
 interface FormData {
   event_type: string;
@@ -26,6 +29,8 @@ interface FormData {
   welcome_message: string;
   color_theme: string;
   expires_in_days: number;
+  allow_user_uploads: boolean;
+  upload_category_id: number | null;
 }
 
 const EVENT_TYPES = [
@@ -100,6 +105,7 @@ const COLOR_THEMES = [
 
 export const CreateEventPage: React.FC = () => {
   const navigate = useNavigate();
+  const { t } = useTranslation();
   const isMountedRef = useRef(true);
   
   useEffect(() => {
@@ -119,11 +125,19 @@ export const CreateEventPage: React.FC = () => {
     welcome_message: '',
     color_theme: 'default',
     expires_in_days: 30,
+    allow_user_uploads: false,
+    upload_category_id: null,
   });
   
   const [errors, setErrors] = useState<Partial<Record<keyof FormData, string>>>({});
   const [showPassword, setShowPassword] = useState(false);
 
+  // Fetch categories for user upload selection
+  const { data: categories } = useQuery({
+    queryKey: ['categories', 'global'],
+    queryFn: () => categoriesService.getGlobalCategories()
+  });
+
   const createMutation = useMutation({
     mutationFn: eventsService.createEvent,
     onSuccess: (data) => {
@@ -215,6 +229,8 @@ export const CreateEventPage: React.FC = () => {
       welcome_message: formData.welcome_message || '',
       color_theme: selectedTheme ? JSON.stringify(selectedTheme.theme) : undefined,
       expiration_days: formData.expires_in_days,
+      allow_user_uploads: formData.allow_user_uploads,
+      upload_category_id: formData.upload_category_id,
     });
   };
 
@@ -482,6 +498,66 @@ export const CreateEventPage: React.FC = () => {
           </div>
         </Card>
 
+        {/* User Upload Settings */}
+        <Card padding="md" className="mb-6">
+          <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.userUploads')}</h2>
+          
+          <div className="space-y-4">
+            {/* Allow User Uploads */}
+            <div>
+              <label className="flex items-center">
+                <input
+                  type="checkbox"
+                  checked={formData.allow_user_uploads}
+                  onChange={(e) => setFormData(prev => ({ ...prev, allow_user_uploads: e.target.checked }))}
+                  className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
+                />
+                <span className="ml-2 text-sm text-neutral-700">{t('events.allowUserUploads')}</span>
+              </label>
+              <p className="text-xs text-neutral-500 mt-1 ml-6">
+                {t('events.allowUserUploadsHelp')}
+              </p>
+            </div>
+
+            {/* Upload Category Selection */}
+            {formData.allow_user_uploads && (
+              <div>
+                <label htmlFor="upload_category" className="block text-sm font-medium text-neutral-700 mb-1">
+                  {t('events.uploadCategory')}
+                </label>
+                <select
+                  id="upload_category"
+                  value={formData.upload_category_id || ''}
+                  onChange={(e) => setFormData(prev => ({ 
+                    ...prev, 
+                    upload_category_id: e.target.value ? parseInt(e.target.value) : null 
+                  }))}
+                  className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                >
+                  <option value="">{t('events.selectCategory')}</option>
+                  {categories?.map((category: any) => (
+                    <option key={category.id} value={category.id}>
+                      {category.name}
+                    </option>
+                  ))}
+                </select>
+                <p className="text-xs text-neutral-500 mt-1">
+                  {t('events.uploadCategoryHelp')}
+                </p>
+              </div>
+            )}
+
+            {formData.allow_user_uploads && (
+              <div className="mt-2 p-3 bg-amber-50 rounded-lg flex items-start gap-2">
+                <Upload className="w-5 h-5 text-amber-600 flex-shrink-0" />
+                <div className="text-sm text-amber-800">
+                  <p>{t('events.userUploadWarning')}</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </Card>
+
         {/* Submit Buttons */}
         <div className="flex justify-end gap-3">
           <Button

frontend/src/pages/admin/EventDetailsPage.tsx

@@ -48,6 +48,8 @@ export const EventDetailsPage: React.FC = () => {
     welcome_message: '',
     color_theme: '',
     expires_at: '',
+    allow_user_uploads: false,
+    upload_category_id: null as number | null,
   });
   const [copiedLink, setCopiedLink] = useState(false);
   const [showPhotoUpload, setShowPhotoUpload] = useState(false);
@@ -151,6 +153,8 @@ export const EventDetailsPage: React.FC = () => {
       welcome_message: event.welcome_message || '',
       color_theme: event.color_theme || '',
       expires_at: format(parseISO(event.expires_at), 'yyyy-MM-dd'),
+      allow_user_uploads: event.allow_user_uploads || false,
+      upload_category_id: event.upload_category_id || null,
     });
     setIsEditing(true);
   };
@@ -160,6 +164,8 @@ export const EventDetailsPage: React.FC = () => {
       welcome_message: editForm.welcome_message || undefined,
       color_theme: editForm.color_theme || undefined,
       expires_at: editForm.expires_at,
+      allow_user_uploads: editForm.allow_user_uploads,
+      upload_category_id: editForm.upload_category_id,
     });
   };
 
@@ -368,6 +374,47 @@ export const EventDetailsPage: React.FC = () => {
                     min={format(new Date(), 'yyyy-MM-dd')}
                   />
                 </div>
+                
+                <div>
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      checked={editForm.allow_user_uploads}
+                      onChange={(e) => setEditForm(prev => ({ ...prev, allow_user_uploads: e.target.checked }))}
+                      className="w-4 h-4 text-primary-600 border-neutral-300 rounded focus:ring-primary-500"
+                    />
+                    <span className="ml-2 text-sm text-neutral-700">{t('events.allowUserUploads')}</span>
+                  </label>
+                  <p className="text-xs text-neutral-500 mt-1 ml-6">
+                    {t('events.allowUserUploadsHelp')}
+                  </p>
+                </div>
+                
+                {editForm.allow_user_uploads && (
+                  <div>
+                    <label className="block text-sm font-medium text-neutral-700 mb-1">
+                      {t('events.uploadCategory')}
+                    </label>
+                    <select
+                      value={editForm.upload_category_id || ''}
+                      onChange={(e) => setEditForm(prev => ({ 
+                        ...prev, 
+                        upload_category_id: e.target.value ? parseInt(e.target.value) : null 
+                      }))}
+                      className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
+                    >
+                      <option value="">{t('events.selectCategory')}</option>
+                      {categories?.map(category => (
+                        <option key={category.id} value={category.id}>
+                          {category.name}
+                        </option>
+                      ))}
+                    </select>
+                    <p className="text-xs text-neutral-500 mt-1">
+                      {t('events.uploadCategoryHelp')}
+                    </p>
+                  </div>
+                )}
               </div>
             ) : (
               <dl className="space-y-4">
@@ -410,6 +457,28 @@ export const EventDetailsPage: React.FC = () => {
                     </dd>
                   </div>
                 </div>
+                
+                <div>
+                  <dt className="text-sm font-medium text-neutral-500">{t('events.userUploads')}</dt>
+                  <dd className="mt-1 text-sm text-neutral-900">
+                    {event.allow_user_uploads ? (
+                      <div className="space-y-1">
+                        <span className="inline-flex items-center px-2 py-1 text-xs font-medium text-green-700 bg-green-100 rounded">
+                          {t('common.yes')}
+                        </span>
+                        {event.upload_category_id && (
+                          <p className="text-xs text-neutral-600">
+                            {t('events.uploadCategory')}: {categories.find(c => c.id === event.upload_category_id)?.name || 'N/A'}
+                          </p>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="inline-flex items-center px-2 py-1 text-xs font-medium text-neutral-700 bg-neutral-100 rounded">
+                        {t('common.no')}
+                      </span>
+                    )}
+                  </dd>
+                </div>
               </dl>
             )}
           </Card>

frontend/src/pages/admin/SettingsPage.tsx

@@ -5,7 +5,12 @@ import {
   Globe,
   Key,
   AlertCircle,
-  Image
+  Image,
+  Server,
+  CheckCircle,
+  Clock,
+  HardDrive,
+  Activity
 } from 'lucide-react';
 import { toast } from 'react-toastify';
 
@@ -16,7 +21,7 @@ import { settingsService } from '../../services/settings.service';
 import { useTranslation } from 'react-i18next';
 
 export const SettingsPage: React.FC = () => {
-  const [activeTab, setActiveTab] = useState<'general' | 'storage' | 'security' | 'categories'>('general');
+  const [activeTab, setActiveTab] = useState<'general' | 'status' | 'security' | 'categories'>('general');
   const queryClient = useQueryClient();
   const { t, i18n } = useTranslation();
 
@@ -30,7 +35,15 @@ export const SettingsPage: React.FC = () => {
   const { data: storageInfo } = useQuery({
     queryKey: ['admin-storage-info'],
     queryFn: () => settingsService.getStorageInfo(),
-    enabled: activeTab === 'storage'
+    enabled: activeTab === 'status'
+  });
+
+  // Fetch system status
+  const { data: systemStatus } = useQuery({
+    queryKey: ['system-status'],
+    queryFn: () => settingsService.getSystemStatus(),
+    enabled: activeTab === 'status',
+    refetchInterval: 30000 // Refresh every 30 seconds
   });
 
   // General settings state
@@ -158,14 +171,14 @@ export const SettingsPage: React.FC = () => {
             {t('settings.general.title')}
           </button>
           <button
-            onClick={() => setActiveTab('storage')}
+            onClick={() => setActiveTab('status')}
             className={`py-2 px-1 border-b-2 font-medium text-sm transition-colors ${
-              activeTab === 'storage'
+              activeTab === 'status'
                 ? 'border-primary-600 text-primary-600'
                 : 'border-transparent text-neutral-500 hover:text-neutral-700'
             }`}
           >
-            {t('settings.storage.title')}
+            {t('settings.systemStatus.title')}
           </button>
           <button
             onClick={() => setActiveTab('security')}
@@ -339,76 +352,194 @@ export const SettingsPage: React.FC = () => {
         </div>
       )}
 
-      {/* Storage Tab */}
-      {activeTab === 'storage' && storageInfo && (
+      {/* System Status Tab */}
+      {activeTab === 'status' && (
         <div className="space-y-6">
-          <Card padding="md">
-            <h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.storage.overview')}</h2>
-            
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
-              <div className="bg-neutral-50 rounded-lg p-4">
-                <p className="text-sm text-neutral-600">{t('settings.storage.totalUsed')}</p>
-                <p className="text-2xl font-bold text-neutral-900">
-                  {settingsService.formatBytes(storageInfo.total_used)}
-                </p>
+          {/* Storage Overview */}
+          {storageInfo && (
+            <Card padding="md">
+              <h2 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
+                <HardDrive className="w-5 h-5" />
+                {t('settings.systemStatus.storageOverview')}
+              </h2>
+              
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
+                <div className="bg-neutral-50 rounded-lg p-4">
+                  <p className="text-sm text-neutral-600">{t('settings.storage.totalUsed')}</p>
+                  <p className="text-2xl font-bold text-neutral-900">
+                    {settingsService.formatBytes(storageInfo.total_used)}
+                  </p>
+                </div>
+                <div className="bg-neutral-50 rounded-lg p-4">
+                  <p className="text-sm text-neutral-600">{t('settings.storage.archiveStorage')}</p>
+                  <p className="text-2xl font-bold text-neutral-900">
+                    {settingsService.formatBytes(storageInfo.archive_storage)}
+                  </p>
+                </div>
+                <div className="bg-neutral-50 rounded-lg p-4">
+                  <p className="text-sm text-neutral-600">{t('settings.storage.storageLimit')}</p>
+                  <p className="text-2xl font-bold text-neutral-900">
+                    {settingsService.formatBytes(storageInfo.storage_limit)}
+                  </p>
+                </div>
               </div>
-              <div className="bg-neutral-50 rounded-lg p-4">
-                <p className="text-sm text-neutral-600">{t('settings.storage.archiveStorage')}</p>
-                <p className="text-2xl font-bold text-neutral-900">
-                  {settingsService.formatBytes(storageInfo.archive_storage)}
-                </p>
-              </div>
-              <div className="bg-neutral-50 rounded-lg p-4">
-                <p className="text-sm text-neutral-600">{t('settings.storage.storageLimit')}</p>
-                <p className="text-2xl font-bold text-neutral-900">
-                  {settingsService.formatBytes(storageInfo.storage_limit)}
-                </p>
-              </div>
-            </div>
 
-            <div className="mb-4">
-              <div className="flex justify-between text-sm mb-1">
-                <span className="text-neutral-600">{t('settings.storage.storageUsage')}</span>
-                <span className="font-medium">
-                  {Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
-                </span>
+              <div className="mb-4">
+                <div className="flex justify-between text-sm mb-1">
+                  <span className="text-neutral-600">{t('settings.storage.storageUsage')}</span>
+                  <span className="font-medium">
+                    {Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
+                  </span>
+                </div>
+                <div className="w-full bg-neutral-200 rounded-full h-3">
+                  <div
+                    className="bg-primary-600 h-3 rounded-full transition-all"
+                    style={{ 
+                      width: `${Math.min((storageInfo.total_used / storageInfo.storage_limit) * 100, 100)}%` 
+                    }}
+                  />
+                </div>
               </div>
-              <div className="w-full bg-neutral-200 rounded-full h-3">
-                <div
-                  className="bg-primary-600 h-3 rounded-full transition-all"
-                  style={{ 
-                    width: `${Math.min((storageInfo.total_used / storageInfo.storage_limit) * 100, 100)}%` 
-                  }}
-                />
-              </div>
-            </div>
+            </Card>
+          )}
 
-            <div className="mt-6">
-              <h3 className="text-sm font-semibold text-neutral-900 mb-3">{t('settings.storage.storageByEvent')}</h3>
-              <div className="space-y-2">
-                {storageInfo.storage_by_event.slice(0, 10).map((event) => (
-                  <div key={event.id} className="flex items-center justify-between py-2 border-b border-neutral-100">
-                    <span className="text-sm text-neutral-700">{event.event_name}</span>
-                    <span className="text-sm font-medium text-neutral-900">
-                      {settingsService.formatBytes(event.size)}
-                    </span>
+          {/* System Information */}
+          {systemStatus && (
+            <>
+              <Card padding="md">
+                <h2 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
+                  <Server className="w-5 h-5" />
+                  {t('settings.systemStatus.systemInfo')}
+                </h2>
+                
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <p className="text-sm text-neutral-600">{t('settings.systemStatus.platform')}</p>
+                    <p className="font-semibold">{systemStatus.system.platform}</p>
                   </div>
-                ))}
-              </div>
-            </div>
-          </Card>
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <p className="text-sm text-neutral-600">{t('settings.systemStatus.nodeVersion')}</p>
+                    <p className="font-semibold">{systemStatus.system.nodeVersion}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <p className="text-sm text-neutral-600">{t('settings.systemStatus.uptime')}</p>
+                    <p className="font-semibold">{Math.floor(systemStatus.system.uptime / 3600)}h {Math.floor((systemStatus.system.uptime % 3600) / 60)}m</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <p className="text-sm text-neutral-600">{t('settings.systemStatus.cpuCores')}</p>
+                    <p className="font-semibold">{systemStatus.system.cpu.cores}</p>
+                  </div>
+                </div>
 
-          <Card padding="md">
-            <div className="flex items-start gap-3">
-              <Database className="w-5 h-5 text-amber-600 flex-shrink-0" />
-              <div>
-                <h3 className="text-sm font-semibold text-amber-900">{t('settings.storage.storageManagement')}</h3>
-                <p className="text-sm text-amber-700 mt-1">
-                  {t('settings.storage.storageManagementHelp')}
-                </p>
-              </div>
+                <div className="mt-4">
+                  <h3 className="text-sm font-semibold text-neutral-900 mb-2">{t('settings.systemStatus.memoryUsage')}</h3>
+                  <div className="mb-2">
+                    <div className="flex justify-between text-sm mb-1">
+                      <span className="text-neutral-600">{t('settings.systemStatus.memoryUsed')}</span>
+                      <span className="font-medium">
+                        {settingsService.formatBytes(systemStatus.system.memory.used)} / {settingsService.formatBytes(systemStatus.system.memory.total)}
+                      </span>
+                    </div>
+                    <div className="w-full bg-neutral-200 rounded-full h-2">
+                      <div
+                        className="bg-blue-600 h-2 rounded-full transition-all"
+                        style={{ 
+                          width: `${Math.round((systemStatus.system.memory.used / systemStatus.system.memory.total) * 100)}%` 
+                        }}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+
+              <Card padding="md">
+                <h2 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
+                  <Database className="w-5 h-5" />
+                  {t('settings.systemStatus.databaseInfo')}
+                </h2>
+                
+                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4">
+                  <div className="bg-neutral-50 rounded-lg p-3 text-center">
+                    <p className="text-2xl font-bold text-neutral-900">{systemStatus.database.tables.events}</p>
+                    <p className="text-xs text-neutral-600">{t('navigation.events')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-3 text-center">
+                    <p className="text-2xl font-bold text-neutral-900">{systemStatus.database.tables.photos}</p>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.photos')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-3 text-center">
+                    <p className="text-2xl font-bold text-neutral-900">{systemStatus.database.tables.admins}</p>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.admins')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-3 text-center">
+                    <p className="text-2xl font-bold text-neutral-900">{systemStatus.database.tables.categories}</p>
+                    <p className="text-xs text-neutral-600">{t('settings.categories.title')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-3 text-center">
+                    <p className="text-2xl font-bold text-neutral-900">{settingsService.formatBytes(systemStatus.database.size)}</p>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.dbSize')}</p>
+                  </div>
+                </div>
+              </Card>
+
+              <Card padding="md">
+                <h2 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
+                  <Activity className="w-5 h-5" />
+                  {t('settings.systemStatus.services')}
+                </h2>
+                
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-sm font-medium text-neutral-700">{t('settings.systemStatus.fileWatcher')}</p>
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                    </div>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.fileWatcherDesc')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-sm font-medium text-neutral-700">{t('settings.systemStatus.expirationChecker')}</p>
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                    </div>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.expirationCheckerDesc')}</p>
+                  </div>
+                  <div className="bg-neutral-50 rounded-lg p-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <p className="text-sm font-medium text-neutral-700">{t('settings.systemStatus.emailProcessor')}</p>
+                      <CheckCircle className="w-5 h-5 text-green-600" />
+                    </div>
+                    <p className="text-xs text-neutral-600">{t('settings.systemStatus.emailProcessorDesc')}</p>
+                  </div>
+                </div>
+
+                <div className="mt-4 p-4 bg-blue-50 rounded-lg">
+                  <h3 className="text-sm font-semibold text-blue-900 mb-2">{t('settings.systemStatus.emailQueue')}</h3>
+                  <div className="grid grid-cols-3 gap-4 text-sm">
+                    <div>
+                      <span className="text-blue-700">{t('settings.systemStatus.pending')}:</span>
+                      <span className="ml-2 font-semibold text-blue-900">{systemStatus.emailQueue.pending}</span>
+                    </div>
+                    <div>
+                      <span className="text-green-700">{t('settings.systemStatus.sent')}:</span>
+                      <span className="ml-2 font-semibold text-green-900">{systemStatus.emailQueue.sent}</span>
+                    </div>
+                    <div>
+                      <span className="text-red-700">{t('settings.systemStatus.failed')}:</span>
+                      <span className="ml-2 font-semibold text-red-900">{systemStatus.emailQueue.failed}</span>
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </>
+          )}
+
+          {/* Last update time */}
+          {systemStatus && (
+            <div className="text-xs text-neutral-500 text-right flex items-center justify-end gap-1">
+              <Clock className="w-3 h-3" />
+              {t('settings.systemStatus.lastUpdate')}: {new Date(systemStatus.timestamp).toLocaleString()}
             </div>
-          </Card>
+          )}
         </div>
       )}