Add ticket system with QR scanner and PDF generation

- Add ticket validation and check-in API endpoints
- Add PDF ticket generation with QR codes (pdfkit)
- Add admin QR scanner page with camera support
- Add admin site settings page
- Update email templates with PDF ticket download link
- Add checked_in_by_admin_id field for audit tracking
- Update booking success page with ticket download
- Various UI improvements to events and booking pages

frontend/src/app/admin/settings/page.tsx

@@ -0,0 +1,376 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { siteSettingsApi, SiteSettings, TimezoneOption } from '@/lib/api';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import {
+  Cog6ToothIcon,
+  GlobeAltIcon,
+  ClockIcon,
+  EnvelopeIcon,
+  WrenchScrewdriverIcon,
+  CheckCircleIcon,
+} from '@heroicons/react/24/outline';
+import toast from 'react-hot-toast';
+
+export default function AdminSettingsPage() {
+  const { t, locale } = useLanguage();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [timezones, setTimezones] = useState<TimezoneOption[]>([]);
+  
+  const [settings, setSettings] = useState<SiteSettings>({
+    timezone: 'America/Asuncion',
+    siteName: 'Spanglish',
+    siteDescription: null,
+    siteDescriptionEs: null,
+    contactEmail: null,
+    contactPhone: null,
+    facebookUrl: null,
+    instagramUrl: null,
+    twitterUrl: null,
+    linkedinUrl: null,
+    maintenanceMode: false,
+    maintenanceMessage: null,
+    maintenanceMessageEs: null,
+  });
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [settingsRes, timezonesRes] = await Promise.all([
+        siteSettingsApi.get(),
+        siteSettingsApi.getTimezones(),
+      ]);
+      setSettings(settingsRes.settings);
+      setTimezones(timezonesRes.timezones);
+    } catch (error) {
+      toast.error('Failed to load settings');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      const response = await siteSettingsApi.update(settings);
+      setSettings(response.settings);
+      toast.success(locale === 'es' ? 'Configuración guardada' : 'Settings saved');
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to save settings');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const updateSetting = <K extends keyof SiteSettings>(key: K, value: SiteSettings[K]) => {
+    setSettings((prev) => ({ ...prev, [key]: value }));
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-12">
+        <div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="flex items-center justify-between mb-6">
+        <div>
+          <h1 className="text-2xl font-bold text-primary-dark flex items-center gap-3">
+            <Cog6ToothIcon className="w-7 h-7" />
+            {locale === 'es' ? 'Configuración del Sitio' : 'Site Settings'}
+          </h1>
+          <p className="text-gray-500 mt-1">
+            {locale === 'es' 
+              ? 'Configura las opciones generales del sitio web' 
+              : 'Configure general website settings'}
+          </p>
+        </div>
+        <Button onClick={handleSave} isLoading={saving}>
+          <CheckCircleIcon className="w-5 h-5 mr-2" />
+          {locale === 'es' ? 'Guardar Cambios' : 'Save Changes'}
+        </Button>
+      </div>
+
+      <div className="space-y-6">
+        {/* Timezone Settings */}
+        <Card>
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
+                <ClockIcon className="w-5 h-5 text-blue-600" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg">
+                  {locale === 'es' ? 'Zona Horaria' : 'Timezone'}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  {locale === 'es' 
+                    ? 'Zona horaria para mostrar las fechas de eventos' 
+                    : 'Timezone used for displaying event dates'}
+                </p>
+              </div>
+            </div>
+
+            <div className="max-w-md">
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                {locale === 'es' ? 'Zona Horaria del Sitio' : 'Site Timezone'}
+              </label>
+              <select
+                value={settings.timezone}
+                onChange={(e) => updateSetting('timezone', e.target.value)}
+                className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+              >
+                {timezones.map((tz) => (
+                  <option key={tz.value} value={tz.value}>
+                    {tz.label}
+                  </option>
+                ))}
+              </select>
+              <p className="text-xs text-gray-400 mt-1">
+                {locale === 'es' 
+                  ? 'Esta zona horaria se usará como referencia para las fechas de eventos.'
+                  : 'This timezone will be used as reference for event dates.'}
+              </p>
+            </div>
+          </div>
+        </Card>
+
+        {/* Site Information */}
+        <Card>
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center">
+                <GlobeAltIcon className="w-5 h-5 text-green-600" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg">
+                  {locale === 'es' ? 'Información del Sitio' : 'Site Information'}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  {locale === 'es' 
+                    ? 'Información básica del sitio web' 
+                    : 'Basic website information'}
+                </p>
+              </div>
+            </div>
+
+            <div className="space-y-4">
+              <div className="max-w-md">
+                <Input
+                  label={locale === 'es' ? 'Nombre del Sitio' : 'Site Name'}
+                  value={settings.siteName}
+                  onChange={(e) => updateSetting('siteName', e.target.value)}
+                  placeholder="Spanglish"
+                />
+              </div>
+
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {locale === 'es' ? 'Descripción (Inglés)' : 'Description (English)'}
+                  </label>
+                  <textarea
+                    value={settings.siteDescription || ''}
+                    onChange={(e) => updateSetting('siteDescription', e.target.value || null)}
+                    rows={3}
+                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="Brief site description..."
+                  />
+                </div>
+                <div>
+                  <label className="block text-sm font-medium text-gray-700 mb-1">
+                    {locale === 'es' ? 'Descripción (Español)' : 'Description (Spanish)'}
+                  </label>
+                  <textarea
+                    value={settings.siteDescriptionEs || ''}
+                    onChange={(e) => updateSetting('siteDescriptionEs', e.target.value || null)}
+                    rows={3}
+                    className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                    placeholder="Descripción breve del sitio..."
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Contact Information */}
+        <Card>
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
+                <EnvelopeIcon className="w-5 h-5 text-purple-600" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg">
+                  {locale === 'es' ? 'Información de Contacto' : 'Contact Information'}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  {locale === 'es' 
+                    ? 'Datos de contacto del sitio' 
+                    : 'Site contact details'}
+                </p>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <Input
+                label={locale === 'es' ? 'Email de Contacto' : 'Contact Email'}
+                type="email"
+                value={settings.contactEmail || ''}
+                onChange={(e) => updateSetting('contactEmail', e.target.value || null)}
+                placeholder="contact@example.com"
+              />
+              <Input
+                label={locale === 'es' ? 'Teléfono de Contacto' : 'Contact Phone'}
+                type="tel"
+                value={settings.contactPhone || ''}
+                onChange={(e) => updateSetting('contactPhone', e.target.value || null)}
+                placeholder="+595 981 123456"
+              />
+            </div>
+
+            <div className="mt-6 pt-6 border-t border-secondary-light-gray">
+              <h4 className="font-medium mb-4">
+                {locale === 'es' ? 'Redes Sociales' : 'Social Media Links'}
+              </h4>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Input
+                  label="Facebook URL"
+                  type="url"
+                  value={settings.facebookUrl || ''}
+                  onChange={(e) => updateSetting('facebookUrl', e.target.value || null)}
+                  placeholder="https://facebook.com/..."
+                />
+                <Input
+                  label="Instagram URL"
+                  type="url"
+                  value={settings.instagramUrl || ''}
+                  onChange={(e) => updateSetting('instagramUrl', e.target.value || null)}
+                  placeholder="https://instagram.com/..."
+                />
+                <Input
+                  label="Twitter URL"
+                  type="url"
+                  value={settings.twitterUrl || ''}
+                  onChange={(e) => updateSetting('twitterUrl', e.target.value || null)}
+                  placeholder="https://twitter.com/..."
+                />
+                <Input
+                  label="LinkedIn URL"
+                  type="url"
+                  value={settings.linkedinUrl || ''}
+                  onChange={(e) => updateSetting('linkedinUrl', e.target.value || null)}
+                  placeholder="https://linkedin.com/..."
+                />
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Maintenance Mode */}
+        <Card>
+          <div className="p-6">
+            <div className="flex items-center gap-3 mb-6">
+              <div className="w-10 h-10 bg-orange-100 rounded-full flex items-center justify-center">
+                <WrenchScrewdriverIcon className="w-5 h-5 text-orange-600" />
+              </div>
+              <div>
+                <h3 className="font-semibold text-lg">
+                  {locale === 'es' ? 'Modo de Mantenimiento' : 'Maintenance Mode'}
+                </h3>
+                <p className="text-sm text-gray-500">
+                  {locale === 'es' 
+                    ? 'Habilita el modo de mantenimiento cuando necesites hacer cambios' 
+                    : 'Enable maintenance mode when you need to make changes'}
+                </p>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg mb-4">
+              <div>
+                <p className="font-medium">
+                  {locale === 'es' ? 'Modo de Mantenimiento' : 'Maintenance Mode'}
+                </p>
+                <p className="text-sm text-gray-500">
+                  {settings.maintenanceMode 
+                    ? (locale === 'es' ? 'El sitio está en mantenimiento' : 'The site is under maintenance')
+                    : (locale === 'es' ? 'El sitio está activo' : 'The site is live')}
+                </p>
+              </div>
+              <button
+                onClick={() => updateSetting('maintenanceMode', !settings.maintenanceMode)}
+                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                  settings.maintenanceMode ? 'bg-orange-500' : 'bg-gray-300'
+                }`}
+              >
+                <span
+                  className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                    settings.maintenanceMode ? 'translate-x-6' : 'translate-x-1'
+                  }`}
+                />
+              </button>
+            </div>
+
+            {settings.maintenanceMode && (
+              <div className="bg-orange-50 border border-orange-200 rounded-lg p-4 mb-4">
+                <p className="text-orange-800 text-sm font-medium flex items-center gap-2">
+                  <WrenchScrewdriverIcon className="w-4 h-4" />
+                  {locale === 'es' 
+                    ? '¡Advertencia! El modo de mantenimiento está activo.' 
+                    : 'Warning! Maintenance mode is active.'}
+                </p>
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  {locale === 'es' ? 'Mensaje de Mantenimiento (Inglés)' : 'Maintenance Message (English)'}
+                </label>
+                <textarea
+                  value={settings.maintenanceMessage || ''}
+                  onChange={(e) => updateSetting('maintenanceMessage', e.target.value || null)}
+                  rows={3}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="We are currently performing maintenance. Please check back soon."
+                />
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">
+                  {locale === 'es' ? 'Mensaje de Mantenimiento (Español)' : 'Maintenance Message (Spanish)'}
+                </label>
+                <textarea
+                  value={settings.maintenanceMessageEs || ''}
+                  onChange={(e) => updateSetting('maintenanceMessageEs', e.target.value || null)}
+                  rows={3}
+                  className="w-full px-4 py-3 rounded-btn border border-secondary-light-gray focus:outline-none focus:ring-2 focus:ring-primary-yellow"
+                  placeholder="Estamos realizando mantenimiento. Por favor vuelve pronto."
+                />
+              </div>
+            </div>
+          </div>
+        </Card>
+
+        {/* Save Button at Bottom */}
+        <div className="flex justify-end">
+          <Button onClick={handleSave} isLoading={saving} size="lg">
+            <CheckCircleIcon className="w-5 h-5 mr-2" />
+            {locale === 'es' ? 'Guardar Todos los Cambios' : 'Save All Changes'}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}