chore: bump frontend version to 1.0.90

- Add convertDateFormat function to automatically fix DD->dd, YYYY->yyyy
- Handles existing database values with old format strings
- Prevents RangeError when using old formats stored in settings
- Ensures backward compatibility without requiring database updates

This fix converts formats on-the-fly so existing production data
with old formats like 'DD.MM.YYYY' will work correctly.

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

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

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "picpeak-frontend",
-  "version": "1.0.88",
+  "version": "1.0.90",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "picpeak-frontend",
-      "version": "1.0.88",
+      "version": "1.0.90",
       "dependencies": {
         "@tanstack/react-query": "^5.0.0",
         "@tiptap/extension-character-count": "^2.26.1",

frontend/package.json

@@ -1,7 +1,7 @@
 {
   "name": "picpeak-frontend",
   "private": true,
-  "version": "1.0.88",
+  "version": "1.0.90",
   "type": "module",
   "scripts": {
     "dev": "vite",

frontend/src/hooks/useLocalizedDate.ts

@@ -4,6 +4,14 @@ import { de, enUS } from 'date-fns/locale';
 import { useQuery } from '@tanstack/react-query';
 import { publicSettingsService } from '../services/publicSettings.service';
 
+// Convert old date format strings to new date-fns format
+const convertDateFormat = (format: string): string => {
+  return format
+    .replace(/DD/g, 'dd')    // Days: DD -> dd
+    .replace(/YYYY/g, 'yyyy') // Years: YYYY -> yyyy
+    .replace(/YY/g, 'yy');    // Short years: YY -> yy
+};
+
 export const useLocalizedDate = () => {
   const { i18n } = useTranslation();
   
@@ -22,7 +30,18 @@ export const useLocalizedDate = () => {
   const format = (date: Date | string, formatStr?: string) => {
     const dateObj = typeof date === 'string' ? new Date(date) : date;
     // Use admin-configured date format if available and no format string provided
-    const dateFormat = formatStr || settings?.general_date_format || 'PPP';
+    let dateFormat = formatStr;
+    if (!dateFormat && settings?.general_date_format) {
+      // Handle both string and object formats
+      dateFormat = typeof settings.general_date_format === 'string' 
+        ? settings.general_date_format 
+        : settings.general_date_format.format || 'PPP';
+    }
+    dateFormat = dateFormat || 'PPP';
+    
+    // Convert old format to new format
+    dateFormat = convertDateFormat(dateFormat);
+    
     return dateFnsFormat(dateObj, dateFormat, { locale: getLocale() });
   };
   
@@ -35,6 +54,12 @@ export const useLocalizedDate = () => {
     format,
     formatDistanceToNow,
     locale: getLocale(),
-    dateFormat: settings?.general_date_format || 'PPP'
+    dateFormat: settings?.general_date_format 
+      ? convertDateFormat(
+          typeof settings.general_date_format === 'string' 
+            ? settings.general_date_format 
+            : settings.general_date_format.format || 'PPP'
+        )
+      : 'PPP'
   };
 };

frontend/src/pages/admin/CreateEventPageEnhanced.tsx

@@ -84,7 +84,7 @@ export const CreateEventPageEnhanced: React.FC = () => {
   const [formData, setFormData] = useState<FormData>({
     event_type: 'wedding',
     event_name: '',
-    event_date: format(new Date(), 'yyyy-MM-dd'),
+    event_date: new Date().toISOString().split('T')[0], // Initialize with ISO date format
     host_name: '',
     host_email: '',
     admin_email: '',

frontend/src/pages/admin/SettingsPage.tsx

@@ -57,7 +57,7 @@ export const SettingsPage: React.FC = () => {
     enable_registration: false,
     maintenance_mode: false,
     default_language: 'en',
-    date_format: { format: 'DD/MM/YYYY', locale: 'en-GB' }
+    date_format: { format: 'dd/MM/yyyy', locale: 'en-GB' }
   });
 
   // Security settings state
@@ -99,7 +99,11 @@ export const SettingsPage: React.FC = () => {
         enable_registration: settings.general_enable_registration || false,
         maintenance_mode: settings.general_maintenance_mode || false,
         default_language: settings.general_default_language || 'en',
-        date_format: settings.general_date_format || { format: 'DD/MM/YYYY', locale: 'en-GB' }
+        date_format: settings.general_date_format 
+          ? (typeof settings.general_date_format === 'string'
+              ? { format: settings.general_date_format, locale: settings.general_date_format.includes('MM/dd') ? 'en-US' : 'en-GB' }
+              : settings.general_date_format)
+          : { format: 'dd/MM/yyyy', locale: 'en-GB' }
       });
 
       // Extract security settings
@@ -130,7 +134,12 @@ export const SettingsPage: React.FC = () => {
       // Convert to the format expected by the API
       const settingsData: Record<string, any> = {};
       Object.entries(generalSettings).forEach(([key, value]) => {
-        settingsData[`general_${key}`] = value;
+        // Special handling for date_format - only send the format string
+        if (key === 'date_format' && typeof value === 'object' && value.format) {
+          settingsData[`general_${key}`] = value.format;
+        } else {
+          settingsData[`general_${key}`] = value;
+        }
       });
       return settingsService.updateSettings(settingsData);
     },
@@ -395,10 +404,10 @@ export const SettingsPage: React.FC = () => {
                   {t('settings.general.dateFormat')}
                 </label>
                 <select
-                  value={generalSettings.date_format?.format || 'DD/MM/YYYY'}
+                  value={generalSettings.date_format?.format || 'dd/MM/yyyy'}
                   onChange={(e) => {
                     const format = e.target.value;
-                    const locale = format === 'MM/DD/YYYY' ? 'en-US' : 'en-GB';
+                    const locale = format === 'MM/dd/yyyy' ? 'en-US' : 'en-GB';
                     setGeneralSettings(prev => ({ 
                       ...prev, 
                       date_format: { format, locale }
@@ -406,10 +415,10 @@ export const SettingsPage: React.FC = () => {
                   }}
                   className="w-full px-3 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500"
                 >
-                  <option value="DD/MM/YYYY">DD/MM/YYYY (European)</option>
+                  <option value="dd/MM/yyyy">DD/MM/YYYY (European)</option>
-                  <option value="MM/DD/YYYY">MM/DD/YYYY (US)</option>
+                  <option value="MM/dd/yyyy">MM/DD/YYYY (US)</option>
-                  <option value="YYYY-MM-DD">YYYY-MM-DD (ISO)</option>
+                  <option value="yyyy-MM-dd">YYYY-MM-DD (ISO)</option>
-                  <option value="DD.MM.YYYY">DD.MM.YYYY (German)</option>
+                  <option value="dd.MM.yyyy">DD.MM.YYYY (German)</option>
                 </select>
                 <p className="text-xs text-neutral-500 mt-1">
                   {t('settings.general.dateFormatHelp')}

frontend/src/services/publicSettings.service.ts

@@ -15,7 +15,7 @@ export interface PublicSettings {
   theme_config: any;
   default_language: string;
   enable_analytics: boolean;
-  general_date_format: string;
+  general_date_format: string | { format: string; locale: string };
   enable_recaptcha: boolean;
   recaptcha_site_key: string | null;
   maintenance_mode: boolean;