paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Complete translation implementation for admin interface

Browse Source 
- Fixed all hardcoded strings in admin components to use t() function
- Updated BrandingPage.tsx to use translations for watermark settings
- Updated EventsListPage.tsx to use translations for status labels
- Added missing translation keys to both en.json and de.json
- Fixed translations for:
  - System settings (general, storage, categories tabs)
  - Branding page (watermark settings, positions, opacity)
  - Email configuration and templates
  - Event list view (status labels, filters, actions)
  - Event detail view (all sections properly translated)
- Added comprehensive German translations for all new keys
- Ensured consistent translation usage across all admin pages

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
paul
2025-07-08 17:41:02 +02:00
parent d594d00227
commit 1bc9b547c7
11 changed files with 491 additions and 356 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/admin/PhotoUpload.tsx
+12 -10
View File
@@ -6,6 +6,7 @@ import { api } from '../../config/api';
import { toast } from 'react-toastify';
import { useQuery } from '@tanstack/react-query';
import { categoriesService } from '../../services/categories.service';
import { useTranslation } from 'react-i18next';
interface PhotoUploadProps {
eventId: number;
@@ -13,6 +14,7 @@ interface PhotoUploadProps {
}
export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadComplete }) => {
const { t } = useTranslation();
const [isUploading, setIsUploading] = useState(false);
const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const [uploadProgress, setUploadProgress] = useState(0);
@@ -79,7 +81,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
}
// Show success message
toast.success(`Successfully uploaded ${selectedFiles.length} photo${selectedFiles.length > 1 ? 's' : ''}`);
toast.success(t('toast.uploadSuccess'));
// Call callback
if (onUploadComplete) {
@@ -87,7 +89,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
}
} catch (error: any) {
console.error('Upload error:', error);
toast.error(error.response?.data?.error || 'Failed to upload photos');
toast.error(error.response?.data?.error || t('toast.uploadError'));
} finally {
setIsUploading(false);
setUploadProgress(0);
@@ -105,17 +107,17 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
{/* Category Selection */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Photo Category
{t('upload.photoCategory')}
</label>
<select
value={selectedCategoryId || ''}
onChange={(e) => setSelectedCategoryId(e.target.value ? Number(e.target.value) : null)}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
>
<option value="">No category</option>
<option value="">{t('upload.noCategory')}</option>
{categories.map((category) => (
<option key={category.id} value={category.id}>
{category.name} {!category.is_global && '(Event specific)'}
{category.name} {!category.is_global && t('upload.eventSpecific')}
</option>
))}
</select>
@@ -132,10 +134,10 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
>
<Upload className="w-12 h-12 mx-auto text-neutral-400 mb-4" />
<p className="text-neutral-700 font-medium mb-1">
Click to upload or drag and drop
{t('upload.clickToUpload')}
</p>
<p className="text-sm text-neutral-500">
JPEG, PNG or WebP (max 50MB per file)
{t('upload.fileRequirements')}
</p>
<input
ref={fileInputRef}
@@ -151,7 +153,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
{selectedFiles.length > 0 && (
<div className="space-y-2">
<p className="text-sm font-medium text-neutral-700">
Selected files ({selectedFiles.length})
{t('upload.selectedFiles')} ({selectedFiles.length})
</p>
<div className="max-h-48 overflow-y-auto space-y-2">
{selectedFiles.map((file, index) => (
@@ -193,7 +195,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
disabled={selectedFiles.length === 0 || isUploading}
leftIcon={isUploading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Upload className="w-4 h-4" />}
>
{isUploading ? 'Uploading...' : `Upload ${selectedFiles.length} Photo${selectedFiles.length !== 1 ? 's' : ''}`}
{isUploading ? t('upload.uploading') : t('common.upload') + ` ${selectedFiles.length} ${t(selectedFiles.length === 1 ? 'common.photo' : 'common.photos')}`}
</Button>
</div>
@@ -201,7 +203,7 @@ export const PhotoUpload: React.FC<PhotoUploadProps> = ({ eventId, onUploadCompl
{isUploading && (
<div className="mt-4">
<div className="flex justify-between text-sm text-neutral-600 mb-1">
<span>Uploading...</span>
<span>{t('upload.uploading')}</span>
<span>{uploadProgress}%</span>
</div>
<div className="w-full bg-neutral-200 rounded-full h-2">
frontend/src/i18n/locales/de.json
+36 -1
View File
@@ -235,7 +235,42 @@
"days365": "1 Jahr",
"createNewEvent": "Neue Veranstaltung erstellen",
"setupNewGallery": "Richten Sie eine neue Fotogalerie für Ihre Veranstaltung ein",
"adminNotificationEmail": "Admin-Benachrichtigungs-E-Mail"
"adminNotificationEmail": "Admin-Benachrichtigungs-E-Mail",
"inactive": "Inaktiv",
"expired": "Abgelaufen",
"daysLeft": "{{count}} Tag verbleibend",
"daysLeft_plural": "{{count}} Tage verbleibend",
"subtitle": "Verwalten Sie Ihre Fotogalerien und Veranstaltungen",
"loadingEvents": "Veranstaltungen werden geladen...",
"failedToLoadEvents": "Veranstaltungen konnten nicht geladen werden",
"tryAgain": "Erneut versuchen",
"bulkArchiveSuccess": "{{count}} Veranstaltungen erfolgreich archiviert",
"bulkArchivePartial": "{{success}} Veranstaltungen archiviert, {{failed}} fehlgeschlagen",
"searchEventsPlaceholder": "Veranstaltungen suchen...",
"all": "Alle",
"activeFilter": "Aktiv",
"archivedFilter": "Archiviert",
"sortByName": "Nach Name",
"sortByDate": "Nach Datum",
"sortByExpiration": "Nach Ablauf",
"event": "Veranstaltung",
"type": "Typ",
"date": "Datum",
"status": "Status",
"photosCount": "Fotos",
"moreActions": "Weitere Aktionen",
"copyLinkTooltip": "Link kopieren",
"viewGalleryTooltip": "Galerie anzeigen",
"uploadPhotosTooltip": "Fotos hochladen",
"editTooltip": "Bearbeiten",
"archiveTooltip": "Archivieren",
"noEvents": "Keine Veranstaltungen gefunden",
"noEventsDescription": "Erstellen Sie Ihre erste Veranstaltung, um zu beginnen.",
"eventsSelected": "{{count}} Veranstaltung ausgewählt",
"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."
},
"settings": {
"title": "Systemeinstellungen",
frontend/src/i18n/locales/en.json
+92 -3
View File
@@ -235,7 +235,67 @@
"days30": "30 days",
"days60": "60 days",
"days90": "90 days",
"days365": "1 year"
"days365": "1 year",
"inactive": "Inactive",
"expired": "Expired",
"daysLeft": "{{count}}d left",
"daysLeft_plural": "{{count}}d left",
"subtitle": "Manage your photo galleries and events",
"loadingEvents": "Loading events...",
"failedToLoadEvents": "Failed to load events",
"tryAgain": "Try Again",
"bulkArchiveSuccess": "Successfully archived {{count}} events",
"bulkArchivePartial": "Archived {{success}} events, {{failed}} failed",
"searchEventsPlaceholder": "Search events...",
"all": "All",
"expiring": "Expiring",
"eventsSelected": "{{count}} event selected",
"eventsSelected_plural": "{{count}} events selected",
"clear": "Clear",
"archiveSelected": "Archive Selected",
"event": "Event",
"type": "Type",
"date": "Date",
"status": "Status",
"expires": "Expires",
"actions": "Actions",
"noEventsFound": "No events found",
"viewDetails": "View Details",
"archiveEventAction": "Archive Event",
"downloadArchiveAction": "Download Archive",
"deleteEvent": "Delete Event",
"deleteEventConfirm": "Are you sure you want to delete this event?",
"downloadArchiveSoon": "Download archive coming soon",
"failedToLoadEvents": "Failed to load events",
"tryAgain": "Try Again",
"eventExpiredMessage": "This event has expired",
"guestsCannotAccessGallery": "Guests can no longer access the gallery. Consider archiving this event.",
"warningEmailsHaveBeenSent": "Warning emails have been sent to the host.",
"extendSevenDays": "Extend 7 Days",
"overview": "Overview",
"eventInformation": "Event Information",
"welcomeMessageLabel": "Welcome Message",
"noWelcomeMessageSet": "No welcome message set",
"hostEmail": "Host Email",
"adminEmail": "Admin Email",
"createdOn": "Created",
"expires": "Expires",
"daysLeft": "({{days}} days left)",
"daysLeft_plural": "({{days}} days left)",
"shareLink": "Share Link",
"copy": "Copy",
"copied": "Copied!",
"uploadPhotos": "Upload Photos",
"photoCategories": "Photo Categories",
"organizingPhotosInfo": "Organize your photos into categories. Categories help guests navigate and find specific types of photos.",
"categoriesTip": "Tip: Categories are specific to each event. You can create custom categories like \"Ceremony\", \"Reception\", \"Portraits\", etc.",
"archiveStatusTitle": "Archive Status",
"archivedOn": "Archived On",
"downloadingArchive": "Downloading {{name}} archive...",
"downloadStarted": "Download started",
"failedToDownloadArchive": "Failed to download archive",
"statisticsNotAvailable": "No statistics available yet",
"photoFilters": "Photo Filters"
},
"settings": {
"title": "System Settings",
@@ -448,7 +508,9 @@
"oopsSomethingWentWrong": "Oops! Something went wrong",
"unexpectedError": "We encountered an unexpected error. Don't worry, your data is safe.",
"goToHomepage": "Go to Homepage",
"errorDetails": "Error Details"
"errorDetails": "Error Details",
"requiredFields": "Please fill in all required fields",
"enterTestEmail": "Please enter a test email address"
},
"legal": {
"impressum": "Legal Notice",
@@ -509,7 +571,34 @@
"saveConfiguration": "Save Configuration",
"emailTemplates": "Email Templates",
"templateVariables": "Available Variables",
"previewTemplate": "Preview Template"
"previewTemplate": "Preview Template",
"smtpSettings": "SMTP Settings",
"testEmailSuccess": "Test email sent successfully",
"saveSmtpSettings": "Save SMTP Settings",
"testEmailSection": "Test Email",
"beforeTesting": "Before testing:",
"saveSmtpFirst": "Save your SMTP settings first",
"ensureFirewall": "Ensure your firewall allows outbound SMTP",
"gmailAppPassword": "For Gmail, use an app-specific password",
"testEmailAddressLabel": "Test Email Address",
"sendTestEmailButton": "Send Test Email",
"commonSmtpSettings": "Common SMTP Settings:",
"editTemplate": "Edit Template",
"templateName": "Template Name",
"subjectLine": "Subject Line",
"emailBody": "Email Body",
"preview": "Preview",
"saveChanges": "Save Changes",
"templates": "Templates",
"variableHelp": "Use these variables in your template. They will be replaced with actual values when emails are sent.",
"port": "Port",
"security": "Security",
"username": "Username",
"password": "Password",
"enterPassword": "Enter password",
"fromEmail": "From Email",
"fromName": "From Name",
"required": "required"
},
"cms": {
"title": "CMS Pages",
frontend/src/pages/admin/AnalyticsPage.tsx
+32 -30
View File
@@ -16,6 +16,7 @@ import { format, parseISO } from 'date-fns';
import { Button, Card, Loading } from '../../components/common';
import { useQuery } from '@tanstack/react-query';
import { adminService } from '../../services/admin.service';
import { useTranslation } from 'react-i18next';
// Map API response to component format
interface ComponentAnalyticsData {
@@ -47,6 +48,7 @@ interface ComponentAnalyticsData {
}
export const AnalyticsPage: React.FC = () => {
const { t } = useTranslation();
const [dateRange, setDateRange] = useState<'7d' | '30d' | '90d'>('7d');
const [isEmbedMode, setIsEmbedMode] = useState(false);
@@ -158,7 +160,7 @@ export const AnalyticsPage: React.FC = () => {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading analytics..." />
<Loading size="lg" text={t('analytics.loadingAnalytics')} />
</div>
);
}
@@ -169,15 +171,15 @@ export const AnalyticsPage: React.FC = () => {
<div>
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900">Analytics Dashboard</h1>
<p className="text-neutral-600 mt-1">Detailed analytics powered by Umami</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('analytics.title')}</h1>
<p className="text-neutral-600 mt-1">{t('analytics.detailedSubtitle')}</p>
</div>
<Button
variant="outline"
onClick={() => setIsEmbedMode(false)}
leftIcon={<BarChart3 className="w-4 h-4" />}
>
Show Summary View
{t('analytics.showSummaryView')}
</Button>
</div>
@@ -197,8 +199,8 @@ export const AnalyticsPage: React.FC = () => {
{/* Page Header */}
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900">Analytics Dashboard</h1>
<p className="text-neutral-600 mt-1">Track gallery performance and visitor engagement</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('analytics.title')}</h1>
<p className="text-neutral-600 mt-1">{t('analytics.subtitle')}</p>
</div>
<div className="flex items-center gap-3">
{umamiShareUrl && (
@@ -207,7 +209,7 @@ export const AnalyticsPage: React.FC = () => {
onClick={() => setIsEmbedMode(true)}
leftIcon={<Activity className="w-4 h-4" />}
>
Full Dashboard
{t('analytics.fullDashboard')}
</Button>
)}
<Button
@@ -215,16 +217,16 @@ export const AnalyticsPage: React.FC = () => {
onClick={() => refetch()}
leftIcon={<RefreshCw className="w-4 h-4" />}
>
Refresh
{t('analytics.refresh')}
</Button>
<select
value={dateRange}
onChange={(e) => setDateRange(e.target.value as any)}
className="px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
>
<option value="7d">Last 7 days</option>
<option value="30d">Last 30 days</option>
<option value="90d">Last 90 days</option>
<option value="7d">{t('analytics.last7Days')}</option>
<option value="30d">{t('analytics.last30Days')}</option>
<option value="90d">{t('analytics.last90Days')}</option>
</select>
</div>
</div>
@@ -234,7 +236,7 @@ export const AnalyticsPage: React.FC = () => {
<Card padding="md">
<div className="flex items-start justify-between mb-4">
<div>
<p className="text-sm text-neutral-600">Page Views</p>
<p className="text-sm text-neutral-600">{t('analytics.pageViews')}</p>
<p className="text-3xl font-bold text-neutral-900">{analytics?.pageViews.total.toLocaleString()}</p>
<div className="mt-1">
{renderTrendBadge(analytics?.pageViews.trend || 0)}
@@ -251,7 +253,7 @@ export const AnalyticsPage: React.FC = () => {
<Card padding="md">
<div className="flex items-start justify-between mb-4">
<div>
<p className="text-sm text-neutral-600">Unique Visitors</p>
<p className="text-sm text-neutral-600">{t('analytics.uniqueVisitors')}</p>
<p className="text-3xl font-bold text-neutral-900">{analytics?.uniqueVisitors.total.toLocaleString()}</p>
<div className="mt-1">
{renderTrendBadge(analytics?.uniqueVisitors.trend || 0)}
@@ -268,7 +270,7 @@ export const AnalyticsPage: React.FC = () => {
<Card padding="md">
<div className="flex items-start justify-between mb-4">
<div>
<p className="text-sm text-neutral-600">Total Downloads</p>
<p className="text-sm text-neutral-600">{t('analytics.totalDownloads')}</p>
<p className="text-3xl font-bold text-neutral-900">{analytics?.downloads.total.toLocaleString()}</p>
<div className="mt-1">
{renderTrendBadge(analytics?.downloads.trend || 0)}
@@ -277,7 +279,7 @@ export const AnalyticsPage: React.FC = () => {
<Download className="w-8 h-8 text-purple-600" />
</div>
<div className="mt-4 space-y-2">
<p className="text-xs text-neutral-500 uppercase">Top Gallery</p>
<p className="text-xs text-neutral-500 uppercase">{t('analytics.topGallery')}</p>
<p className="text-sm font-medium text-neutral-900 truncate">
{analytics?.downloads.topGalleries[0]?.name}
</p>
@@ -289,19 +291,19 @@ export const AnalyticsPage: React.FC = () => {
{/* Top Pages */}
<div className="lg:col-span-2">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Top Pages</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.topPages')}</h2>
<div className="space-y-3">
{analytics?.topPages.map((page, index) => (
<div key={index} className="flex items-center justify-between">
<div className="flex-1">
<p className="text-sm font-medium text-neutral-900">{page.path}</p>
<p className="text-xs text-neutral-500">
{page.uniqueVisitors} unique visitors
{page.uniqueVisitors} {t('analytics.visitors')}
</p>
</div>
<div className="text-right">
<p className="text-sm font-semibold text-neutral-900">{page.views}</p>
<p className="text-xs text-neutral-500">views</p>
<p className="text-xs text-neutral-500">{t('analytics.views')}</p>
</div>
</div>
))}
@@ -310,7 +312,7 @@ export const AnalyticsPage: React.FC = () => {
{/* Top Downloads */}
<Card padding="md" className="mt-6">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Top Downloads by Gallery</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.topDownloadsByGallery')}</h2>
<div className="space-y-3">
{analytics?.downloads.topGalleries.map((gallery, index) => (
<div key={index} className="flex items-center justify-between">
@@ -340,26 +342,26 @@ export const AnalyticsPage: React.FC = () => {
<div className="space-y-6">
{/* Device Breakdown */}
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Device Breakdown</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.deviceBreakdown')}</h2>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Monitor className="w-5 h-5 text-neutral-600" />
<span className="text-sm text-neutral-700">Desktop</span>
<span className="text-sm text-neutral-700">{t('analytics.desktop')}</span>
</div>
<span className="text-sm font-semibold">{analytics?.devices.desktop}%</span>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Smartphone className="w-5 h-5 text-neutral-600" />
<span className="text-sm text-neutral-700">Mobile</span>
<span className="text-sm text-neutral-700">{t('analytics.mobile')}</span>
</div>
<span className="text-sm font-semibold">{analytics?.devices.mobile}%</span>
</div>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Tablet className="w-5 h-5 text-neutral-600" />
<span className="text-sm text-neutral-700">Tablet</span>
<span className="text-sm text-neutral-700">{t('analytics.tablet')}</span>
</div>
<span className="text-sm font-semibold">{analytics?.devices.tablet}%</span>
</div>
@@ -369,11 +371,11 @@ export const AnalyticsPage: React.FC = () => {
{/* Storage Information */}
{dashboardStats && (
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Storage Usage</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('analytics.storageUsage')}</h2>
<div className="space-y-4">
<div>
<div className="flex justify-between text-sm mb-1">
<span className="text-neutral-600">Used</span>
<span className="text-neutral-600">{t('analytics.used')}</span>
<span className="font-medium">{adminService.formatBytes(dashboardStats.storageUsed)}</span>
</div>
<div className="w-full bg-neutral-200 rounded-full h-2">
@@ -383,16 +385,16 @@ export const AnalyticsPage: React.FC = () => {
/>
</div>
<p className="text-xs text-neutral-500 mt-1">
{Math.round((dashboardStats.storageUsed / (10 * 1024 * 1024 * 1024)) * 100)}% of 10 GB
{Math.round((dashboardStats.storageUsed / (10 * 1024 * 1024 * 1024)) * 100)}% {t('analytics.of')} 10 GB
</p>
</div>
<div className="pt-2 border-t">
<div className="flex justify-between text-sm">
<span className="text-neutral-600">Total Photos</span>
<span className="text-neutral-600">{t('analytics.totalPhotos')}</span>
<span className="font-medium">{dashboardStats.totalPhotos.toLocaleString()}</span>
</div>
<div className="flex justify-between text-sm mt-2">
<span className="text-neutral-600">Active Events</span>
<span className="text-neutral-600">{t('analytics.activeEvents')}</span>
<span className="font-medium">{dashboardStats.activeEvents}</span>
</div>
</div>
@@ -408,9 +410,9 @@ export const AnalyticsPage: React.FC = () => {
<div className="flex items-start gap-3">
<Activity className="w-5 h-5 text-amber-600 flex-shrink-0" />
<div>
<p className="text-sm font-medium text-amber-900">Umami Analytics Not Configured</p>
<p className="text-sm font-medium text-amber-900">{t('analytics.notConfigured')}</p>
<p className="text-sm text-amber-700 mt-1">
To see real analytics data, configure Umami by setting VITE_UMAMI_URL and VITE_UMAMI_WEBSITE_ID in your environment variables.
{t('analytics.configureInstructions')}
</p>
</div>
</div>
frontend/src/pages/admin/ArchivesPage.tsx
+49 -45
View File
@@ -18,9 +18,11 @@ import { toast } from 'react-toastify';
import { Button, Input, Card, Loading } from '../../components/common';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { archiveService } from '../../services/archive.service';
import { useTranslation } from 'react-i18next';
// import { useNavigate } from 'react-router-dom';
export const ArchivesPage: React.FC = () => {
const { t } = useTranslation();
const [searchTerm, setSearchTerm] = useState('');
const [filterType, setFilterType] = useState<string>('all');
const [sortBy, setSortBy] = useState<'date' | 'size' | 'name'>('date');
@@ -78,43 +80,43 @@ export const ArchivesPage: React.FC = () => {
const restoreMutation = useMutation({
mutationFn: (id: number) => archiveService.restoreArchive(id),
onSuccess: () => {
toast.success('Archive restored successfully');
toast.success(t('archives.restoreSuccess'));
queryClient.invalidateQueries({ queryKey: ['admin-archives'] });
},
onError: () => {
toast.error('Failed to restore archive');
toast.error(t('errors.somethingWentWrong'));
}
});
const deleteMutation = useMutation({
mutationFn: (id: number) => archiveService.deleteArchive(id),
onSuccess: () => {
toast.success('Archive deleted permanently');
toast.success(t('archives.deleteSuccess'));
queryClient.invalidateQueries({ queryKey: ['admin-archives'] });
},
onError: () => {
toast.error('Failed to delete archive');
toast.error(t('errors.somethingWentWrong'));
}
});
const handleDownload = async (archive: typeof archives[0]) => {
try {
toast.info(`Downloading ${archive.eventName} archive...`);
toast.info(t('gallery.downloading', { count: 1 }).replace('photo', 'archive'));
await archiveService.downloadArchive(archive.id, `${archive.slug}-archive.zip`);
toast.success('Download started');
toast.success(t('common.download'));
} catch (error) {
toast.error('Failed to download archive');
toast.error(t('errors.somethingWentWrong'));
}
};
const handleRestore = (archive: typeof archives[0]) => {
if (confirm(`Are you sure you want to restore "${archive.eventName}"? This will make the gallery accessible again.`)) {
if (confirm(t('archives.confirmRestore').replace('{{name}}', archive.eventName))) {
restoreMutation.mutate(archive.id);
}
};
const handleDelete = (archive: typeof archives[0]) => {
if (confirm(`Are you sure you want to permanently delete the archive for "${archive.eventName}"? This action cannot be undone.`)) {
if (confirm(t('archives.confirmDelete').replace('{{name}}', archive.eventName))) {
deleteMutation.mutate(archive.id);
}
};
@@ -127,7 +129,7 @@ export const ArchivesPage: React.FC = () => {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading archives..." />
<Loading size="lg" text={t('archives.loadingArchives')} />
</div>
);
}
@@ -136,8 +138,8 @@ export const ArchivesPage: React.FC = () => {
<div>
{/* Page Header */}
<div className="mb-6">
<h1 className="text-2xl font-bold text-neutral-900">Archives</h1>
<p className="text-neutral-600 mt-1">Manage archived photo galleries</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('archives.title')}</h1>
<p className="text-neutral-600 mt-1">{t('archives.subtitle')}</p>
</div>
{/* Statistics Cards */}
@@ -145,7 +147,7 @@ export const ArchivesPage: React.FC = () => {
<Card padding="sm">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-neutral-600">Total Archives</p>
<p className="text-sm text-neutral-600">{t('archives.totalArchives')}</p>
<p className="text-2xl font-bold text-neutral-900">{archives.length}</p>
</div>
<Archive className="w-8 h-8 text-primary-600" />
@@ -155,7 +157,7 @@ export const ArchivesPage: React.FC = () => {
<Card padding="sm">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-neutral-600">Storage Used</p>
<p className="text-sm text-neutral-600">{t('archives.storageUsed')}</p>
<p className="text-2xl font-bold text-neutral-900">{archiveService.formatBytes(getTotalSize())}</p>
</div>
<HardDrive className="w-8 h-8 text-blue-600" />
@@ -165,7 +167,7 @@ export const ArchivesPage: React.FC = () => {
<Card padding="sm">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-neutral-600">Total Photos</p>
<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()}
</p>
@@ -177,7 +179,7 @@ export const ArchivesPage: React.FC = () => {
<Card padding="sm">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-neutral-600">Avg Archive Size</p>
<p className="text-sm text-neutral-600">{t('archives.avgArchiveSize')}</p>
<p className="text-2xl font-bold text-neutral-900">
{archives.length > 0
? archiveService.formatBytes(getTotalSize() / archives.length)
@@ -196,7 +198,7 @@ export const ArchivesPage: React.FC = () => {
<div className="flex-1">
<Input
type="text"
placeholder="Search archives..."
placeholder={t('archives.searchPlaceholder')}
leftIcon={<Search className="w-5 h-5 text-neutral-400" />}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -209,12 +211,12 @@ export const ArchivesPage: React.FC = () => {
onChange={(e) => setFilterType(e.target.value)}
className="px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
>
<option value="all">All Types</option>
<option value="wedding">Wedding</option>
<option value="birthday">Birthday</option>
<option value="corporate">Corporate</option>
<option value="all">{t('archives.allTypes')}</option>
<option value="wedding">{t('archives.wedding')}</option>
<option value="birthday">{t('archives.birthday')}</option>
<option value="corporate">{t('archives.corporate')}</option>
<option value="party">Party</option>
<option value="other">Other</option>
<option value="other">{t('archives.other')}</option>
</select>
<select
@@ -222,9 +224,9 @@ export const ArchivesPage: React.FC = () => {
onChange={(e) => setSortBy(e.target.value as any)}
className="px-4 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
>
<option value="date">Sort by Date</option>
<option value="name">Sort by Name</option>
<option value="size">Sort by Size</option>
<option value="date">{t('archives.sortByDate')}</option>
<option value="name">{t('archives.sortByName')}</option>
<option value="size">{t('archives.sortBySize')}</option>
</select>
</div>
</div>
@@ -237,22 +239,22 @@ export const ArchivesPage: React.FC = () => {
<thead className="bg-neutral-50 border-b border-neutral-200">
<tr>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Event
{t('archives.tableHeaders.event')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Type
{t('archives.tableHeaders.type')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Archived Date
{t('archives.tableHeaders.archivedDate')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Size
{t('archives.tableHeaders.size')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Photos
{t('archives.tableHeaders.photos')}
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-neutral-500 uppercase tracking-wider">
Actions
{t('archives.tableHeaders.actions')}
</th>
</tr>
</thead>
@@ -260,7 +262,7 @@ export const ArchivesPage: React.FC = () => {
{filteredArchives.length === 0 ? (
<tr>
<td colSpan={6} className="px-6 py-12 text-center text-neutral-500">
No archives found
{t('archives.noArchivesFound')}
</td>
</tr>
) : (
@@ -270,7 +272,7 @@ export const ArchivesPage: React.FC = () => {
<div>
<p className="text-sm font-medium text-neutral-900">{archive.eventName}</p>
<p className="text-xs text-neutral-500">
Event date: {formatDate(archive.eventDate, 'MMM d, yyyy') || 'N/A'}
{t('archives.eventDateNA').replace('N/A', formatDate(archive.eventDate, 'MMM d, yyyy') || 'N/A')}
</p>
</div>
</td>
@@ -279,7 +281,7 @@ export const ArchivesPage: React.FC = () => {
</td>
<td className="px-6 py-4 text-sm text-neutral-700">
<div>
<p>{formatDate(archive.archivedAt, 'MMM d, yyyy') || 'Processing...'}</p>
<p>{formatDate(archive.archivedAt, 'MMM d, yyyy') || t('archives.processing')}</p>
<p className="text-xs text-neutral-500">
{formatDate(archive.archivedAt, 'h:mm a')}
</p>
@@ -310,7 +312,7 @@ export const ArchivesPage: React.FC = () => {
leftIcon={<Download className="w-4 h-4" />}
disabled={!archive.archivePath}
>
Download
{t('archives.download')}
</Button>
<Button
variant="ghost"
@@ -319,7 +321,7 @@ export const ArchivesPage: React.FC = () => {
leftIcon={<RotateCcw className="w-4 h-4" />}
disabled={restoreMutation.isPending}
>
Restore
{t('archives.restore')}
</Button>
<Button
variant="ghost"
@@ -329,7 +331,7 @@ export const ArchivesPage: React.FC = () => {
className="text-red-600 hover:text-red-700"
disabled={deleteMutation.isPending}
>
Delete
{t('archives.delete')}
</Button>
</div>
</td>
@@ -345,9 +347,11 @@ export const ArchivesPage: React.FC = () => {
{archivesData?.pagination && archivesData.pagination.totalPages > 1 && (
<div className="mt-6 flex items-center justify-between">
<div className="text-sm text-neutral-600">
Showing {((currentPage - 1) * archivesData.pagination.limit) + 1} to{' '}
{Math.min(currentPage * archivesData.pagination.limit, archivesData.pagination.total)} of{' '}
{archivesData.pagination.total} archives
{t('archives.showing', {
from: ((currentPage - 1) * archivesData.pagination.limit) + 1,
to: Math.min(currentPage * archivesData.pagination.limit, archivesData.pagination.total),
total: archivesData.pagination.total
})}
</div>
<div className="flex items-center gap-2">
<Button
@@ -357,10 +361,10 @@ export const ArchivesPage: React.FC = () => {
disabled={currentPage === 1}
leftIcon={<ChevronLeft className="w-4 h-4" />}
>
Previous
{t('common.previous')}
</Button>
<span className="px-3 text-sm">
Page {currentPage} of {archivesData.pagination.totalPages}
{t('archives.page', { current: currentPage, total: archivesData.pagination.totalPages })}
</span>
<Button
variant="outline"
@@ -369,7 +373,7 @@ export const ArchivesPage: React.FC = () => {
disabled={currentPage === archivesData.pagination.totalPages}
rightIcon={<ChevronRight className="w-4 h-4" />}
>
Next
{t('common.next')}
</Button>
</div>
</div>
@@ -380,9 +384,9 @@ export const ArchivesPage: React.FC = () => {
<div className="flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0" />
<div>
<p className="text-sm font-medium text-amber-900">Storage Management</p>
<p className="text-sm font-medium text-amber-900">{t('archives.storageManagement')}</p>
<p className="text-sm text-amber-700 mt-1">
Archives are stored permanently unless manually deleted. Consider implementing a retention policy to manage storage costs.
{t('archives.storageInfo')}
</p>
</div>
</div>
frontend/src/pages/admin/BrandingPage.tsx
+50 -50
View File
@@ -6,8 +6,10 @@ import { ThemeCustomizer } from '../../components/admin/ThemeCustomizer';
import { useTheme, type ThemeConfig, PRESET_THEMES } from '../../contexts/ThemeContext';
import { useQuery, useMutation } from '@tanstack/react-query';
import { settingsService, type BrandingSettings } from '../../services/settings.service';
import { useTranslation } from 'react-i18next';
export const BrandingPage: React.FC = () => {
const { t } = useTranslation();
const { theme, setTheme } = useTheme();
const [brandingSettings, setBrandingSettings] = useState<BrandingSettings>({
company_name: '',
@@ -43,10 +45,10 @@ export const BrandingPage: React.FC = () => {
const brandingMutation = useMutation({
mutationFn: settingsService.updateBranding,
onSuccess: () => {
toast.success('Branding settings saved successfully!');
toast.success(t('toast.brandingUpdated'));
},
onError: () => {
toast.error('Failed to save branding settings');
toast.error(t('toast.saveError'));
},
});
@@ -54,10 +56,10 @@ export const BrandingPage: React.FC = () => {
const themeMutation = useMutation({
mutationFn: settingsService.updateTheme,
onSuccess: () => {
toast.success('Theme settings saved successfully!');
toast.success(t('toast.themeUpdated'));
},
onError: () => {
toast.error('Failed to save theme settings');
toast.error(t('toast.saveError'));
},
});
@@ -125,10 +127,10 @@ export const BrandingPage: React.FC = () => {
try {
const faviconUrl = await settingsService.uploadFavicon(file);
setBrandingSettings(prev => ({ ...prev, favicon_url: faviconUrl }));
toast.success('Favicon uploaded successfully');
toast.success(t('toast.uploadSuccess'));
} catch (error) {
console.error('Failed to upload favicon:', error);
toast.error('Failed to upload favicon. Please use PNG or ICO format.');
toast.error(t('toast.uploadError'));
}
}
};
@@ -139,10 +141,10 @@ export const BrandingPage: React.FC = () => {
try {
const watermarkLogoUrl = await settingsService.uploadWatermarkLogo(file);
setBrandingSettings(prev => ({ ...prev, watermark_logo_url: watermarkLogoUrl }));
toast.success('Watermark logo uploaded successfully');
toast.success(t('toast.uploadSuccess'));
} catch (error) {
console.error('Failed to upload watermark logo:', error);
toast.error('Failed to upload watermark logo. Please use PNG format with transparency.');
toast.error(t('toast.uploadError'));
}
}
};
@@ -182,7 +184,7 @@ export const BrandingPage: React.FC = () => {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading branding settings..." />
<Loading size="lg" text={t('branding.loadingBranding')} />
</div>
);
}
@@ -193,8 +195,8 @@ export const BrandingPage: React.FC = () => {
{/* Page Header */}
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900">Branding & Themes</h1>
<p className="text-neutral-600 mt-1">Customize the look and feel of your galleries</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('branding.title')}</h1>
<p className="text-neutral-600 mt-1">{t('branding.subtitle')}</p>
</div>
<div className="flex items-center gap-3">
<Button
@@ -202,47 +204,47 @@ export const BrandingPage: React.FC = () => {
leftIcon={<Eye className="w-4 h-4" />}
onClick={handlePreview}
>
Preview
{t('branding.preview')}
</Button>
<Button
variant="primary"
leftIcon={<Save className="w-4 h-4" />}
onClick={handleSave}
>
Save Changes
{t('branding.saveChanges')}
</Button>
</div>
</div>
{/* Company Branding */}
<Card padding="md" className="mb-6">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Company Information</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('branding.companyInfo')}</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Input
label="Company Name"
label={t('branding.companyName')}
value={brandingSettings.company_name}
onChange={(e) => handleBrandingChange('company_name', e.target.value)}
placeholder="Your Photography Studio"
helperText="Displayed in email notifications and footers"
placeholder={t('branding.companyName')}
helperText={t('branding.companyNameHelp')}
/>
<Input
label="Company Tagline"
label={t('branding.companyTagline')}
value={brandingSettings.company_tagline}
onChange={(e) => handleBrandingChange('company_tagline', e.target.value)}
placeholder="Capturing moments that last forever"
helperText="Optional tagline for branding"
placeholder={t('branding.companyTagline')}
helperText={t('branding.companyTaglineHelp')}
/>
<Input
label="Support Email"
label={t('branding.supportEmail')}
type="email"
value={brandingSettings.support_email}
onChange={(e) => handleBrandingChange('support_email', e.target.value)}
placeholder="support@yourcompany.com"
helperText="Contact email for gallery visitors"
helperText={t('branding.supportEmailHelp')}
/>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Footer Text
{t('branding.footerText')}
</label>
<textarea
value={brandingSettings.footer_text}
@@ -263,8 +265,8 @@ export const BrandingPage: React.FC = () => {
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
/>
<div>
<span className="text-sm font-medium text-neutral-900">Enable Watermarks</span>
<p className="text-xs text-neutral-600">Add your company name as a watermark on downloaded photos</p>
<span className="text-sm font-medium text-neutral-900">{t('branding.enableWatermarks')}</span>
<p className="text-xs text-neutral-600">{t('branding.watermarkHelp')}</p>
</div>
</label>
</div>
@@ -272,7 +274,7 @@ export const BrandingPage: React.FC = () => {
<div className="mt-6 pt-6 border-t border-neutral-200">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Favicon
{t('branding.favicon')}
</label>
<div className="space-y-2">
{brandingSettings.favicon_url && (
@@ -282,13 +284,13 @@ export const BrandingPage: React.FC = () => {
alt="Current favicon"
className="w-8 h-8"
/>
<span className="text-sm text-neutral-600">Current favicon</span>
<span className="text-sm text-neutral-600">{t('branding.currentFavicon')}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleBrandingChange('favicon_url', '')}
>
Remove
{t('branding.removeFavicon')}
</Button>
</div>
)}
@@ -306,9 +308,9 @@ export const BrandingPage: React.FC = () => {
onClick={() => faviconInputRef.current?.click()}
leftIcon={<Upload className="w-4 h-4" />}
>
Upload Favicon
{t('branding.uploadFavicon')}
</Button>
<p className="text-xs text-neutral-600 mt-1">PNG or ICO format, recommended size: 32x32px</p>
<p className="text-xs text-neutral-600 mt-1">{t('branding.faviconHelp')}</p>
</div>
</div>
</div>
@@ -317,12 +319,12 @@ export const BrandingPage: React.FC = () => {
{/* Watermark Settings */}
{brandingSettings.watermark_enabled && (
<div className="mt-6 space-y-6 border-t border-neutral-200 pt-6">
<h3 className="text-md font-semibold text-neutral-900">Watermark Settings</h3>
<h3 className="text-md font-semibold text-neutral-900">{t('branding.watermarkSettings')}</h3>
{/* Watermark Logo Upload */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Watermark Logo
{t('branding.watermarkLogo')}
</label>
<div className="space-y-2">
{brandingSettings.watermark_logo_url && (
@@ -332,13 +334,13 @@ export const BrandingPage: React.FC = () => {
alt="Current watermark"
className="h-16 w-auto object-contain bg-neutral-100 p-2 rounded"
/>
<span className="text-sm text-neutral-600">Current watermark</span>
<span className="text-sm text-neutral-600">{t('branding.currentWatermark')}</span>
<Button
variant="ghost"
size="sm"
onClick={() => handleBrandingChange('watermark_logo_url', '')}
>
Remove
{t('common.delete')}
</Button>
</div>
)}
@@ -357,10 +359,10 @@ export const BrandingPage: React.FC = () => {
onClick={() => document.getElementById('watermark-upload')?.click()}
leftIcon={<Upload className="w-4 h-4" />}
>
Upload Watermark Logo
{t('branding.uploadWatermarkLogo')}
</Button>
</label>
<p className="text-xs text-neutral-600 mt-1">PNG format with transparency recommended</p>
<p className="text-xs text-neutral-600 mt-1">{t('branding.watermarkHelp')}</p>
</div>
</div>
</div>
@@ -368,15 +370,15 @@ export const BrandingPage: React.FC = () => {
{/* Position Selector */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Watermark Position
{t('branding.watermarkPosition')}
</label>
<div className="grid grid-cols-3 gap-2 max-w-xs">
{[
{ value: 'top-left', label: 'Top Left' },
{ value: 'top-right', label: 'Top Right' },
{ value: 'center', label: 'Center' },
{ value: 'bottom-left', label: 'Bottom Left' },
{ value: 'bottom-right', label: 'Bottom Right' }
{ value: 'top-left', label: t('branding.topLeft') },
{ value: 'top-right', label: t('branding.topRight') },
{ value: 'center', label: t('branding.center') },
{ value: 'bottom-left', label: t('branding.bottomLeft') },
{ value: 'bottom-right', label: t('branding.bottomRight') }
].map((position) => (
<button
key={position.value}
@@ -397,7 +399,7 @@ export const BrandingPage: React.FC = () => {
{/* Opacity Slider */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Watermark Opacity: {brandingSettings.watermark_opacity || 50}%
{t('branding.watermarkOpacity')}: {brandingSettings.watermark_opacity || 50}%
</label>
<input
type="range"
@@ -418,7 +420,7 @@ export const BrandingPage: React.FC = () => {
{/* Size Slider */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-2">
Watermark Size: {brandingSettings.watermark_size || 15}%
{t('branding.watermarkSize')}: {brandingSettings.watermark_size || 15}%
</label>
<input
type="range"
@@ -443,7 +445,7 @@ export const BrandingPage: React.FC = () => {
<div className="mb-6">
<h2 className="text-lg font-semibold text-neutral-900 mb-4 flex items-center gap-2">
<Palette className="w-5 h-5" />
Gallery Theme
{t('branding.galleryTheme')}
</h2>
<div className="mb-4">
<label className="flex items-center gap-2 cursor-pointer">
@@ -453,7 +455,7 @@ export const BrandingPage: React.FC = () => {
onChange={(e) => setIsPreviewMode(e.target.checked)}
className="rounded border-neutral-300 text-primary-600 focus:ring-primary-500"
/>
<span className="text-sm text-neutral-700">Apply changes immediately (Live Preview)</span>
<span className="text-sm text-neutral-700">{t('branding.applyLivePreview')}</span>
</label>
</div>
<ThemeCustomizer
@@ -470,11 +472,9 @@ export const BrandingPage: React.FC = () => {
<div className="flex items-start gap-3">
<Palette className="w-5 h-5 text-blue-600 flex-shrink-0 mt-0.5" />
<div>
<h3 className="text-sm font-medium text-blue-900">Event-Specific Themes</h3>
<h3 className="text-sm font-medium text-blue-900">{t('branding.eventSpecificThemes')}</h3>
<p className="text-sm text-blue-700 mt-1">
You can override these global theme settings for individual events.
When creating or editing an event, you'll have the option to select a different theme
or customize colors specifically for that gallery.
{t('branding.eventThemesInfo')}
</p>
</div>
</div>
frontend/src/pages/admin/CMSPage.tsx
+15 -15
View File
@@ -28,10 +28,10 @@ export const CMSPage: React.FC = () => {
cmsService.updatePage(slug, data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['cms-pages'] });
toast.success('Page updated successfully');
toast.success(t('cms.pageUpdated'));
},
onError: () => {
toast.error('Failed to update page');
toast.error(t('toast.saveError'));
},
});
@@ -65,7 +65,7 @@ export const CMSPage: React.FC = () => {
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading pages..." />
<Loading size="lg" text={t('cms.loadingPages')} />
</div>
);
}
@@ -75,15 +75,15 @@ export const CMSPage: React.FC = () => {
return (
<div>
<div className="mb-6">
<h1 className="text-2xl font-bold text-neutral-900">CMS Pages</h1>
<p className="text-neutral-600 mt-1">Manage legal and informational pages</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('cms.title')}</h1>
<p className="text-neutral-600 mt-1">{t('cms.subtitle')}</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
{/* Page Selection */}
<div className="lg:col-span-1">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Pages</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('cms.pages')}</h2>
<div className="space-y-2">
{pages?.map((page) => (
<button
@@ -106,7 +106,7 @@ export const CMSPage: React.FC = () => {
</Card>
<Card padding="md" className="mt-4">
<h3 className="text-sm font-semibold text-neutral-900 mb-3">Preview Links</h3>
<h3 className="text-sm font-semibold text-neutral-900 mb-3">{t('cms.previewLinks')}</h3>
<div className="space-y-2 text-sm">
<a
href={`${window.location.origin}/${selectedPage}?lang=en`}
@@ -115,7 +115,7 @@ export const CMSPage: React.FC = () => {
className="flex items-center gap-2 text-primary-600 hover:text-primary-700"
>
<Globe className="w-4 h-4" />
English Version
{t('cms.englishVersion')}
</a>
<a
href={`${window.location.origin}/${selectedPage}?lang=de`}
@@ -124,7 +124,7 @@ export const CMSPage: React.FC = () => {
className="flex items-center gap-2 text-primary-600 hover:text-primary-700"
>
<Globe className="w-4 h-4" />
German Version
{t('cms.germanVersion')}
</a>
</div>
</Card>
@@ -135,7 +135,7 @@ export const CMSPage: React.FC = () => {
<Card padding="md">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold text-neutral-900">
Edit {t(`legal.${selectedPage}`)}
{t('cms.editPage', { page: t(`legal.${selectedPage}`) })}
</h2>
{/* Language Tabs */}
@@ -167,19 +167,19 @@ export const CMSPage: React.FC = () => {
{/* Title */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Page Title ({editingLang === 'en' ? 'English' : 'German'})
{t('cms.pageTitle')} ({editingLang === 'en' ? 'English' : 'German'})
</label>
<Input
value={editingLang === 'en' ? editForm.title_en || '' : editForm.title_de || ''}
onChange={(e) => handleTitleChange(e.target.value)}
placeholder="Enter page title..."
placeholder={t('cms.pageTitlePlaceholder')}
/>
</div>
{/* Content */}
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Page Content ({editingLang === 'en' ? 'English' : 'German'})
{t('cms.pageContent')} ({editingLang === 'en' ? 'English' : 'German'})
</label>
<CMSEditor
content={editingLang === 'en' ? editForm.content_en || '' : editForm.content_de || ''}
@@ -195,13 +195,13 @@ export const CMSPage: React.FC = () => {
isLoading={updateMutation.isPending}
leftIcon={<Save className="w-4 h-4" />}
>
Save Changes
{t('cms.saveChanges')}
</Button>
</div>
{currentPage?.updated_at && (
<p className="text-xs text-neutral-500 mt-4">
Last updated: {new Date(currentPage.updated_at).toLocaleString()}
{t('cms.lastUpdated')} {new Date(currentPage.updated_at).toLocaleString()}
</p>
)}
</Card>
frontend/src/pages/admin/EmailConfigPage.tsx
+43 -41
View File
@@ -17,6 +17,7 @@ import { Button, Input, Card, Loading } from '../../components/common';
import { EmailPreviewModal } from '../../components/admin/EmailPreviewModal';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { emailService, type EmailConfig, type EmailTemplate } from '../../services/email.service';
import { useTranslation } from 'react-i18next';
const defaultTemplateKeys = [
{
@@ -83,6 +84,7 @@ The Photo Sharing Team`,
];
export const EmailConfigPage: React.FC = () => {
const { t } = useTranslation();
const [activeTab, setActiveTab] = useState<'smtp' | 'templates'>('smtp');
const [selectedTemplateKey, setSelectedTemplateKey] = useState<string>('gallery_created');
const [editedTemplate, setEditedTemplate] = useState<Partial<EmailTemplate>>({});
@@ -149,21 +151,21 @@ export const EmailConfigPage: React.FC = () => {
const saveConfigMutation = useMutation({
mutationFn: (config: EmailConfig) => emailService.updateConfig(config),
onSuccess: () => {
toast.success('SMTP configuration saved successfully');
toast.success(t('toast.emailConfigSaved'));
queryClient.invalidateQueries({ queryKey: ['email-config'] });
},
onError: () => {
toast.error('Failed to save SMTP configuration');
toast.error(t('toast.saveError'));
}
});
const testEmailMutation = useMutation({
mutationFn: (email: string) => emailService.testEmail(email),
onSuccess: () => {
toast.success(`Test email sent to ${testEmail}`);
toast.success(t('email.testEmailSuccess'));
},
onError: () => {
toast.error('Failed to send test email');
toast.error(t('toast.saveError'));
}
});
@@ -171,19 +173,19 @@ export const EmailConfigPage: React.FC = () => {
mutationFn: ({ key, template }: { key: string; template: Partial<EmailTemplate> }) =>
emailService.updateTemplate(key, template),
onSuccess: () => {
toast.success('Email template saved successfully');
toast.success(t('toast.saveSuccess'));
queryClient.invalidateQueries({ queryKey: ['email-templates'] });
queryClient.invalidateQueries({ queryKey: ['email-template', selectedTemplateKey] });
},
onError: () => {
toast.error('Failed to save email template');
toast.error(t('toast.saveError'));
}
});
const handleSaveSmtp = () => {
// Validate SMTP config
if (!smtpConfig.smtp_host || !smtpConfig.smtp_port || !smtpConfig.from_email) {
toast.error('Please fill in all required SMTP fields');
toast.error(t('errors.requiredFields'));
return;
}
@@ -192,7 +194,7 @@ export const EmailConfigPage: React.FC = () => {
const handleTestEmail = () => {
if (!testEmail) {
toast.error('Please enter a test email address');
toast.error(t('errors.enterTestEmail'));
return;
}
@@ -237,7 +239,7 @@ export const EmailConfigPage: React.FC = () => {
});
setShowPreview(true);
} catch (error) {
toast.error('Failed to preview template');
toast.error(t('toast.saveError'));
}
};
@@ -245,7 +247,7 @@ export const EmailConfigPage: React.FC = () => {
const variables = editedTemplate.variables || [];
return (
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
<h4 className="text-sm font-semibold text-blue-900 mb-2">Available Variables</h4>
<h4 className="text-sm font-semibold text-blue-900 mb-2">{t('email.templateVariables')}</h4>
<div className="grid grid-cols-2 gap-2 text-sm">
{variables.map(variable => (
<code key={variable} className="text-blue-700 bg-blue-100 px-2 py-1 rounded">
@@ -254,7 +256,7 @@ export const EmailConfigPage: React.FC = () => {
))}
</div>
<p className="text-xs text-blue-700 mt-2">
Use these variables in your template. They will be replaced with actual values when emails are sent.
{t('email.variableHelp')}
</p>
</div>
);
@@ -263,7 +265,7 @@ export const EmailConfigPage: React.FC = () => {
if (configLoading || templatesLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading email configuration..." />
<Loading size="lg" text={t('email.loadingSettings')} />
</div>
);
}
@@ -271,8 +273,8 @@ export const EmailConfigPage: React.FC = () => {
return (
<div>
<div className="mb-6">
<h1 className="text-2xl font-bold text-neutral-900">Email Configuration</h1>
<p className="text-neutral-600 mt-1">Configure email settings and customize notification templates</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('email.title')}</h1>
<p className="text-neutral-600 mt-1">{t('email.subtitle')}</p>
</div>
{/* Tab Navigation */}
@@ -286,7 +288,7 @@ export const EmailConfigPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
SMTP Settings
{t('email.smtpSettings')}
</button>
<button
onClick={() => setActiveTab('templates')}
@@ -296,7 +298,7 @@ export const EmailConfigPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
Email Templates
{t('email.emailTemplates')}
</button>
</nav>
</div>
@@ -305,12 +307,12 @@ export const EmailConfigPage: React.FC = () => {
{activeTab === 'smtp' && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">SMTP Configuration</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('email.smtpConfiguration')}</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
SMTP Host <span className="text-red-500">*</span>
{t('email.smtpHost')} <span className="text-red-500">*</span>
</label>
<Input
type="text"
@@ -324,7 +326,7 @@ export const EmailConfigPage: React.FC = () => {
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Port <span className="text-red-500">*</span>
{t('email.port')} <span className="text-red-500">*</span>
</label>
<Input
type="number"
@@ -336,7 +338,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Security
{t('email.security')}
</label>
<select
value={smtpConfig.smtp_secure ? 'ssl' : 'tls'}
@@ -351,7 +353,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Username
{t('email.username')}
</label>
<Input
type="text"
@@ -364,14 +366,14 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Password
{t('email.password')}
</label>
<div className="relative">
<Input
type={showPassword ? 'text' : 'password'}
value={smtpConfig.smtp_pass}
onChange={(e) => setSmtpConfig(prev => ({ ...prev, smtp_pass: e.target.value }))}
placeholder="Enter password"
placeholder={t('email.enterPassword')}
leftIcon={<Lock className="w-5 h-5 text-neutral-400" />}
/>
<button
@@ -386,7 +388,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
From Email <span className="text-red-500">*</span>
{t('email.fromEmail')} <span className="text-red-500">*</span>
</label>
<Input
type="email"
@@ -399,7 +401,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
From Name
{t('email.fromName')}
</label>
<Input
type="text"
@@ -416,23 +418,23 @@ export const EmailConfigPage: React.FC = () => {
leftIcon={<Save className="w-5 h-5" />}
className="w-full"
>
Save SMTP Settings
{t('email.saveSmtpSettings')}
</Button>
</div>
</Card>
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Test Email</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('email.testEmailSection')}</h2>
<div className="mb-4 p-4 bg-amber-50 border border-amber-200 rounded-lg">
<div className="flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-amber-600 flex-shrink-0" />
<div className="text-sm text-amber-800">
<p className="font-medium">Before testing:</p>
<p className="font-medium">{t('email.beforeTesting')}</p>
<ul className="list-disc list-inside mt-1">
<li>Save your SMTP settings first</li>
<li>Ensure your firewall allows outbound SMTP</li>
<li>For Gmail, use an app-specific password</li>
<li>{t('email.saveSmtpFirst')}</li>
<li>{t('email.ensureFirewall')}</li>
<li>{t('email.gmailAppPassword')}</li>
</ul>
</div>
</div>
@@ -441,7 +443,7 @@ export const EmailConfigPage: React.FC = () => {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Test Email Address
{t('email.testEmailAddressLabel')}
</label>
<Input
type="email"
@@ -459,7 +461,7 @@ export const EmailConfigPage: React.FC = () => {
leftIcon={<Send className="w-5 h-5" />}
className="w-full"
>
Send Test Email
{t('email.sendTestEmailButton')}
</Button>
</div>
@@ -467,7 +469,7 @@ export const EmailConfigPage: React.FC = () => {
<div className="flex items-start gap-3">
<CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0" />
<div className="text-sm text-green-800">
<p className="font-medium">Common SMTP Settings:</p>
<p className="font-medium">{t('email.commonSmtpSettings')}</p>
<ul className="mt-2 space-y-1">
<li><strong>Gmail:</strong> smtp.gmail.com:587 (TLS)</li>
<li><strong>Outlook:</strong> smtp-mail.outlook.com:587 (TLS)</li>
@@ -484,7 +486,7 @@ export const EmailConfigPage: React.FC = () => {
{activeTab === 'templates' && (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<Card padding="sm">
<h3 className="text-lg font-semibold text-neutral-900 mb-4">Templates</h3>
<h3 className="text-lg font-semibold text-neutral-900 mb-4">{t('email.templates')}</h3>
<div className="space-y-2">
{templates.map(template => {
const templateInfo = defaultTemplateKeys.find(t => t.key === template.template_key);
@@ -514,7 +516,7 @@ export const EmailConfigPage: React.FC = () => {
<div className="lg:col-span-2">
<Card padding="md">
<div className="flex items-center justify-between mb-4">
<h3 className="text-lg font-semibold text-neutral-900">Edit Template</h3>
<h3 className="text-lg font-semibold text-neutral-900">{t('email.editTemplate')}</h3>
<div className="flex gap-2">
<Button
variant="outline"
@@ -522,7 +524,7 @@ export const EmailConfigPage: React.FC = () => {
onClick={handlePreviewTemplate}
leftIcon={<Eye className="w-4 h-4" />}
>
Preview
{t('email.preview')}
</Button>
<Button
variant="primary"
@@ -531,7 +533,7 @@ export const EmailConfigPage: React.FC = () => {
isLoading={saveTemplateMutation.isPending}
leftIcon={<Save className="w-4 h-4" />}
>
Save Changes
{t('email.saveChanges')}
</Button>
</div>
</div>
@@ -539,7 +541,7 @@ export const EmailConfigPage: React.FC = () => {
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Template Name
{t('email.templateName')}
</label>
<Input
type="text"
@@ -551,7 +553,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Subject Line
{t('email.subjectLine')}
</label>
<Input
type="text"
@@ -563,7 +565,7 @@ export const EmailConfigPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Email Body
{t('email.emailBody')}
</label>
<textarea
value={editedTemplate.body_html || ''}
frontend/src/pages/admin/EventDetailsPage.tsx
+69 -67
View File
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import {
ArrowLeft,
ExternalLink,
@@ -33,6 +34,7 @@ export const EventDetailsPage: React.FC = () => {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
const queryClient = useQueryClient();
const { t } = useTranslation();
// Validate ID parameter
React.useEffect(() => {
@@ -98,11 +100,11 @@ export const EventDetailsPage: React.FC = () => {
mutationFn: (data: any) => eventsService.updateEvent(parseInt(id!), data),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
toast.success('Event updated successfully');
toast.success(t('toast.eventUpdated'));
setIsEditing(false);
},
onError: () => {
toast.error('Failed to update event');
toast.error(t('toast.saveError'));
},
});
@@ -111,10 +113,10 @@ export const EventDetailsPage: React.FC = () => {
mutationFn: () => eventsService.archiveEvent(parseInt(id!)),
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
toast.success('Event archived successfully');
toast.success(t('toast.eventArchived'));
},
onError: () => {
toast.error('Failed to archive event');
toast.error(t('errors.somethingWentWrong'));
},
});
@@ -125,17 +127,17 @@ export const EventDetailsPage: React.FC = () => {
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
toast.success('Expiration extended successfully');
toast.success(t('toast.saveSuccess'));
},
onError: () => {
toast.error('Failed to extend expiration');
toast.error(t('toast.saveError'));
},
});
if (eventLoading || !event) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading event details..." />
<Loading size="lg" text={t('events.loadingEventDetails')} />
</div>
);
}
@@ -166,9 +168,9 @@ export const EventDetailsPage: React.FC = () => {
await navigator.clipboard.writeText(event.share_link);
setCopiedLink(true);
setTimeout(() => setCopiedLink(false), 2000);
toast.success('Link copied to clipboard');
toast.success(t('toast.linkCopied'));
} catch (err) {
toast.error('Failed to copy link');
toast.error(t('errors.somethingWentWrong'));
}
};
@@ -183,7 +185,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => navigate('/admin/events')}
className="mb-4"
>
Back to Events
{t('events.backToEvents')}
</Button>
<div className="flex items-start justify-between">
@@ -198,7 +200,7 @@ export const EventDetailsPage: React.FC = () => {
{event.is_archived && (
<span className="text-neutral-500 flex items-center">
<Archive className="w-4 h-4 mr-1" />
Archived
{t('events.archived')}
</span>
)}
</div>
@@ -215,7 +217,7 @@ export const EventDetailsPage: React.FC = () => {
leftIcon={<X className="w-4 h-4" />}
onClick={() => setIsEditing(false)}
>
Cancel
{t('common.cancel')}
</Button>
<Button
variant="primary"
@@ -224,7 +226,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={handleSaveEdit}
isLoading={updateMutation.isPending}
>
Save Changes
{t('events.saveChanges')}
</Button>
</>
) : (
@@ -234,7 +236,7 @@ export const EventDetailsPage: React.FC = () => {
leftIcon={<Edit2 className="w-4 h-4" />}
onClick={handleStartEdit}
>
Edit
{t('common.edit')}
</Button>
)}
</>
@@ -247,7 +249,7 @@ export const EventDetailsPage: React.FC = () => {
className="inline-flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-primary-600 hover:text-primary-700 border border-primary-600 rounded-lg hover:bg-primary-50 transition-colors"
>
<ExternalLink className="w-4 h-4" />
View Gallery
{t('events.viewGallery')}
</a>
)}
</div>
@@ -262,14 +264,14 @@ export const EventDetailsPage: React.FC = () => {
<div className="flex-1">
<p className={`font-medium ${isExpired ? 'text-red-900' : 'text-orange-900'}`}>
{isExpired
? 'This event has expired'
: `This event expires in ${daysUntilExpiration} ${daysUntilExpiration === 1 ? 'day' : 'days'}`
? t('events.eventExpiredMessage')
: t('events.eventExpiresIn', { days: daysUntilExpiration })
}
</p>
<p className={`text-sm mt-1 ${isExpired ? 'text-red-700' : 'text-orange-700'}`}>
{isExpired
? 'Guests can no longer access the gallery. Consider archiving this event.'
: 'Warning emails have been sent to the host.'}
? t('events.guestsCannotAccessGallery')
: t('events.warningEmailsHaveBeenSent')}
</p>
</div>
{!isExpired && (
@@ -277,12 +279,12 @@ export const EventDetailsPage: React.FC = () => {
variant="outline"
size="sm"
onClick={() => {
if (confirm('Extend expiration by 7 days?')) {
if (confirm(t('events.extendExpiration', { days: 7 }) + '?')) {
extendMutation.mutate(7);
}
}}
>
Extend 7 Days
{t('events.extendSevenDays')}
</Button>
)}
</div>
@@ -300,7 +302,7 @@ export const EventDetailsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
}`}
>
Overview
{t('events.overview')}
</button>
<button
onClick={() => setActiveTab('photos')}
@@ -311,7 +313,7 @@ export const EventDetailsPage: React.FC = () => {
}`}
>
<Image className="w-4 h-4" />
Photos
{t('events.photos')}
{event.photo_count && event.photo_count > 0 && (
<span className="ml-1 px-2 py-0.5 text-xs font-medium bg-neutral-100 text-neutral-700 rounded-full">
{event.photo_count}
@@ -326,7 +328,7 @@ export const EventDetailsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700 hover:border-neutral-300'
}`}
>
Categories
{t('events.categories')}
</button>
</nav>
</div>
@@ -338,26 +340,26 @@ export const EventDetailsPage: React.FC = () => {
<div className="lg:col-span-2 space-y-6">
{/* Event Information */}
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Event Information</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.eventInformation')}</h2>
{isEditing ? (
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Welcome Message
{t('events.welcomeMessageLabel')}
</label>
<textarea
value={editForm.welcome_message}
onChange={(e) => setEditForm(prev => ({ ...prev, welcome_message: e.target.value }))}
className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
rows={3}
placeholder="Add a welcome message for guests..."
placeholder={t('events.welcomeMessage')}
/>
</div>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Expiration Date
{t('events.expirationDate')}
</label>
<Input
type="date"
@@ -370,39 +372,39 @@ export const EventDetailsPage: React.FC = () => {
) : (
<dl className="space-y-4">
<div>
<dt className="text-sm font-medium text-neutral-500">Welcome Message</dt>
<dt className="text-sm font-medium text-neutral-500">{t('events.welcomeMessageLabel')}</dt>
<dd className="mt-1 text-sm text-neutral-900">
{event.welcome_message || <span className="text-neutral-400">No welcome message set</span>}
{event.welcome_message || <span className="text-neutral-400">{t('events.noWelcomeMessageSet')}</span>}
</dd>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<dt className="text-sm font-medium text-neutral-500">Host Email</dt>
<dt className="text-sm font-medium text-neutral-500">{t('events.hostEmail')}</dt>
<dd className="mt-1 text-sm text-neutral-900">{event.host_email}</dd>
</div>
<div>
<dt className="text-sm font-medium text-neutral-500">Admin Email</dt>
<dt className="text-sm font-medium text-neutral-500">{t('events.adminEmail')}</dt>
<dd className="mt-1 text-sm text-neutral-900">{event.admin_email}</dd>
</div>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<dt className="text-sm font-medium text-neutral-500">Created</dt>
<dt className="text-sm font-medium text-neutral-500">{t('events.createdOn')}</dt>
<dd className="mt-1 text-sm text-neutral-900">
{format(parseISO(event.created_at), 'MMM d, yyyy')}
</dd>
</div>
<div>
<dt className="text-sm font-medium text-neutral-500">Expires</dt>
<dt className="text-sm font-medium text-neutral-500">{t('events.expires')}</dt>
<dd className="mt-1 text-sm text-neutral-900">
{format(parseISO(event.expires_at), 'MMM d, yyyy')}
{!event.is_archived && daysUntilExpiration > 0 && (
<span className="text-neutral-500 ml-1">
({daysUntilExpiration} {daysUntilExpiration === 1 ? 'day' : 'days'} left)
{t('events.daysLeft', { days: daysUntilExpiration })}
</span>
)}
</dd>
@@ -414,7 +416,7 @@ export const EventDetailsPage: React.FC = () => {
{/* Share Link */}
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Share Link</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.shareLink')}</h2>
<div className="flex items-center gap-2">
<input
@@ -429,12 +431,12 @@ export const EventDetailsPage: React.FC = () => {
leftIcon={copiedLink ? <CheckCircle className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
onClick={handleCopyLink}
>
{copiedLink ? 'Copied!' : 'Copy'}
{copiedLink ? t('events.copied') : t('events.copy')}
</Button>
</div>
<p className="text-sm text-neutral-600 mt-2">
Share this link with guests. They'll need the password to access the gallery.
{t('events.shareWithGuests')}
</p>
{!event.is_archived && (
@@ -446,7 +448,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setShowPasswordReset(true)}
className="w-full justify-center"
>
Reset Gallery Password
{t('events.resetGalleryPassword')}
</Button>
</div>
)}
@@ -454,23 +456,23 @@ export const EventDetailsPage: React.FC = () => {
{/* Photo Statistics */}
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Photo Statistics</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.photoStatistics')}</h2>
<div className="space-y-3">
<div className="flex items-center justify-between py-2 px-3 bg-neutral-50 rounded-lg">
<span className="text-sm text-neutral-600">Total Photos</span>
<span className="text-sm text-neutral-600">{t('events.totalPhotos')}</span>
<span className="text-sm font-medium">{event.photo_count || 0}</span>
</div>
<div className="flex items-center justify-between py-2 px-3 bg-neutral-50 rounded-lg">
<span className="text-sm text-neutral-600">Total Size</span>
<span className="text-sm text-neutral-600">{t('events.totalSize')}</span>
<span className="text-sm font-medium">
{event.total_size ? `${(event.total_size / (1024 * 1024)).toFixed(1)} MB` : '0 MB'}
</span>
</div>
<div className="flex items-center justify-between py-2 px-3 bg-neutral-50 rounded-lg">
<span className="text-sm text-neutral-600">Categories</span>
<span className="text-sm text-neutral-600">{t('events.categories')}</span>
<span className="text-sm font-medium">{categories.length}</span>
</div>
</div>
@@ -483,7 +485,7 @@ export const EventDetailsPage: React.FC = () => {
onClick={() => setActiveTab('photos')}
className="w-full justify-center"
>
Manage Photos
{t('events.managePhotos')}
</Button>
</div>
</Card>
@@ -491,25 +493,25 @@ export const EventDetailsPage: React.FC = () => {
{/* Actions */}
{!event.is_archived && (
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Actions</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.actions')}</h2>
<div className="space-y-3">
<Button
variant="outline"
leftIcon={<Archive className="w-4 h-4" />}
onClick={() => {
if (confirm('Are you sure you want to archive this event? This action cannot be undone.')) {
if (confirm(t('events.archiveConfirm'))) {
archiveMutation.mutate();
}
}}
isLoading={archiveMutation.isPending}
className="w-full justify-center"
>
Archive Event
{t('events.archiveEvent')}
</Button>
<p className="text-xs text-neutral-500 text-center">
Archiving will create a ZIP file of all photos and remove the gallery from public access.
{t('events.archivingInfo')}
</p>
</div>
</Card>
@@ -519,38 +521,38 @@ export const EventDetailsPage: React.FC = () => {
{/* Right Column - Statistics */}
<div className="space-y-6">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Statistics</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.statistics')}</h2>
{stats ? (
<div className="space-y-4">
<div className="text-center p-4 bg-neutral-50 rounded-lg">
<p className="text-3xl font-bold text-neutral-900">{stats.total_photos}</p>
<p className="text-sm text-neutral-500">Total Photos</p>
<p className="text-sm text-neutral-500">{t('events.totalPhotos')}</p>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="text-center p-3 bg-blue-50 rounded-lg">
<Eye className="w-5 h-5 text-blue-600 mx-auto mb-1" />
<p className="text-xl font-semibold text-neutral-900">{stats.total_views}</p>
<p className="text-xs text-neutral-500">Views</p>
<p className="text-xs text-neutral-500">{t('events.views')}</p>
</div>
<div className="text-center p-3 bg-purple-50 rounded-lg">
<Download className="w-5 h-5 text-purple-600 mx-auto mb-1" />
<p className="text-xl font-semibold text-neutral-900">{stats.total_downloads}</p>
<p className="text-xs text-neutral-500">Downloads</p>
<p className="text-xs text-neutral-500">{t('events.downloads')}</p>
</div>
</div>
<div className="text-center p-3 bg-green-50 rounded-lg">
<Users className="w-5 h-5 text-green-600 mx-auto mb-1" />
<p className="text-xl font-semibold text-neutral-900">{stats.unique_visitors}</p>
<p className="text-xs text-neutral-500">Unique Visitors</p>
<p className="text-xs text-neutral-500">{t('events.uniqueVisitors')}</p>
</div>
</div>
) : (
<div className="text-center py-8 text-neutral-500">
<p>No statistics available yet</p>
<p>{t('events.statisticsNotAvailable')}</p>
</div>
)}
</Card>
@@ -558,11 +560,11 @@ export const EventDetailsPage: React.FC = () => {
{/* Archive Status */}
{event.is_archived && (
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Archive Status</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('events.archiveStatusTitle')}</h2>
<div className="space-y-3">
<div>
<p className="text-sm font-medium text-neutral-500">Archived On</p>
<p className="text-sm font-medium text-neutral-500">{t('events.archivedOn')}</p>
<p className="text-sm text-neutral-900">
{event.archived_at && format(parseISO(event.archived_at), 'MMM d, yyyy h:mm a')}
</p>
@@ -575,16 +577,16 @@ export const EventDetailsPage: React.FC = () => {
leftIcon={<Download className="w-4 h-4" />}
onClick={async () => {
try {
toast.info(`Downloading ${event.event_name} archive...`);
toast.info(t('events.downloadingArchive', { name: event.event_name }));
await archiveService.downloadArchive(Number(id), `${event.slug}-archive.zip`);
toast.success('Download started');
toast.success(t('events.downloadStarted'));
} catch (error) {
toast.error('Failed to download archive');
toast.error(t('events.failedToDownloadArchive'));
}
}}
className="w-full justify-center"
>
Download Archive
{t('events.downloadArchive')}
</Button>
)}
</div>
@@ -601,7 +603,7 @@ export const EventDetailsPage: React.FC = () => {
{showPhotoUpload && (
<Card padding="md" className="mb-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-semibold text-neutral-900">Upload Photos</h2>
<h2 className="text-lg font-semibold text-neutral-900">{t('events.uploadPhotos')}</h2>
<Button
variant="ghost"
size="sm"
@@ -615,7 +617,7 @@ export const EventDetailsPage: React.FC = () => {
onUploadComplete={() => {
queryClient.invalidateQueries({ queryKey: ['admin-event', id] });
queryClient.invalidateQueries({ queryKey: ['admin-event-photos', id] });
toast.success('Photos uploaded successfully');
toast.success(t('toast.uploadSuccess'));
setShowPhotoUpload(false);
refetchPhotos();
}}
@@ -644,7 +646,7 @@ export const EventDetailsPage: React.FC = () => {
leftIcon={<Upload className="w-4 h-4" />}
onClick={() => setShowPhotoUpload(true)}
>
Upload Photos
{t('events.uploadPhotos')}
</Button>
</div>
)}
@@ -652,7 +654,7 @@ export const EventDetailsPage: React.FC = () => {
{/* Photo Grid */}
{photosLoading ? (
<div className="flex items-center justify-center py-12">
<Loading size="lg" text="Loading photos..." />
<Loading size="lg" text={t('events.loadingPhotos')} />
</div>
) : (
<AdminPhotoGrid
@@ -689,9 +691,9 @@ export const EventDetailsPage: React.FC = () => {
<div>
<Card padding="md">
<div className="mb-6">
<h2 className="text-lg font-semibold text-neutral-900 mb-2">Photo Categories</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-2">{t('events.photoCategories')}</h2>
<p className="text-sm text-neutral-600">
Organize your photos into categories. Categories help guests navigate and find specific types of photos.
{t('events.organizingPhotosInfo')}
</p>
</div>
@@ -701,7 +703,7 @@ export const EventDetailsPage: React.FC = () => {
<div className="mt-6 p-4 bg-blue-50 rounded-lg">
<p className="text-sm text-blue-800">
<strong>Tip:</strong> Categories are specific to each event. You can create custom categories like "Ceremony", "Reception", "Portraits", etc.
{t('events.categoriesTip')}
</p>
</div>
</Card>
frontend/src/pages/admin/EventsListPage.tsx
+43 -41
View File
@@ -19,8 +19,10 @@ import { BulkArchiveModal } from '../../components/admin';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { eventsService } from '../../services/events.service';
import type { Event } from '../../types';
import { useTranslation } from 'react-i18next';
export const EventsListPage: React.FC = () => {
const { t } = useTranslation();
const navigate = useNavigate();
const queryClient = useQueryClient();
const [searchParams, setSearchParams] = useSearchParams();
@@ -46,10 +48,10 @@ export const EventsListPage: React.FC = () => {
mutationFn: eventsService.archiveEvent,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-events'] });
toast.success('Event archived successfully');
toast.success(t('toast.eventArchived'));
},
onError: () => {
toast.error('Failed to archive event');
toast.error(t('toast.saveError'));
},
});
@@ -58,10 +60,10 @@ export const EventsListPage: React.FC = () => {
mutationFn: eventsService.deleteEvent,
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['admin-events'] });
toast.success('Event deleted successfully');
toast.success(t('toast.deleteSuccess'));
},
onError: () => {
toast.error('Failed to delete event');
toast.error(t('toast.deleteError'));
},
});
@@ -74,13 +76,13 @@ export const EventsListPage: React.FC = () => {
setShowBulkArchiveModal(false);
if (data.results.failed.length === 0) {
toast.success(`Successfully archived ${data.results.successful.length} events`);
toast.success(t('events.bulkArchiveSuccess', { count: data.results.successful.length }));
} else {
toast.warning(`Archived ${data.results.successful.length} events, ${data.results.failed.length} failed`);
toast.warning(t('events.bulkArchivePartial', { success: data.results.successful.length, failed: data.results.failed.length }));
}
},
onError: () => {
toast.error('Failed to archive events');
toast.error(t('toast.saveError'));
},
});
@@ -140,14 +142,14 @@ export const EventsListPage: React.FC = () => {
};
const getEventStatus = (event: Event) => {
if (event.is_archived) return { label: 'Archived', color: 'text-neutral-500 bg-neutral-100' };
if (!event.is_active) return { label: 'Inactive', color: 'text-red-600 bg-red-100' };
if (event.is_archived) return { label: t('events.archived'), color: 'text-neutral-500 bg-neutral-100' };
if (!event.is_active) return { label: t('events.inactive'), color: 'text-red-600 bg-red-100' };
const days = event.expires_at ? differenceInDays(parseISO(event.expires_at), new Date()) : 0;
if (days <= 0) return { label: 'Expired', color: 'text-red-600 bg-red-100' };
if (days <= 7) return { label: `${days}d left`, color: 'text-orange-600 bg-orange-100' };
if (days <= 0) return { label: t('events.expired'), color: 'text-red-600 bg-red-100' };
if (days <= 7) return { label: t('events.daysLeft', { count: days }), color: 'text-orange-600 bg-orange-100' };
return { label: 'Active', color: 'text-green-600 bg-green-100' };
return { label: t('events.active'), color: 'text-green-600 bg-green-100' };
};
if (isLoading) {
@@ -155,8 +157,8 @@ export const EventsListPage: React.FC = () => {
<div>
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900">Events</h1>
<p className="text-neutral-600 mt-1">Manage your photo galleries and archives</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('events.title')}</h1>
<p className="text-neutral-600 mt-1">{t('events.subtitle')}</p>
</div>
</div>
<SkeletonTable rows={5} />
@@ -167,9 +169,9 @@ export const EventsListPage: React.FC = () => {
if (error) {
return (
<div className="text-center py-12">
<p className="text-red-600">Failed to load events</p>
<p className="text-red-600">{t('events.failedToLoadEvents')}</p>
<Button onClick={() => window.location.reload()} className="mt-4">
Try Again
{t('events.tryAgain')}
</Button>
</div>
);
@@ -181,15 +183,15 @@ export const EventsListPage: React.FC = () => {
{/* Page Header */}
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-neutral-900">Events</h1>
<p className="text-neutral-600 mt-1">Manage your photo galleries and events</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('events.title')}</h1>
<p className="text-neutral-600 mt-1">{t('events.subtitle')}</p>
</div>
<Button
variant="primary"
leftIcon={<Plus className="w-5 h-5" />}
onClick={() => navigate('/admin/events/new')}
>
Create Event
{t('events.createEvent')}
</Button>
</div>
@@ -200,7 +202,7 @@ export const EventsListPage: React.FC = () => {
<div className="flex-1">
<Input
type="text"
placeholder="Search events..."
placeholder={t('events.searchEventsPlaceholder')}
leftIcon={<Search className="w-5 h-5 text-neutral-400" />}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -217,14 +219,14 @@ export const EventsListPage: React.FC = () => {
setSearchParams(searchParams);
}}
>
All ({data?.events.length || 0})
{t('events.all')} ({data?.events.length || 0})
</Button>
<Button
variant={statusFilter === 'active' ? 'primary' : 'outline'}
size="md"
onClick={() => setSearchParams({ filter: 'active' })}
>
Active
{t('events.active')}
</Button>
<Button
variant={isExpiringFilter ? 'primary' : 'outline'}
@@ -232,7 +234,7 @@ export const EventsListPage: React.FC = () => {
onClick={() => setSearchParams({ filter: 'expiring' })}
leftIcon={<AlertTriangle className="w-4 h-4" />}
>
Expiring
{t('events.expiring')}
</Button>
<Button
variant={statusFilter === 'archived' ? 'primary' : 'outline'}
@@ -240,7 +242,7 @@ export const EventsListPage: React.FC = () => {
onClick={() => setSearchParams({ filter: 'archived' })}
leftIcon={<Archive className="w-4 h-4" />}
>
Archived
{t('events.archived')}
</Button>
</div>
</div>
@@ -249,18 +251,18 @@ export const EventsListPage: React.FC = () => {
{selectedEvents.length > 0 && (
<div className="mt-4 p-3 bg-primary-50 rounded-lg flex items-center justify-between">
<span className="text-sm text-primary-900">
{selectedEvents.length} event{selectedEvents.length > 1 ? 's' : ''} selected
{t('events.eventsSelected', { count: selectedEvents.length })}
</span>
<div className="flex gap-2">
<Button variant="outline" size="sm" onClick={() => setSelectedEvents([])}>
Clear
{t('events.clear')}
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setShowBulkArchiveModal(true)}
>
Archive Selected
{t('events.archiveSelected')}
</Button>
</div>
</div>
@@ -282,22 +284,22 @@ export const EventsListPage: React.FC = () => {
/>
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Event
{t('events.event')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Type
{t('events.type')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Date
{t('events.date')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Status
{t('events.status')}
</th>
<th className="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
Expires
{t('events.expires')}
</th>
<th className="px-6 py-3 text-right text-xs font-medium text-neutral-500 uppercase tracking-wider">
Actions
{t('events.actions')}
</th>
</tr>
</thead>
@@ -305,7 +307,7 @@ export const EventsListPage: React.FC = () => {
{filteredEvents.length === 0 ? (
<tr>
<td colSpan={7} className="px-6 py-12 text-center text-neutral-500">
No events found
{t('events.noEventsFound')}
</td>
</tr>
) : (
@@ -362,7 +364,7 @@ export const EventsListPage: React.FC = () => {
className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
>
<Edit className="w-4 h-4" />
View Details
{t('events.viewDetails')}
</button>
{event.share_link ? (
<a
@@ -373,7 +375,7 @@ export const EventsListPage: React.FC = () => {
onClick={() => setActiveDropdown(null)}
>
<ExternalLink className="w-4 h-4" />
View Gallery
{t('events.viewGallery')}
</a>
) : null}
{!event.is_archived ? (
@@ -385,24 +387,24 @@ export const EventsListPage: React.FC = () => {
className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
>
<Archive className="w-4 h-4" />
Archive Event
{t('events.archiveEventAction')}
</button>
) : null}
{event.is_archived ? (
<button
onClick={() => {
toast.info('Download archive coming soon');
toast.info(t('events.downloadArchiveSoon'));
setActiveDropdown(null);
}}
className="w-full text-left px-4 py-2 text-sm text-neutral-700 hover:bg-neutral-100 flex items-center gap-2"
>
<Download className="w-4 h-4" />
Download Archive
{t('events.downloadArchiveAction')}
</button>
) : null}
<button
onClick={() => {
if (confirm('Are you sure you want to delete this event?')) {
if (confirm(t('events.deleteEventConfirm'))) {
deleteMutation.mutate(event.id);
setActiveDropdown(null);
}
@@ -410,7 +412,7 @@ export const EventsListPage: React.FC = () => {
className="w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50 flex items-center gap-2"
>
<Trash2 className="w-4 h-4" />
Delete Event
{t('events.deleteEvent')}
</button>
</div>
</div>
frontend/src/pages/admin/SettingsPage.tsx
+50 -53
View File
@@ -103,11 +103,11 @@ export const SettingsPage: React.FC = () => {
return settingsService.updateSettings(settingsData);
},
onSuccess: () => {
toast.success('General settings saved successfully');
toast.success(t('toast.settingsSaved'));
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
},
onError: () => {
toast.error('Failed to save general settings');
toast.error(t('toast.saveError'));
}
});
@@ -121,18 +121,18 @@ export const SettingsPage: React.FC = () => {
return settingsService.updateSettings(settingsData);
},
onSuccess: () => {
toast.success('Security settings saved successfully');
toast.success(t('toast.settingsSaved'));
queryClient.invalidateQueries({ queryKey: ['admin-settings'] });
},
onError: () => {
toast.error('Failed to save security settings');
toast.error(t('toast.saveError'));
}
});
if (isLoading) {
return (
<div className="flex items-center justify-center min-h-[400px]">
<Loading size="lg" text="Loading settings..." />
<Loading size="lg" text={t('settings.loadingSettings')} />
</div>
);
}
@@ -140,8 +140,8 @@ export const SettingsPage: React.FC = () => {
return (
<div>
<div className="mb-6">
<h1 className="text-2xl font-bold text-neutral-900">System Settings</h1>
<p className="text-neutral-600 mt-1">Configure system-wide settings and preferences</p>
<h1 className="text-2xl font-bold text-neutral-900">{t('settings.title')}</h1>
<p className="text-neutral-600 mt-1">{t('settings.subtitle')}</p>
</div>
{/* Tab Navigation */}
@@ -155,7 +155,7 @@ export const SettingsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
General
{t('settings.general.title')}
</button>
<button
onClick={() => setActiveTab('storage')}
@@ -165,7 +165,7 @@ export const SettingsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
Storage
{t('settings.storage.title')}
</button>
<button
onClick={() => setActiveTab('security')}
@@ -175,7 +175,7 @@ export const SettingsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
Security
{t('settings.security.title')}
</button>
<button
onClick={() => setActiveTab('categories')}
@@ -185,7 +185,7 @@ export const SettingsPage: React.FC = () => {
: 'border-transparent text-neutral-500 hover:text-neutral-700'
}`}
>
Categories
{t('settings.categories.title')}
</button>
</nav>
</div>
@@ -194,12 +194,12 @@ export const SettingsPage: React.FC = () => {
{activeTab === 'general' && (
<div className="space-y-6">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Site Configuration</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.siteConfiguration')}</h2>
<div className="space-y-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Site URL
{t('settings.general.siteUrl')}
</label>
<Input
type="url"
@@ -209,14 +209,14 @@ export const SettingsPage: React.FC = () => {
leftIcon={<Globe className="w-5 h-5 text-neutral-400" />}
/>
<p className="text-xs text-neutral-500 mt-1">
Used for generating gallery links in emails
{t('settings.general.siteUrlHelp')}
</p>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Default Expiration (days)
{t('settings.general.defaultExpiration')}
</label>
<Input
type="number"
@@ -228,7 +228,7 @@ export const SettingsPage: React.FC = () => {
</div>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Max File Size (MB)
{t('settings.general.maxFileSize')}
</label>
<Input
type="number"
@@ -242,7 +242,7 @@ export const SettingsPage: React.FC = () => {
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Allowed File Types
{t('settings.general.allowedFileTypes')}
</label>
<Input
type="text"
@@ -251,14 +251,14 @@ export const SettingsPage: React.FC = () => {
placeholder="jpg,jpeg,png,gif"
/>
<p className="text-xs text-neutral-500 mt-1">
Comma-separated list of file extensions
{t('settings.general.allowedFileTypesHelp')}
</p>
</div>
</div>
</Card>
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Feature Toggles</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.general.featureToggles')}</h2>
<div className="space-y-3">
<label className="flex items-center">
@@ -268,7 +268,7 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_watermark: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Enable watermark on photos</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableWatermark')}</span>
</label>
<label className="flex items-center">
@@ -278,7 +278,7 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_analytics: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Enable analytics tracking</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableAnalytics')}</span>
</label>
<label className="flex items-center">
@@ -288,7 +288,7 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setGeneralSettings(prev => ({ ...prev, enable_registration: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Allow self-registration for admins</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.enableRegistration')}</span>
</label>
<label className="flex items-center">
@@ -298,7 +298,7 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setGeneralSettings(prev => ({ ...prev, maintenance_mode: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Enable maintenance mode</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.general.maintenanceMode')}</span>
</label>
</div>
</Card>
@@ -320,7 +320,7 @@ export const SettingsPage: React.FC = () => {
<option value="de">Deutsch</option>
</select>
<p className="text-xs text-neutral-500 mt-1">
Sets the default language for all gallery pages and login screens
{t('settings.general.defaultLanguageHelp')}
</p>
</div>
</div>
@@ -332,7 +332,7 @@ export const SettingsPage: React.FC = () => {
isLoading={saveGeneralMutation.isPending}
leftIcon={<Save className="w-5 h-5" />}
>
{t('settings.general.saveSettings')}
{t('settings.general.saveGeneralSettings')}
</Button>
</div>
</Card>
@@ -343,23 +343,23 @@ export const SettingsPage: React.FC = () => {
{activeTab === 'storage' && storageInfo && (
<div className="space-y-6">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Storage Overview</h2>
<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">Total Used</p>
<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">Archive Storage</p>
<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">Storage Limit</p>
<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>
@@ -368,7 +368,7 @@ export const SettingsPage: React.FC = () => {
<div className="mb-4">
<div className="flex justify-between text-sm mb-1">
<span className="text-neutral-600">Storage Usage</span>
<span className="text-neutral-600">{t('settings.storage.storageUsage')}</span>
<span className="font-medium">
{Math.round((storageInfo.total_used / storageInfo.storage_limit) * 100)}%
</span>
@@ -384,7 +384,7 @@ export const SettingsPage: React.FC = () => {
</div>
<div className="mt-6">
<h3 className="text-sm font-semibold text-neutral-900 mb-3">Storage by Event</h3>
<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">
@@ -402,10 +402,9 @@ export const SettingsPage: React.FC = () => {
<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">Storage Management</h3>
<h3 className="text-sm font-semibold text-amber-900">{t('settings.storage.storageManagement')}</h3>
<p className="text-sm text-amber-700 mt-1">
Consider archiving or deleting old events to free up storage space.
Archived events are compressed and use less storage than active galleries.
{t('settings.storage.storageManagementHelp')}
</p>
</div>
</div>
@@ -417,7 +416,7 @@ export const SettingsPage: React.FC = () => {
{activeTab === 'security' && (
<div className="space-y-6">
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Password Settings</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.passwordSettings')}</h2>
<div className="space-y-4">
<label className="flex items-center">
@@ -427,12 +426,12 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setSecuritySettings(prev => ({ ...prev, require_password: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Require password for all galleries</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.requirePassword')}</span>
</label>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Minimum Password Length
{t('settings.security.minPasswordLength')}
</label>
<Input
type="number"
@@ -446,13 +445,13 @@ export const SettingsPage: React.FC = () => {
</Card>
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">Session & Authentication</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.sessionAuth')}</h2>
<div className="space-y-4">
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Session Timeout (minutes)
{t('settings.security.sessionTimeout')}
</label>
<Input
type="number"
@@ -464,7 +463,7 @@ export const SettingsPage: React.FC = () => {
</div>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Max Login Attempts
{t('settings.security.maxLoginAttempts')}
</label>
<Input
type="number"
@@ -483,13 +482,13 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_2fa: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Enable two-factor authentication for admins</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.enable2FA')}</span>
</label>
</div>
</Card>
<Card padding="md">
<h2 className="text-lg font-semibold text-neutral-900 mb-4">reCAPTCHA Settings</h2>
<h2 className="text-lg font-semibold text-neutral-900 mb-4">{t('settings.security.recaptchaSettings')}</h2>
<div className="space-y-4">
<label className="flex items-center">
@@ -499,32 +498,32 @@ export const SettingsPage: React.FC = () => {
onChange={(e) => setSecuritySettings(prev => ({ ...prev, enable_recaptcha: e.target.checked }))}
className="w-4 h-4 text-primary-600 rounded focus:ring-primary-500"
/>
<span className="ml-2 text-sm text-neutral-700">Enable reCAPTCHA for login forms</span>
<span className="ml-2 text-sm text-neutral-700">{t('settings.security.enableRecaptcha')}</span>
</label>
{securitySettings.enable_recaptcha && (
<>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Site Key
{t('settings.security.siteKey')}
</label>
<Input
type="text"
value={securitySettings.recaptcha_site_key}
onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_site_key: e.target.value }))}
placeholder="Your reCAPTCHA site key"
placeholder={t('settings.security.siteKey')}
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
/>
</div>
<div>
<label className="block text-sm font-medium text-neutral-700 mb-1">
Secret Key
{t('settings.security.secretKey')}
</label>
<Input
type="password"
value={securitySettings.recaptcha_secret_key}
onChange={(e) => setSecuritySettings(prev => ({ ...prev, recaptcha_secret_key: e.target.value }))}
placeholder="Your reCAPTCHA secret key"
placeholder={t('settings.security.secretKey')}
leftIcon={<Key className="w-5 h-5 text-neutral-400" />}
/>
</div>
@@ -535,7 +534,7 @@ export const SettingsPage: React.FC = () => {
<div className="flex items-start gap-3">
<AlertCircle className="w-5 h-5 text-blue-600 flex-shrink-0" />
<div className="text-sm text-blue-800">
<p>Get your reCAPTCHA keys from <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
<p>{t('settings.security.recaptchaHelp')} <a href="https://www.google.com/recaptcha/admin" target="_blank" rel="noopener noreferrer" className="underline">Google reCAPTCHA Admin</a></p>
</div>
</div>
</div>
@@ -548,7 +547,7 @@ export const SettingsPage: React.FC = () => {
isLoading={saveSecurityMutation.isPending}
leftIcon={<Save className="w-5 h-5" />}
>
Save Security Settings
{t('settings.security.saveSecuritySettings')}
</Button>
</div>
</Card>
@@ -566,11 +565,9 @@ export const SettingsPage: React.FC = () => {
<div className="flex items-start gap-3">
<Image className="w-5 h-5 text-blue-600 flex-shrink-0" />
<div>
<h3 className="text-sm font-semibold text-blue-900">About Photo Categories</h3>
<h3 className="text-sm font-semibold text-blue-900">{t('settings.categories.about')}</h3>
<p className="text-sm text-blue-700 mt-1">
Global categories are available for all events. You can also create event-specific
categories when editing individual events. Categories help organize photos and
allow guests to filter photos by type in the gallery view.
{t('settings.categories.aboutText')}
</p>
</div>
</div>