picpeak/PRODUCTION_TODO_LIST.md

🚀 Production Todo List - PicPeak Enhancements

Priority: HIGH - These are production fixes and enhancements Estimated Time: 2-3 days Status: Ready for Implementation

---

📋 Action Items Overview

1. Password Complexity Settings
2. Gallery Login Page - Remove Event Date
3. Analytics Umami Configuration Check
4. Analytics Numbers Accuracy Fix
5. Missing Translation Key Fix
6. Complete Translation Audit
7. CMS Page Long German Text Formatting
8. Event Creation Date Format Fix
9. Language Selector Country Flags Chrome Fix

---

1. Password Complexity Settings

Problem: Admin security tab only has password minimum length setting, no complexity requirements.

Current State:

• File: frontend/src/pages/admin/SettingsPage.tsx (lines 635-669)
• Backend: backend/src/utils/passwordValidation.js has complexity logic but not exposed in settings

Implementation:

Frontend Changes:

// File: frontend/src/pages/admin/SettingsPage.tsx
// Add to securitySettings state (around line 61):
const [securitySettings, setSecuritySettings] = useState({
  require_password: true,
  password_min_length: 8,
  password_complexity_level: 'medium', // ADD THIS
  enable_2fa: false,
  session_timeout_minutes: 60,
  max_login_attempts: 5,
  enable_recaptcha: false,
  recaptcha_site_key: '',
  recaptcha_secret_key: ''
});

// Add complexity setting UI after password_min_length (around line 660):
<div>
  <label className="block text-sm font-medium text-neutral-700 mb-1">
    {t('settings.security.passwordComplexity')}
  </label>
  <select
    value={securitySettings.password_complexity_level}
    onChange={(e) => setSecuritySettings(prev => ({ ...prev, password_complexity_level: e.target.value }))}
    className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:ring-2 focus:ring-primary-500"
  >
    <option value="low">{t('settings.security.complexityLow')}</option>
    <option value="medium">{t('settings.security.complexityMedium')}</option>
    <option value="high">{t('settings.security.complexityHigh')}</option>
  </select>
  <p className="text-xs text-neutral-500 mt-1">
    {t('settings.security.complexityHelp')}
  </p>
</div>

Translation Updates:

// File: frontend/src/i18n/locales/en.json (add to settings.security):
"passwordComplexity": "Password Complexity Level",
"complexityLow": "Low - Length only",
"complexityMedium": "Medium - Letters and numbers",
"complexityHigh": "High - Letters, numbers, and symbols",
"complexityHelp": "Controls password requirements for new gallery passwords"

// File: frontend/src/i18n/locales/de.json (add to settings.security):
"passwordComplexity": "Passwort-Komplexitätsstufe",
"complexityLow": "Niedrig - Nur Länge",
"complexityMedium": "Mittel - Buchstaben und Zahlen",
"complexityHigh": "Hoch - Buchstaben, Zahlen und Symbole",
"complexityHelp": "Steuert Passwort-Anforderungen für neue Galerie-Passwörter"

Backend Changes:

// File: backend/src/utils/passwordValidation.js
// Update PASSWORD_CONFIG based on settings (around line 8):
const getPasswordConfigFromSettings = async () => {
  const { db } = require('../database/db');
  const settings = await db('admin_settings').select('key', 'value');
  const settingsMap = settings.reduce((acc, setting) => {
    acc[setting.key] = setting.value;
    return acc;
  }, {});
  
  const complexityLevel = settingsMap.security_password_complexity_level || 'medium';
  
  return {
    ...PASSWORD_CONFIG,
    minLength: parseInt(settingsMap.security_password_min_length) || 8,
    requireUppercase: complexityLevel !== 'low',
    requireLowercase: complexityLevel !== 'low', 
    requireNumbers: complexityLevel === 'high' || complexityLevel === 'medium',
    requireSpecialChars: complexityLevel === 'high',
    minStrengthScore: complexityLevel === 'high' ? 3 : (complexityLevel === 'medium' ? 2 : 1)
  };
};

---

2. Gallery Login Page - Remove Event Date

Problem: Gallery login shows event date which is often used as password, creating security risk.

Current State:

• File: frontend/src/pages/GalleryPage.tsx (lines 275-285)
• Shows both event name and date with calendar icon

Implementation:

Frontend Changes:

// File: frontend/src/pages/GalleryPage.tsx
// Replace the date display section (around lines 280-285):

// REMOVE THIS:
/*
<div className="flex items-center justify-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
  <Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
  <span className="truncate">{format(parseISO(galleryInfo!.event_date), 'PP')}</span>
</div>
*/

// REPLACE WITH:
<div className="text-center text-xs sm:text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
  <span className="truncate">{galleryInfo?.event_type ? t(`events.types.${galleryInfo.event_type}`) : ''}</span>
</div>

Additional Layout Improvements:

// File: frontend/src/pages/GalleryPage.tsx
// Update the header section for better visual balance (around line 275):
<div className="text-center mb-4 sm:mb-6">
  <img 
    src={settingsData?.branding_logo_url ? 
      buildResourceUrl(settingsData.branding_logo_url) : 
      '/picpeak-logo-transparent.png'
    } 
    alt={settingsData?.branding_company_name || 'PicPeak'}
    className="h-12 sm:h-16 lg:h-20 w-auto object-contain mx-auto mb-3 sm:mb-4"
  />
  <h1 className="text-xl sm:text-2xl lg:text-3xl font-bold mb-2 px-2" style={{ color: 'var(--color-text, #171717)' }}>
    {galleryInfo?.event_name}
  </h1>
  {/* Event type instead of date */}
  {galleryInfo?.event_type && (
    <div className="text-center text-sm" style={{ color: 'var(--color-text, #171717)', opacity: 0.7 }}>
      <span className="px-3 py-1 bg-white/20 rounded-full backdrop-blur-sm">
        {t(`events.types.${galleryInfo.event_type}`)}
      </span>
    </div>
  )}
</div>

---

3. Analytics Umami Configuration Check

Problem: Analytics page shows "Umami Analytics Not Configured" even when configured in settings.

Current State:

• File: frontend/src/pages/admin/AnalyticsPage.tsx (lines 67-87)
• Check logic may not be working correctly

Implementation:

Frontend Fix:

// File: frontend/src/pages/admin/AnalyticsPage.tsx
// Fix the Umami configuration check (around lines 67-87):

// REPLACE the useEffect:
useEffect(() => {
  const fetchUmamiConfig = async () => {
    try {
      const response = await fetch(`${import.meta.env.VITE_API_URL}/api/public/settings`);
      const settings = await response.json();
      
      // Check if Umami is properly configured
      const isConfigured = settings.analytics_umami_enabled && 
                          settings.analytics_umami_url && 
                          settings.analytics_umami_website_id;
      
      if (isConfigured) {
        setUmamiConfig({
          url: settings.analytics_umami_url,
          shareUrl: settings.analytics_umami_share_url,
          websiteId: settings.analytics_umami_website_id,
          enabled: true
        });
      } else {
        // Fall back to environment variables
        const envConfigured = import.meta.env.VITE_UMAMI_URL && 
                             import.meta.env.VITE_UMAMI_WEBSITE_ID;
        
        setUmamiConfig({
          url: import.meta.env.VITE_UMAMI_URL,
          shareUrl: import.meta.env.VITE_UMAMI_SHARE_URL,
          websiteId: import.meta.env.VITE_UMAMI_WEBSITE_ID,
          enabled: envConfigured
        });
      }
    } catch (error) {
      console.error('Failed to fetch Umami config:', error);
      setUmamiConfig({ enabled: false });
    }
  };

  fetchUmamiConfig();
}, []);

// Update the configuration notice condition (around line 441):
{!umamiConfig.enabled && (
  <Card padding="md" className="mt-6 bg-amber-50 border-amber-200">
    <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">{t('analytics.notConfigured')}</p>
        <p className="text-sm text-amber-700 mt-1">
          {t('analytics.configureInstructions')}
        </p>
      </div>
    </div>
  </Card>
)}

---

4. Analytics Numbers Accuracy Fix

Problem: Dashboard shows correct numbers but analytics page shows different numbers.

Current State:

• Dashboard: frontend/src/services/admin.service.ts getDashboardStats()
• Analytics: frontend/src/services/admin.service.ts getAnalytics()
• Backend: Different endpoints with potentially different calculation logic

Implementation:

Backend Investigation and Fix:

// File: backend/src/routes/adminDashboard.js
// Ensure consistent calculation logic in both /stats and /analytics endpoints

// Update the analytics endpoint (around line 216) to use the same calculation as stats:
router.get('/analytics', adminAuth, async (req, res) => {
  try {
    const days = sanitizeDays(req.query.days || 7);
    
    // Use same calculation logic as /stats endpoint
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(thirtyDaysAgo.getDate() - days);
    
    // Get total downloads - SAME logic as /stats
    const totalDownloads = await db('access_logs')
      .whereIn('action', ['download', 'download_all'])
      .where('timestamp', '>=', thirtyDaysAgo.toISOString())
      .count('id as count')
      .first();

    // Get total views - SAME logic as /stats  
    const totalViews = await db('access_logs')
      .where('action', 'view')
      .where('timestamp', '>=', thirtyDaysAgo.toISOString())
      .count('id as count')
      .first();

    // ... rest of the analytics logic

    // Add totals to response for verification
    res.json({
      chartData: dates,
      topGalleries,
      devices,
      totals: {
        totalViews: totalViews.count,
        totalDownloads: totalDownloads.count,
        period: `${days} days`
      }
    });
  } catch (error) {
    console.error('Analytics error:', error);
    res.status(500).json({ error: 'Failed to fetch analytics data' });
  }
});

Frontend Verification:

// File: frontend/src/pages/admin/AnalyticsPage.tsx
// Add debug information in development (around line 107):

const analytics: ComponentAnalyticsData | undefined = React.useMemo(() => {
  if (!apiData) return undefined;

  // Calculate totals from chart data
  const totalViews = apiData.chartData.reduce((sum, day) => sum + day.views, 0);
  const totalDownloads = apiData.chartData.reduce((sum, day) => sum + day.downloads, 0);

  // Debug: Compare with API totals in development
  if (process.env.NODE_ENV === 'development' && apiData.totals) {
    console.log('Analytics Debug:', {
      calculatedViews: totalViews,
      apiTotalViews: apiData.totals.totalViews,
      calculatedDownloads: totalDownloads,
      apiTotalDownloads: apiData.totals.totalDownloads,
      period: apiData.totals.period
    });
  }

  // ... rest of the calculation
}, [apiData]);

---

5. Missing Translation Key Fix

Problem: Missing translation key admin.activities.analytics_settings_updated in recent activities.

Current State:

• Key not found in frontend/src/i18n/locales/en.json or de.json

Implementation:

Translation Updates:

// File: frontend/src/i18n/locales/en.json
// Add to admin.activities section (around line 785):
"analytics_settings_updated": "Analytics settings updated"

// File: frontend/src/i18n/locales/de.json  
// Add to admin.activities section (around line 710):
"analytics_settings_updated": "Analytik-Einstellungen aktualisiert"

Backend Activity Logging:

// File: backend/src/routes/adminSettings.js (or wherever analytics settings are updated)
// Ensure activity is logged with correct key:

await logActivity(req.admin.id, 'analytics_settings_updated', {
  settingsUpdated: Object.keys(updateData).filter(key => key.startsWith('analytics_')),
  timestamp: new Date()
});

---

6. Complete Translation Audit

Problem: Need to check all recent activity types for missing translations.

Current State:

• Activity types defined in backend, translations in frontend

Implementation:

Audit Script:

# Create a script to find missing translation keys
# File: scripts/audit-translations.js

const fs = require('fs');
const path = require('path');

// Read translation files
const enTranslations = JSON.parse(fs.readFileSync('frontend/src/i18n/locales/en.json', 'utf8'));
const deTranslations = JSON.parse(fs.readFileSync('frontend/src/i18n/locales/de.json', 'utf8'));

// Common activity types that should exist
const requiredActivityKeys = [
  'event_created', 'event_updated', 'event_deleted', 'event_archived',
  'photos_uploaded', 'photo_deleted', 'photos_bulk_deleted',
  'archive_downloaded', 'archive_deleted', 'archive_restored',
  'email_config_updated', 'email_template_updated',
  'branding_updated', 'theme_updated', 'analytics_settings_updated',
  'general_settings_updated', 'security_settings_updated',
  'category_created', 'category_updated', 'category_deleted',
  'cms_page_updated', 'favicon_uploaded',
  'bulk_download', 'gallery_password_entry', 'expiration_warning_viewed'
];

console.log('Missing English translations:');
requiredActivityKeys.forEach(key => {
  if (!enTranslations.admin?.activities?.[key]) {
    console.log(`- admin.activities.${key}`);
  }
});

console.log('\nMissing German translations:');
requiredActivityKeys.forEach(key => {
  if (!deTranslations.admin?.activities?.[key]) {
    console.log(`- admin.activities.${key}`);
  }
});

Missing Translations to Add:

// File: frontend/src/i18n/locales/en.json
// Add any missing keys to admin.activities:
"analytics_settings_updated": "Analytics settings updated",
"cms_page_updated": "CMS page updated: {{page}}",
"security_settings_updated": "Security settings updated", 
"password_reset": "Password reset for: {{eventName}}",
"admin_logout": "Admin {{actorName}} logged out",
"system_activity": "System activity: {{type}}"

// File: frontend/src/i18n/locales/de.json
// German equivalents:
"analytics_settings_updated": "Analytik-Einstellungen aktualisiert",
"cms_page_updated": "CMS-Seite aktualisiert: {{page}}",
"security_settings_updated": "Sicherheitseinstellungen aktualisiert",
"password_reset": "Passwort zurückgesetzt für: {{eventName}}",
"admin_logout": "Admin {{actorName}} abgemeldet",
"system_activity": "Systemaktivität: {{type}}"

---

7. CMS Page Long German Text Formatting

Problem: Long German text like "Datenschutzerklärung" pushes image to left and looks ugly.

Current State:

• File: frontend/src/pages/admin/CMSPageEnhanced.tsx (lines 130-170)
• File: frontend/src/pages/admin/CMSPage.tsx (lines 90-110)

Implementation:

CSS Fix:

// File: frontend/src/pages/admin/CMSPageEnhanced.tsx
// Update the page selection buttons (around line 130):

<button
  key={page.slug}
  onClick={() => {
    if (hasUnsavedChanges) {
      if (confirm('You have unsaved changes. Do you want to save them?')) {
        handleSave();
      }
    }
    setSelectedPage(page.slug);
  }}
  className={`w-full text-left px-4 py-3 rounded-lg transition-colors flex items-center gap-3 ${
    selectedPage === page.slug
      ? 'bg-primary-100 text-primary-700 border border-primary-300'
      : 'bg-white border border-neutral-200 hover:bg-neutral-50'
  }`}
>
  <FileText className="w-5 h-5 flex-shrink-0" />
  <div className="flex-1 min-w-0"> {/* Add min-w-0 for text overflow */}
    <p className="font-medium text-sm truncate" title={t(`legal.${page.slug}`)}>
      {t(`legal.${page.slug}`)}
    </p>
    <p className="text-xs text-neutral-500 truncate">/{page.slug}</p>
  </div>
  {selectedPage === page.slug && hasUnsavedChanges && (
    <div className="w-2 h-2 bg-yellow-500 rounded-full flex-shrink-0" />
  )}
</button>

Alternative - Responsive Layout:

// File: frontend/src/pages/admin/CMSPageEnhanced.tsx
// Alternative: Use responsive text sizing

<p className="font-medium text-sm sm:text-base truncate" title={t(`legal.${page.slug}`)}>
  {/* For very long German words, show abbreviated version */}
  {t(`legal.${page.slug}`).length > 15 
    ? `${t(`legal.${page.slug}`).substring(0, 12)}...`
    : t(`legal.${page.slug}`)
  }
</p>

---

8. Event Creation Date Format Fix

Problem: Event creation page uses browser English format instead of saved admin settings date format.

Current State:

• Files: frontend/src/pages/admin/CreateEventPageEnhanced.tsx, CreateEventPage.tsx
• Uses browser locale instead of admin date format settings

Implementation:

Hook Enhancement:

// File: frontend/src/hooks/useLocalizedDate.ts
// Add admin settings integration:

import { useTranslation } from 'react-i18next';
import { format as dateFnsFormat, formatDistanceToNow as dateFnsFormatDistanceToNow } from 'date-fns';
import { de, enUS, enGB } from 'date-fns/locale';
import { useQuery } from '@tanstack/react-query';
import { settingsService } from '../services/settings.service';

export const useLocalizedDate = () => {
  const { i18n } = useTranslation();
  
  // Fetch admin date format settings
  const { data: settings } = useQuery({
    queryKey: ['admin-date-settings'],
    queryFn: () => settingsService.getAllSettings(),
    staleTime: 10 * 60 * 1000, // Cache for 10 minutes
  });
  
  const getLocale = () => {
    // Use admin settings if available, otherwise fall back to i18n language
    const savedFormat = settings?.general_date_format;
    if (savedFormat?.locale) {
      switch (savedFormat.locale) {
        case 'en-US': return enUS;
        case 'en-GB': return enGB;
        case 'de': return de;
        default: return i18n.language === 'de' ? de : enUS;
      }
    }
    return i18n.language === 'de' ? de : enUS;
  };
  
  const getDateFormat = () => {
    const savedFormat = settings?.general_date_format?.format;
    if (savedFormat) {
      // Convert admin format to date-fns format
      switch (savedFormat) {
        case 'DD/MM/YYYY': return 'dd/MM/yyyy';
        case 'MM/DD/YYYY': return 'MM/dd/yyyy';
        case 'YYYY-MM-DD': return 'yyyy-MM-dd';
        case 'DD.MM.YYYY': return 'dd.MM.yyyy';
        default: return 'dd/MM/yyyy';
      }
    }
    return i18n.language === 'de' ? 'dd.MM.yyyy' : 'MM/dd/yyyy';
  };
  
  const format = (date: Date | string, formatStr?: string) => {
    const dateObj = typeof date === 'string' ? new Date(date) : date;
    const finalFormat = formatStr || getDateFormat();
    return dateFnsFormat(dateObj, finalFormat, { locale: getLocale() });
  };
  
  // ... rest of the hook
};

Event Creation Page Fix:

// File: frontend/src/pages/admin/CreateEventPageEnhanced.tsx
// Update the expiration date display (around line 495):

{formData.event_date && (
  <p className="mt-2 text-sm text-neutral-500">
    {t('events.expiresOn')}: {format(addDays(new Date(formData.event_date), formData.expires_in_days), 'PPP')}
  </p>
)}

---

9. Language Selector Country Flags Chrome Fix

Problem: Country flags not showing in Chrome browser on Windows in admin language selector.

Current State:

• File: frontend/src/components/common/LanguageSelector.tsx (lines 5-8)
• Uses emoji flags: 🇬🇧, 🇩🇪

Implementation:

SVG Icon Replacement:

// File: frontend/src/components/common/LanguageSelector.tsx
// Replace emoji flags with SVG icons or image flags:

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react';

// SVG flag components for better browser compatibility
const FlagGB: React.FC<{ className?: string }> = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 640 480" fill="none">
    <path fill="#012169" d="M0 0h640v480H0z"/>
    <path fill="#FFF" d="m75 0 244 181L562 0h78v62L400 241l240 178v61h-80L320 301 81 480H0v-60l239-178L0 64V0h75z"/>
    <path fill="#C8102E" d="m424 281 216 159v40L369 281h55zm-184 20 6 35L54 480H0l246-179zM640 0v3L391 191l2-44L590 0h50zM0 0l239 176h-60L0 42V0z"/>
    <path fill="#FFF" d="M241 0v480h160V0H241zM0 160v160h640V160H0z"/>
    <path fill="#C8102E" d="M0 193v96h640v-96H0zM273 0v480h96V0h-96z"/>
  </svg>
);

const FlagDE: React.FC<{ className?: string }> = ({ className = "w-4 h-4" }) => (
  <svg className={className} viewBox="0 0 640 480" fill="none">
    <path fill="#ffce00" d="M0 320h640v160H0z"/>
    <path d="M0 0h640v160H0z"/>
    <path fill="#d00" d="M0 160h640v160H0z"/>
  </svg>
);

const languages = [
  { code: 'en', name: 'English', flag: FlagGB },
  { code: 'de', name: 'Deutsch', flag: FlagDE },
];

export const LanguageSelector: React.FC = () => {
  const { i18n } = useTranslation();
  const [isOpen, setIsOpen] = React.useState(false);

  const currentLanguage = languages.find(lang => lang.code === i18n.language) || languages[0];

  const handleLanguageChange = (languageCode: string) => {
    i18n.changeLanguage(languageCode);
    setIsOpen(false);
  };

  return (
    <div className="relative">
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-neutral-700 bg-white border border-neutral-300 rounded-lg hover:bg-neutral-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
      >
        <Globe className="w-4 h-4" />
        <currentLanguage.flag className="w-4 h-4" />
        <span>{currentLanguage.name}</span>
      </button>

      {isOpen && (
        <div className="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-neutral-200 py-1 z-50">
          {languages.map((language) => (
            <button
              key={language.code}
              onClick={() => handleLanguageChange(language.code)}
              className={`w-full text-left px-4 py-2 text-sm hover:bg-neutral-50 flex items-center gap-3 ${
                language.code === i18n.language
                  ? 'text-primary-600 bg-primary-50'
                  : 'text-neutral-700'
              }`}
            >
              <language.flag className="w-4 h-4" />
              <span>{language.name}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
};

Alternative - Image Flags:

// Alternative solution using flag images:
const languages = [
  { code: 'en', name: 'English', flag: '/flags/gb.svg' },
  { code: 'de', name: 'Deutsch', flag: '/flags/de.svg' },
];

// Add images to public/flags/ directory
// Use: <img src={language.flag} alt={language.name} className="w-4 h-4" />

---

🔍 Testing Instructions

After implementing each fix:

1. Password Complexity: Test different complexity levels in admin settings
2. Gallery Login: Verify event date is hidden on gallery login pages
3. Analytics Check: Verify "Not Configured" message appears/disappears correctly
4. Analytics Numbers: Compare dashboard vs analytics page numbers
5. Translations: Check recent activities display correct translations
6. CMS Formatting: Test with long German page names
7. Date Format: Test event creation with different admin date settings
8. Language Flags: Test language selector in Chrome on Windows

Regression Testing:

• Gallery login still works correctly
• Analytics page displays correctly when Umami is configured
• Admin settings save and load correctly
• Event creation works with all date formats
• Language switching works in all browsers

---

📝 Notes

• All changes maintain backward compatibility
• No database schema changes required
• Frontend changes are non-breaking
• Can be deployed incrementally
• All text is properly internationalized

⚠️ Important: Test each fix in isolation before combining, especially the analytics changes as they affect production data display.