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 <[email protected]>
This commit is contained in:
Claude
@@ -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>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user