Replace date-fns with native date formatting and remove unused code

Remove date-fns dependency in favor of native Intl.DateTimeFormat APIs, clean up obsolete admin endpoints, utility files, and archived documentation. Consolidate docs structure and remove unused plugins.

components/EventDetailsDialog.vue

@@ -334,7 +334,36 @@
 import type { Event, EventRSVP } from '~/utils/types';
 import { useEvents } from '~/composables/useEvents';
 import { useAuth } from '~/composables/useAuth';
-import { format } from 'date-fns';
+// Helper function to replace date-fns format
+const formatDate = (date: Date, formatStr: string): string => {
+  if (formatStr === 'EEEE, MMMM d, yyyy') {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  } else if (formatStr === 'MMM d') {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric'
+    });
+  } else if (formatStr === 'MMM d, yyyy') {
+    return date.toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  } else if (formatStr === 'HH:mm') {
+    return date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  }
+  
+  return date.toLocaleDateString();
+};
 
 interface Props {
   modelValue: boolean;
@@ -431,9 +460,9 @@ const formatEventDate = computed(() => {
   const endDate = new Date(props.event.end_datetime);
   
   if (startDate.toDateString() === endDate.toDateString()) {
-    return format(startDate, 'EEEE, MMMM d, yyyy');
+    return formatDate(startDate, 'EEEE, MMMM d, yyyy');
   } else {
-    return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d, yyyy')}`;
+    return `${formatDate(startDate, 'MMM d')} - ${formatDate(endDate, 'MMM d, yyyy')}`;
   }
 });
 
@@ -442,7 +471,7 @@ const formatEventTime = computed(() => {
   const startDate = new Date(props.event.start_datetime);
   const endDate = new Date(props.event.end_datetime);
   
-  return `${format(startDate, 'HH:mm')} - ${format(endDate, 'HH:mm')}`;
+  return `${formatDate(startDate, 'HH:mm')} - ${formatDate(endDate, 'HH:mm')}`;
 });
 
 const capacityPercentage = computed(() => {

components/MultipleNationalityInput.vue

@@ -215,7 +215,18 @@
 
 <script setup lang="ts">
 import { getAllCountries, searchCountries } from '~/utils/countries';
-import { getStaticDeviceInfo } from '~/utils/static-device-detection';
+// Simple device detection utilities
+const detectMobile = () => {
+  if (typeof window === 'undefined') return false;
+  const userAgent = navigator.userAgent;
+  return /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+};
+
+const detectMobileSafari = () => {
+  if (typeof window === 'undefined') return false;
+  const userAgent = navigator.userAgent;
+  return /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+};
 
 interface Props {
   modelValue?: string; // Comma-separated string like "FR,MC,US"
@@ -241,11 +252,19 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Static mobile detection (no reactive dependencies)
-const deviceInfo = getStaticDeviceInfo();
-const isMobile = ref(deviceInfo.isMobile);
-const isMobileSafari = ref(deviceInfo.isMobileSafari);
-const needsPerformanceMode = ref(deviceInfo.isMobileSafari || deviceInfo.isMobile);
+// Device detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+const needsPerformanceMode = ref(false);
+
+// Initialize device detection on mount
+onMounted(() => {
+  if (process.client) {
+    isMobile.value = detectMobile();
+    isMobileSafari.value = detectMobileSafari();
+    needsPerformanceMode.value = isMobileSafari.value || isMobile.value;
+  }
+});
 
 // Parse initial nationalities from comma-separated string
 const parseNationalities = (value: string): string[] => {

components/PhoneInputWrapper.vue

@@ -155,7 +155,6 @@
 <script setup lang="ts">
 import { parsePhoneNumber, AsYouType } from 'libphonenumber-js';
 import { getPhoneCountriesWithPreferred, searchPhoneCountries, getPhoneCountryByCode, type PhoneCountry } from '~/utils/phone-countries';
-import { getStaticDeviceInfo } from '~/utils/static-device-detection';
 
 interface Props {
   modelValue?: string;
@@ -188,10 +187,18 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits<Emits>();
 
-// Static mobile detection (no reactive dependencies)
-const deviceInfo = getStaticDeviceInfo();
-const isMobile = ref(deviceInfo.isMobile);
-const isMobileSafari = ref(deviceInfo.isMobileSafari);
+// Simple mobile detection
+const isMobile = ref(false);
+const isMobileSafari = ref(false);
+
+// Initialize mobile detection
+onMounted(() => {
+  if (process.client) {
+    const userAgent = navigator.userAgent;
+    isMobile.value = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent) || window.innerWidth <= 768;
+    isMobileSafari.value = /iPhone|iPad|iPod/i.test(userAgent) && /Safari/i.test(userAgent);
+  }
+});
 
 // Create computed-like object for template compatibility
 const mobileDetection = computed(() => ({
@@ -326,12 +333,11 @@ watch(dropdownOpen, (isOpen) => {
   }
 });
 
-// Component initialization - values already set from static detection
+// Component initialization
 onMounted(() => {
-  // Device detection already applied statically - no additional setup needed
   console.log('[PhoneInputWrapper] Initialized with device info:', {
-    isMobile: deviceInfo.isMobile,
-    isMobileSafari: deviceInfo.isMobileSafari
+    isMobile: isMobile.value,
+    isMobileSafari: isMobileSafari.value
   });
 });
 </script>

components/UpcomingEventBanner.vue

@@ -148,7 +148,42 @@
 
 <script setup lang="ts">
 import type { Event, EventRSVP } from '~/utils/types';
-import { format, isWithinInterval, addDays } from 'date-fns';
+
+// Helper functions to replace date-fns
+const formatDate = (date: Date, formatStr: string): string => {
+  const options: Intl.DateTimeFormatOptions = {};
+  
+  if (formatStr === 'HH:mm') {
+    options.hour = '2-digit';
+    options.minute = '2-digit';
+    options.hour12 = false;
+  } else if (formatStr === 'EEE, MMM d • HH:mm') {
+    return date.toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short', 
+      day: 'numeric'
+    }) + ' • ' + date.toLocaleTimeString('en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false
+    });
+  } else if (formatStr === 'MMM d') {
+    options.month = 'short';
+    options.day = 'numeric';
+  }
+  
+  return date.toLocaleDateString('en-US', options);
+};
+
+const addDays = (date: Date, days: number): Date => {
+  const result = new Date(date);
+  result.setDate(result.getDate() + days);
+  return result;
+};
+
+const isWithinInterval = (date: Date, interval: { start: Date; end: Date }): boolean => {
+  return date >= interval.start && date <= interval.end;
+};
 
 interface Props {
   event: Event | null;
@@ -262,18 +297,18 @@ const formatEventDate = computed(() => {
   
   // Different formats based on timing
   if (startDate.toDateString() === now.toDateString()) {
-    return `Today at ${format(startDate, 'HH:mm')}`;
+    return `Today at ${formatDate(startDate, 'HH:mm')}`;
   }
   
   if (startDate.toDateString() === addDays(now, 1).toDateString()) {
-    return `Tomorrow at ${format(startDate, 'HH:mm')}`;
+    return `Tomorrow at ${formatDate(startDate, 'HH:mm')}`;
   }
   
   if (startDate.toDateString() === endDate.toDateString()) {
-    return format(startDate, 'EEE, MMM d • HH:mm');
+    return formatDate(startDate, 'EEE, MMM d • HH:mm');
   }
   
-  return `${format(startDate, 'MMM d')} - ${format(endDate, 'MMM d')}`;
+  return `${formatDate(startDate, 'MMM d')} - ${formatDate(endDate, 'MMM d')}`;
 });
 
 const capacityInfo = computed(() => {