first commit

frontend/src/app/(public)/dashboard/components/PaymentsTab.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+import { useState } from 'react';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { UserPayment } from '@/lib/api';
+
+interface PaymentsTabProps {
+  payments: UserPayment[];
+  language: string;
+}
+
+export default function PaymentsTab({ payments, language }: PaymentsTabProps) {
+  const [filter, setFilter] = useState<'all' | 'paid' | 'pending'>('all');
+
+  const filteredPayments = payments.filter((payment) => {
+    if (filter === 'all') return true;
+    if (filter === 'paid') return payment.status === 'paid';
+    if (filter === 'pending') return payment.status !== 'paid' && payment.status !== 'refunded';
+    return true;
+  });
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const formatCurrency = (amount: number, currency: string = 'PYG') => {
+    if (currency === 'PYG') {
+      return `${amount.toLocaleString('es-PY')} PYG`;
+    }
+    return `$${amount.toFixed(2)} ${currency}`;
+  };
+
+  const getStatusBadge = (status: string) => {
+    const styles: Record<string, string> = {
+      paid: 'bg-green-100 text-green-800',
+      pending: 'bg-yellow-100 text-yellow-800',
+      pending_approval: 'bg-orange-100 text-orange-800',
+      refunded: 'bg-purple-100 text-purple-800',
+      failed: 'bg-red-100 text-red-800',
+    };
+    const labels: Record<string, Record<string, string>> = {
+      en: {
+        paid: 'Paid',
+        pending: 'Pending',
+        pending_approval: 'Awaiting Approval',
+        refunded: 'Refunded',
+        failed: 'Failed',
+      },
+      es: {
+        paid: 'Pagado',
+        pending: 'Pendiente',
+        pending_approval: 'Esperando Aprobación',
+        refunded: 'Reembolsado',
+        failed: 'Fallido',
+      },
+    };
+    return (
+      <span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100 text-gray-800'}`}>
+        {labels[language]?.[status] || status}
+      </span>
+    );
+  };
+
+  const getProviderLabel = (provider: string) => {
+    const labels: Record<string, Record<string, string>> = {
+      en: {
+        lightning: 'Lightning (Bitcoin)',
+        cash: 'Cash',
+        bank_transfer: 'Bank Transfer',
+        tpago: 'TPago',
+        bancard: 'Card',
+      },
+      es: {
+        lightning: 'Lightning (Bitcoin)',
+        cash: 'Efectivo',
+        bank_transfer: 'Transferencia Bancaria',
+        tpago: 'TPago',
+        bancard: 'Tarjeta',
+      },
+    };
+    return labels[language]?.[provider] || provider;
+  };
+
+  // Summary calculations
+  const totalPaid = payments
+    .filter((p) => p.status === 'paid')
+    .reduce((sum, p) => sum + Number(p.amount), 0);
+  const totalPending = payments
+    .filter((p) => p.status !== 'paid' && p.status !== 'refunded')
+    .reduce((sum, p) => sum + Number(p.amount), 0);
+
+  return (
+    <div className="space-y-6">
+      {/* Summary Cards */}
+      <div className="grid grid-cols-2 gap-4">
+        <Card className="p-4">
+          <p className="text-sm text-gray-600 mb-1">
+            {language === 'es' ? 'Total Pagado' : 'Total Paid'}
+          </p>
+          <p className="text-2xl font-bold text-green-600">
+            {formatCurrency(totalPaid)}
+          </p>
+        </Card>
+        <Card className="p-4">
+          <p className="text-sm text-gray-600 mb-1">
+            {language === 'es' ? 'Pendiente' : 'Pending'}
+          </p>
+          <p className="text-2xl font-bold text-yellow-600">
+            {formatCurrency(totalPending)}
+          </p>
+        </Card>
+      </div>
+
+      {/* Filter Buttons */}
+      <div className="flex gap-2">
+        {(['all', 'paid', 'pending'] as const).map((f) => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filter === f
+                ? 'bg-secondary-blue text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            {f === 'all' && (language === 'es' ? 'Todos' : 'All')}
+            {f === 'paid' && (language === 'es' ? 'Pagados' : 'Paid')}
+            {f === 'pending' && (language === 'es' ? 'Pendientes' : 'Pending')}
+          </button>
+        ))}
+      </div>
+
+      {/* Payments List */}
+      {filteredPayments.length === 0 ? (
+        <Card className="p-8 text-center">
+          <p className="text-gray-600">
+            {language === 'es' ? 'No hay pagos que mostrar' : 'No payments to display'}
+          </p>
+        </Card>
+      ) : (
+        <div className="space-y-3">
+          {filteredPayments.map((payment) => (
+            <Card key={payment.id} className="p-4">
+              <div className="flex flex-col md:flex-row md:items-center justify-between gap-3">
+                <div className="flex-1">
+                  <div className="flex items-center gap-2 mb-1">
+                    <span className="font-semibold">
+                      {formatCurrency(Number(payment.amount), payment.currency)}
+                    </span>
+                    {getStatusBadge(payment.status)}
+                  </div>
+                  
+                  <div className="text-sm text-gray-600 space-y-1">
+                    {payment.event && (
+                      <p>
+                        {language === 'es' && payment.event.titleEs
+                          ? payment.event.titleEs
+                          : payment.event.title}
+                      </p>
+                    )}
+                    <p>
+                      <span className="font-medium">
+                        {language === 'es' ? 'Método:' : 'Method:'}
+                      </span>{' '}
+                      {getProviderLabel(payment.provider)}
+                    </p>
+                    <p>
+                      <span className="font-medium">
+                        {language === 'es' ? 'Fecha:' : 'Date:'}
+                      </span>{' '}
+                      {formatDate(payment.createdAt)}
+                    </p>
+                    {payment.reference && (
+                      <p>
+                        <span className="font-medium">
+                          {language === 'es' ? 'Referencia:' : 'Reference:'}
+                        </span>{' '}
+                        {payment.reference}
+                      </p>
+                    )}
+                  </div>
+                </div>
+                
+                {payment.invoice && (
+                  <a
+                    href={payment.invoice.pdfUrl || '#'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button variant="outline" size="sm">
+                      {language === 'es' ? 'Descargar Factura' : 'Download Invoice'}
+                    </Button>
+                  </a>
+                )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/ProfileTab.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { useAuth } from '@/context/AuthContext';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { dashboardApi, UserProfile } from '@/lib/api';
+import toast from 'react-hot-toast';
+
+interface ProfileTabProps {
+  onUpdate?: () => void;
+}
+
+export default function ProfileTab({ onUpdate }: ProfileTabProps) {
+  const { locale: language } = useLanguage();
+  const { updateUser, user } = useAuth();
+  
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    phone: '',
+    languagePreference: '',
+    rucNumber: '',
+  });
+
+  useEffect(() => {
+    loadProfile();
+  }, []);
+
+  const loadProfile = async () => {
+    try {
+      const res = await dashboardApi.getProfile();
+      setProfile(res.profile);
+      setFormData({
+        name: res.profile.name || '',
+        phone: res.profile.phone || '',
+        languagePreference: res.profile.languagePreference || '',
+        rucNumber: res.profile.rucNumber || '',
+      });
+    } catch (error) {
+      toast.error(language === 'es' ? 'Error al cargar perfil' : 'Failed to load profile');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const res = await dashboardApi.updateProfile(formData);
+      toast.success(language === 'es' ? 'Perfil actualizado' : 'Profile updated');
+      
+      // Update auth context
+      if (user) {
+        updateUser({
+          ...user,
+          name: formData.name,
+          phone: formData.phone,
+          languagePreference: formData.languagePreference,
+          rucNumber: formData.rucNumber,
+        });
+      }
+      
+      if (onUpdate) onUpdate();
+    } catch (error: any) {
+      toast.error(error.message || (language === 'es' ? 'Error al actualizar' : 'Update failed'));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Account Info Card */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">
+          {language === 'es' ? 'Información de la Cuenta' : 'Account Information'}
+        </h3>
+        
+        <div className="space-y-3 text-sm">
+          <div className="flex justify-between py-2 border-b">
+            <span className="text-gray-600">Email</span>
+            <span className="font-medium">{profile?.email}</span>
+          </div>
+          <div className="flex justify-between py-2 border-b">
+            <span className="text-gray-600">
+              {language === 'es' ? 'Estado de Cuenta' : 'Account Status'}
+            </span>
+            <span className={`px-2 py-1 text-xs rounded-full ${
+              profile?.accountStatus === 'active'
+                ? 'bg-green-100 text-green-800'
+                : 'bg-yellow-100 text-yellow-800'
+            }`}>
+              {profile?.accountStatus === 'active' 
+                ? (language === 'es' ? 'Activo' : 'Active')
+                : profile?.accountStatus}
+            </span>
+          </div>
+          <div className="flex justify-between py-2 border-b">
+            <span className="text-gray-600">
+              {language === 'es' ? 'Miembro Desde' : 'Member Since'}
+            </span>
+            <span className="font-medium">
+              {profile?.memberSince
+                ? new Date(profile.memberSince).toLocaleDateString(
+                    language === 'es' ? 'es-ES' : 'en-US',
+                    { year: 'numeric', month: 'long', day: 'numeric' }
+                  )
+                : '-'}
+            </span>
+          </div>
+          <div className="flex justify-between py-2">
+            <span className="text-gray-600">
+              {language === 'es' ? 'Días de Membresía' : 'Membership Days'}
+            </span>
+            <span className="font-medium">{profile?.membershipDays || 0}</span>
+          </div>
+        </div>
+      </Card>
+
+      {/* Edit Profile Form */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">
+          {language === 'es' ? 'Editar Perfil' : 'Edit Profile'}
+        </h3>
+        
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <Input
+            id="name"
+            label={language === 'es' ? 'Nombre' : 'Name'}
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+          
+          <Input
+            id="phone"
+            label={language === 'es' ? 'Teléfono' : 'Phone'}
+            type="tel"
+            value={formData.phone}
+            onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
+          />
+          
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">
+              {language === 'es' ? 'Idioma Preferido' : 'Preferred Language'}
+            </label>
+            <select
+              value={formData.languagePreference}
+              onChange={(e) => setFormData({ ...formData, languagePreference: e.target.value })}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-secondary-blue"
+            >
+              <option value="">{language === 'es' ? 'Seleccionar' : 'Select'}</option>
+              <option value="en">English</option>
+              <option value="es">Español</option>
+            </select>
+          </div>
+          
+          <Input
+            id="rucNumber"
+            label={language === 'es' ? 'Número de RUC (para facturas)' : 'RUC Number (for invoices)'}
+            value={formData.rucNumber}
+            onChange={(e) => setFormData({ ...formData, rucNumber: e.target.value })}
+            placeholder={language === 'es' ? 'Opcional' : 'Optional'}
+          />
+          <p className="text-xs text-gray-500 -mt-2">
+            {language === 'es'
+              ? 'Tu número de RUC paraguayo para facturas fiscales'
+              : 'Your Paraguayan RUC number for fiscal invoices'}
+          </p>
+          
+          <div className="pt-4">
+            <Button type="submit" isLoading={saving}>
+              {language === 'es' ? 'Guardar Cambios' : 'Save Changes'}
+            </Button>
+          </div>
+        </form>
+      </Card>
+
+      {/* Email Change Notice */}
+      <Card className="p-6 bg-gray-50">
+        <h3 className="text-lg font-semibold mb-2">
+          {language === 'es' ? 'Cambiar Email' : 'Change Email'}
+        </h3>
+        <p className="text-sm text-gray-600 mb-4">
+          {language === 'es'
+            ? 'Para cambiar tu dirección de email, por favor contacta al soporte.'
+            : 'To change your email address, please contact support.'}
+        </p>
+        <Button variant="outline" size="sm" disabled>
+          {language === 'es' ? 'Contactar Soporte' : 'Contact Support'}
+        </Button>
+      </Card>
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/SecurityTab.tsx

@@ -0,0 +1,380 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useLanguage } from '@/context/LanguageContext';
+import { useAuth } from '@/context/AuthContext';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import Input from '@/components/ui/Input';
+import { dashboardApi, authApi, UserProfile, UserSession } from '@/lib/api';
+import toast from 'react-hot-toast';
+
+export default function SecurityTab() {
+  const { locale: language } = useLanguage();
+  const { logout } = useAuth();
+  
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const [sessions, setSessions] = useState<UserSession[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [settingPassword, setSettingPassword] = useState(false);
+  
+  const [passwordForm, setPasswordForm] = useState({
+    currentPassword: '',
+    newPassword: '',
+    confirmPassword: '',
+  });
+  
+  const [newPasswordForm, setNewPasswordForm] = useState({
+    password: '',
+    confirmPassword: '',
+  });
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const loadData = async () => {
+    try {
+      const [profileRes, sessionsRes] = await Promise.all([
+        dashboardApi.getProfile(),
+        dashboardApi.getSessions(),
+      ]);
+      setProfile(profileRes.profile);
+      setSessions(sessionsRes.sessions);
+    } catch (error) {
+      toast.error(language === 'es' ? 'Error al cargar datos' : 'Failed to load data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChangePassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (passwordForm.newPassword !== passwordForm.confirmPassword) {
+      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
+      return;
+    }
+    
+    if (passwordForm.newPassword.length < 10) {
+      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
+      return;
+    }
+    
+    setChangingPassword(true);
+    
+    try {
+      await authApi.changePassword(passwordForm.currentPassword, passwordForm.newPassword);
+      toast.success(language === 'es' ? 'Contraseña actualizada' : 'Password updated');
+      setPasswordForm({ currentPassword: '', newPassword: '', confirmPassword: '' });
+    } catch (error: any) {
+      toast.error(error.message || (language === 'es' ? 'Error al cambiar contraseña' : 'Failed to change password'));
+    } finally {
+      setChangingPassword(false);
+    }
+  };
+
+  const handleSetPassword = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (newPasswordForm.password !== newPasswordForm.confirmPassword) {
+      toast.error(language === 'es' ? 'Las contraseñas no coinciden' : 'Passwords do not match');
+      return;
+    }
+    
+    if (newPasswordForm.password.length < 10) {
+      toast.error(language === 'es' ? 'La contraseña debe tener al menos 10 caracteres' : 'Password must be at least 10 characters');
+      return;
+    }
+    
+    setSettingPassword(true);
+    
+    try {
+      await dashboardApi.setPassword(newPasswordForm.password);
+      toast.success(language === 'es' ? 'Contraseña establecida' : 'Password set');
+      setNewPasswordForm({ password: '', confirmPassword: '' });
+      loadData(); // Reload to update profile
+    } catch (error: any) {
+      toast.error(error.message || (language === 'es' ? 'Error al establecer contraseña' : 'Failed to set password'));
+    } finally {
+      setSettingPassword(false);
+    }
+  };
+
+  const handleUnlinkGoogle = async () => {
+    if (!confirm(language === 'es' 
+      ? '¿Estás seguro de que quieres desvincular tu cuenta de Google?' 
+      : 'Are you sure you want to unlink your Google account?'
+    )) {
+      return;
+    }
+    
+    try {
+      await dashboardApi.unlinkGoogle();
+      toast.success(language === 'es' ? 'Google desvinculado' : 'Google unlinked');
+      loadData();
+    } catch (error: any) {
+      toast.error(error.message || (language === 'es' ? 'Error' : 'Failed'));
+    }
+  };
+
+  const handleRevokeSession = async (sessionId: string) => {
+    try {
+      await dashboardApi.revokeSession(sessionId);
+      setSessions(sessions.filter((s) => s.id !== sessionId));
+      toast.success(language === 'es' ? 'Sesión cerrada' : 'Session revoked');
+    } catch (error) {
+      toast.error(language === 'es' ? 'Error' : 'Failed');
+    }
+  };
+
+  const handleRevokeAllSessions = async () => {
+    if (!confirm(language === 'es' 
+      ? '¿Cerrar todas las sesiones? Serás desconectado.' 
+      : 'Log out of all sessions? You will be logged out.'
+    )) {
+      return;
+    }
+    
+    try {
+      await dashboardApi.revokeAllSessions();
+      toast.success(language === 'es' ? 'Todas las sesiones cerradas' : 'All sessions revoked');
+      logout();
+    } catch (error) {
+      toast.error(language === 'es' ? 'Error' : 'Failed');
+    }
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleString(language === 'es' ? 'es-ES' : 'en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-2xl space-y-6">
+      {/* Authentication Methods */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">
+          {language === 'es' ? 'Métodos de Autenticación' : 'Authentication Methods'}
+        </h3>
+        
+        <div className="space-y-4">
+          {/* Password Status */}
+          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                profile?.hasPassword ? 'bg-green-100 text-green-600' : 'bg-gray-200 text-gray-500'
+              }`}>
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium">
+                  {language === 'es' ? 'Contraseña' : 'Password'}
+                </p>
+                <p className="text-sm text-gray-500">
+                  {profile?.hasPassword
+                    ? (language === 'es' ? 'Configurada' : 'Set')
+                    : (language === 'es' ? 'No configurada' : 'Not set')}
+                </p>
+              </div>
+            </div>
+            {profile?.hasPassword && (
+              <span className="text-green-600 text-sm font-medium">
+                {language === 'es' ? 'Activo' : 'Active'}
+              </span>
+            )}
+          </div>
+
+          {/* Google Status */}
+          <div className="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
+            <div className="flex items-center gap-3">
+              <div className={`w-10 h-10 rounded-full flex items-center justify-center ${
+                profile?.hasGoogleLinked ? 'bg-red-100 text-red-600' : 'bg-gray-200 text-gray-500'
+              }`}>
+                <svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                  <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                  <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+                  <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                </svg>
+              </div>
+              <div>
+                <p className="font-medium">Google</p>
+                <p className="text-sm text-gray-500">
+                  {profile?.hasGoogleLinked
+                    ? (language === 'es' ? 'Vinculado' : 'Linked')
+                    : (language === 'es' ? 'No vinculado' : 'Not linked')}
+                </p>
+              </div>
+            </div>
+            {profile?.hasGoogleLinked && profile?.hasPassword && (
+              <Button variant="outline" size="sm" onClick={handleUnlinkGoogle}>
+                {language === 'es' ? 'Desvincular' : 'Unlink'}
+              </Button>
+            )}
+          </div>
+        </div>
+      </Card>
+
+      {/* Password Management */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">
+          {profile?.hasPassword
+            ? (language === 'es' ? 'Cambiar Contraseña' : 'Change Password')
+            : (language === 'es' ? 'Establecer Contraseña' : 'Set Password')}
+        </h3>
+        
+        {profile?.hasPassword ? (
+          <form onSubmit={handleChangePassword} className="space-y-4">
+            <Input
+              id="currentPassword"
+              type="password"
+              label={language === 'es' ? 'Contraseña Actual' : 'Current Password'}
+              value={passwordForm.currentPassword}
+              onChange={(e) => setPasswordForm({ ...passwordForm, currentPassword: e.target.value })}
+              required
+            />
+            <Input
+              id="newPassword"
+              type="password"
+              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
+              value={passwordForm.newPassword}
+              onChange={(e) => setPasswordForm({ ...passwordForm, newPassword: e.target.value })}
+              required
+            />
+            <p className="text-xs text-gray-500 -mt-2">
+              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
+            </p>
+            <Input
+              id="confirmPassword"
+              type="password"
+              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
+              value={passwordForm.confirmPassword}
+              onChange={(e) => setPasswordForm({ ...passwordForm, confirmPassword: e.target.value })}
+              required
+            />
+            <Button type="submit" isLoading={changingPassword}>
+              {language === 'es' ? 'Cambiar Contraseña' : 'Change Password'}
+            </Button>
+          </form>
+        ) : (
+          <form onSubmit={handleSetPassword} className="space-y-4">
+            <p className="text-sm text-gray-600 mb-4">
+              {language === 'es'
+                ? 'Actualmente inicias sesión con Google. Establece una contraseña para más opciones de acceso.'
+                : 'You currently sign in with Google. Set a password for more access options.'}
+            </p>
+            <Input
+              id="password"
+              type="password"
+              label={language === 'es' ? 'Nueva Contraseña' : 'New Password'}
+              value={newPasswordForm.password}
+              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, password: e.target.value })}
+              required
+            />
+            <p className="text-xs text-gray-500 -mt-2">
+              {language === 'es' ? 'Mínimo 10 caracteres' : 'Minimum 10 characters'}
+            </p>
+            <Input
+              id="confirmNewPassword"
+              type="password"
+              label={language === 'es' ? 'Confirmar Contraseña' : 'Confirm Password'}
+              value={newPasswordForm.confirmPassword}
+              onChange={(e) => setNewPasswordForm({ ...newPasswordForm, confirmPassword: e.target.value })}
+              required
+            />
+            <Button type="submit" isLoading={settingPassword}>
+              {language === 'es' ? 'Establecer Contraseña' : 'Set Password'}
+            </Button>
+          </form>
+        )}
+      </Card>
+
+      {/* Active Sessions */}
+      <Card className="p-6">
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-lg font-semibold">
+            {language === 'es' ? 'Sesiones Activas' : 'Active Sessions'}
+          </h3>
+          {sessions.length > 1 && (
+            <Button variant="outline" size="sm" onClick={handleRevokeAllSessions}>
+              {language === 'es' ? 'Cerrar Todas' : 'Logout All'}
+            </Button>
+          )}
+        </div>
+        
+        {sessions.length === 0 ? (
+          <p className="text-sm text-gray-600">
+            {language === 'es' ? 'No hay sesiones activas' : 'No active sessions'}
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {sessions.map((session, index) => (
+              <div
+                key={session.id}
+                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+              >
+                <div>
+                  <p className="font-medium text-sm">
+                    {session.userAgent
+                      ? session.userAgent.substring(0, 50) + (session.userAgent.length > 50 ? '...' : '')
+                      : (language === 'es' ? 'Dispositivo desconocido' : 'Unknown device')}
+                  </p>
+                  <p className="text-xs text-gray-500">
+                    {language === 'es' ? 'Última actividad:' : 'Last active:'} {formatDate(session.lastActiveAt)}
+                    {session.ipAddress && ` • ${session.ipAddress}`}
+                  </p>
+                </div>
+                {index !== 0 && (
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleRevokeSession(session.id)}
+                  >
+                    {language === 'es' ? 'Cerrar' : 'Revoke'}
+                  </Button>
+                )}
+                {index === 0 && (
+                  <span className="text-xs text-green-600 font-medium">
+                    {language === 'es' ? 'Esta sesión' : 'This session'}
+                  </span>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </Card>
+
+      {/* Danger Zone */}
+      <Card className="p-6 border-red-200 bg-red-50">
+        <h3 className="text-lg font-semibold text-red-800 mb-4">
+          {language === 'es' ? 'Zona de Peligro' : 'Danger Zone'}
+        </h3>
+        <p className="text-sm text-red-700 mb-4">
+          {language === 'es'
+            ? 'Si deseas eliminar tu cuenta, contacta al soporte.'
+            : 'If you want to delete your account, please contact support.'}
+        </p>
+        <Button variant="outline" size="sm" className="border-red-300 text-red-700 hover:bg-red-100" disabled>
+          {language === 'es' ? 'Eliminar Cuenta' : 'Delete Account'}
+        </Button>
+      </Card>
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/components/TicketsTab.tsx

@@ -0,0 +1,193 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { UserTicket } from '@/lib/api';
+
+interface TicketsTabProps {
+  tickets: UserTicket[];
+  language: string;
+}
+
+export default function TicketsTab({ tickets, language }: TicketsTabProps) {
+  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('all');
+
+  const now = new Date();
+  const filteredTickets = tickets.filter((ticket) => {
+    if (filter === 'all') return true;
+    const eventDate = ticket.event?.startDatetime 
+      ? new Date(ticket.event.startDatetime) 
+      : null;
+    if (filter === 'upcoming') return eventDate && eventDate > now;
+    if (filter === 'past') return eventDate && eventDate <= now;
+    return true;
+  });
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  const formatCurrency = (amount: number, currency: string = 'PYG') => {
+    if (currency === 'PYG') {
+      return `${amount.toLocaleString('es-PY')} PYG`;
+    }
+    return `$${amount.toFixed(2)} ${currency}`;
+  };
+
+  const getStatusBadge = (status: string) => {
+    const styles: Record<string, string> = {
+      confirmed: 'bg-green-100 text-green-800',
+      checked_in: 'bg-blue-100 text-blue-800',
+      pending: 'bg-yellow-100 text-yellow-800',
+      cancelled: 'bg-red-100 text-red-800',
+    };
+    const labels: Record<string, Record<string, string>> = {
+      en: {
+        confirmed: 'Confirmed',
+        checked_in: 'Checked In',
+        pending: 'Pending',
+        cancelled: 'Cancelled',
+      },
+      es: {
+        confirmed: 'Confirmado',
+        checked_in: 'Registrado',
+        pending: 'Pendiente',
+        cancelled: 'Cancelado',
+      },
+    };
+    return (
+      <span className={`px-2 py-1 text-xs rounded-full ${styles[status] || 'bg-gray-100 text-gray-800'}`}>
+        {labels[language]?.[status] || status}
+      </span>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Filter Buttons */}
+      <div className="flex gap-2">
+        {(['all', 'upcoming', 'past'] as const).map((f) => (
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+              filter === f
+                ? 'bg-secondary-blue text-white'
+                : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+            }`}
+          >
+            {f === 'all' && (language === 'es' ? 'Todas' : 'All')}
+            {f === 'upcoming' && (language === 'es' ? 'Próximas' : 'Upcoming')}
+            {f === 'past' && (language === 'es' ? 'Pasadas' : 'Past')}
+          </button>
+        ))}
+      </div>
+
+      {/* Tickets List */}
+      {filteredTickets.length === 0 ? (
+        <Card className="p-8 text-center">
+          <p className="text-gray-600 mb-4">
+            {language === 'es' ? 'No tienes entradas' : 'You have no tickets'}
+          </p>
+          <Link href="/events">
+            <Button>
+              {language === 'es' ? 'Explorar Eventos' : 'Explore Events'}
+            </Button>
+          </Link>
+        </Card>
+      ) : (
+        <div className="space-y-4">
+          {filteredTickets.map((ticket) => (
+            <Card key={ticket.id} className="p-4">
+              <div className="flex flex-col md:flex-row md:items-center gap-4">
+                {/* Event Image */}
+                {ticket.event?.bannerUrl && (
+                  <div className="w-full md:w-32 h-24 rounded-lg overflow-hidden flex-shrink-0">
+                    <img
+                      src={ticket.event.bannerUrl}
+                      alt={ticket.event.title}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                )}
+                
+                {/* Ticket Info */}
+                <div className="flex-1">
+                  <div className="flex items-start justify-between gap-2">
+                    <h3 className="font-semibold">
+                      {language === 'es' && ticket.event?.titleEs
+                        ? ticket.event.titleEs
+                        : ticket.event?.title || 'Event'}
+                    </h3>
+                    {getStatusBadge(ticket.status)}
+                  </div>
+                  
+                  <div className="mt-2 space-y-1 text-sm text-gray-600">
+                    {ticket.event?.startDatetime && (
+                      <p>
+                        <span className="font-medium">
+                          {language === 'es' ? 'Fecha:' : 'Date:'}
+                        </span>{' '}
+                        {formatDate(ticket.event.startDatetime)}
+                      </p>
+                    )}
+                    {ticket.event?.location && (
+                      <p>
+                        <span className="font-medium">
+                          {language === 'es' ? 'Lugar:' : 'Location:'}
+                        </span>{' '}
+                        {ticket.event.location}
+                      </p>
+                    )}
+                    {ticket.payment && (
+                      <p>
+                        <span className="font-medium">
+                          {language === 'es' ? 'Pago:' : 'Payment:'}
+                        </span>{' '}
+                        {formatCurrency(ticket.payment.amount, ticket.payment.currency)} - 
+                        <span className={`ml-1 ${
+                          ticket.payment.status === 'paid' ? 'text-green-600' : 'text-yellow-600'
+                        }`}>
+                          {ticket.payment.status === 'paid' 
+                            ? (language === 'es' ? 'Pagado' : 'Paid')
+                            : (language === 'es' ? 'Pendiente' : 'Pending')}
+                        </span>
+                      </p>
+                    )}
+                  </div>
+                </div>
+                
+                {/* Actions */}
+                <div className="flex flex-col gap-2">
+                  <Link href={`/booking/success/${ticket.id}`}>
+                    <Button size="sm" className="w-full">
+                      {language === 'es' ? 'Ver Entrada' : 'View Ticket'}
+                    </Button>
+                  </Link>
+                  {ticket.invoice && (
+                    <a
+                      href={ticket.invoice.pdfUrl || '#'}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-center"
+                    >
+                      <Button variant="outline" size="sm" className="w-full">
+                        {language === 'es' ? 'Descargar Factura' : 'Download Invoice'}
+                      </Button>
+                    </a>
+                  )}
+                </div>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/app/(public)/dashboard/page.tsx

@@ -0,0 +1,410 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useLanguage } from '@/context/LanguageContext';
+import { useAuth } from '@/context/AuthContext';
+import Card from '@/components/ui/Card';
+import Button from '@/components/ui/Button';
+import { dashboardApi, DashboardSummary, NextEventInfo, UserTicket, UserPayment } from '@/lib/api';
+import toast from 'react-hot-toast';
+import Link from 'next/link';
+
+// Tab components
+import TicketsTab from './components/TicketsTab';
+import PaymentsTab from './components/PaymentsTab';
+import ProfileTab from './components/ProfileTab';
+import SecurityTab from './components/SecurityTab';
+
+type Tab = 'overview' | 'tickets' | 'payments' | 'profile' | 'security';
+
+export default function DashboardPage() {
+  const router = useRouter();
+  const { t, locale: language } = useLanguage();
+  const { user, isLoading: authLoading, token } = useAuth();
+  
+  const [activeTab, setActiveTab] = useState<Tab>('overview');
+  const [summary, setSummary] = useState<DashboardSummary | null>(null);
+  const [nextEvent, setNextEvent] = useState<NextEventInfo | null>(null);
+  const [tickets, setTickets] = useState<UserTicket[]>([]);
+  const [payments, setPayments] = useState<UserPayment[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push('/login');
+      return;
+    }
+    
+    if (user && token) {
+      loadDashboardData();
+    }
+  }, [user, authLoading, token]);
+
+  const loadDashboardData = async () => {
+    setLoading(true);
+    try {
+      const [summaryRes, nextEventRes, ticketsRes, paymentsRes] = await Promise.all([
+        dashboardApi.getSummary(),
+        dashboardApi.getNextEvent(),
+        dashboardApi.getTickets(),
+        dashboardApi.getPayments(),
+      ]);
+      
+      setSummary(summaryRes.summary);
+      setNextEvent(nextEventRes.nextEvent);
+      setTickets(ticketsRes.tickets);
+      setPayments(paymentsRes.payments);
+    } catch (error: any) {
+      console.error('Failed to load dashboard:', error);
+      toast.error('Failed to load dashboard data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const tabs: { id: Tab; label: string }[] = [
+    { id: 'overview', label: language === 'es' ? 'Resumen' : 'Overview' },
+    { id: 'tickets', label: language === 'es' ? 'Mis Entradas' : 'My Tickets' },
+    { id: 'payments', label: language === 'es' ? 'Pagos y Facturas' : 'Payments & Invoices' },
+    { id: 'profile', label: language === 'es' ? 'Perfil' : 'Profile' },
+    { id: 'security', label: language === 'es' ? 'Seguridad' : 'Security' },
+  ];
+
+  if (authLoading || !user) {
+    return (
+      <div className="section-padding min-h-[70vh] flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-secondary-blue"></div>
+      </div>
+    );
+  }
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString(language === 'es' ? 'es-ES' : 'en-US', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatTime = (dateStr: string) => {
+    return new Date(dateStr).toLocaleTimeString(language === 'es' ? 'es-ES' : 'en-US', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <div className="section-padding min-h-[70vh]">
+      <div className="container-page">
+        {/* Welcome Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold mb-2">
+            {language === 'es' ? `Hola, ${user.name}!` : `Welcome, ${user.name}!`}
+          </h1>
+          {summary && (
+            <p className="text-gray-600">
+              {language === 'es' 
+                ? `Miembro desde hace ${summary.user.membershipDays} días`
+                : `Member for ${summary.user.membershipDays} days`
+              }
+            </p>
+          )}
+        </div>
+
+        {/* Tab Navigation */}
+        <div className="border-b border-gray-200 mb-6">
+          <nav className="flex gap-4 -mb-px overflow-x-auto">
+            {tabs.map((tab) => (
+              <button
+                key={tab.id}
+                onClick={() => setActiveTab(tab.id)}
+                className={`whitespace-nowrap pb-3 px-1 border-b-2 font-medium text-sm transition-colors ${
+                  activeTab === tab.id
+                    ? 'border-secondary-blue text-secondary-blue'
+                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+                }`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </nav>
+        </div>
+
+        {/* Tab Content */}
+        {loading ? (
+          <div className="flex justify-center py-12">
+            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-secondary-blue"></div>
+          </div>
+        ) : (
+          <>
+            {activeTab === 'overview' && (
+              <OverviewTab
+                summary={summary}
+                nextEvent={nextEvent}
+                tickets={tickets}
+                language={language}
+                formatDate={formatDate}
+                formatTime={formatTime}
+              />
+            )}
+            
+            {activeTab === 'tickets' && (
+              <TicketsTab tickets={tickets} language={language} />
+            )}
+            
+            {activeTab === 'payments' && (
+              <PaymentsTab payments={payments} language={language} />
+            )}
+            
+            {activeTab === 'profile' && (
+              <ProfileTab onUpdate={loadDashboardData} />
+            )}
+            
+            {activeTab === 'security' && (
+              <SecurityTab />
+            )}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Overview Tab Component
+function OverviewTab({
+  summary,
+  nextEvent,
+  tickets,
+  language,
+  formatDate,
+  formatTime,
+}: {
+  summary: DashboardSummary | null;
+  nextEvent: NextEventInfo | null;
+  tickets: UserTicket[];
+  language: string;
+  formatDate: (date: string) => string;
+  formatTime: (date: string) => string;
+}) {
+  return (
+    <div className="space-y-6">
+      {/* Stats Cards */}
+      {summary && (
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+          <Card className="p-4 text-center">
+            <div className="text-3xl font-bold text-secondary-blue">{summary.stats.totalTickets}</div>
+            <div className="text-sm text-gray-600">
+              {language === 'es' ? 'Total Entradas' : 'Total Tickets'}
+            </div>
+          </Card>
+          <Card className="p-4 text-center">
+            <div className="text-3xl font-bold text-green-600">{summary.stats.confirmedTickets}</div>
+            <div className="text-sm text-gray-600">
+              {language === 'es' ? 'Confirmadas' : 'Confirmed'}
+            </div>
+          </Card>
+          <Card className="p-4 text-center">
+            <div className="text-3xl font-bold text-purple-600">{summary.stats.upcomingEvents}</div>
+            <div className="text-sm text-gray-600">
+              {language === 'es' ? 'Próximos' : 'Upcoming'}
+            </div>
+          </Card>
+          <Card className="p-4 text-center">
+            <div className="text-3xl font-bold text-orange-500">{summary.stats.pendingPayments}</div>
+            <div className="text-sm text-gray-600">
+              {language === 'es' ? 'Pagos Pendientes' : 'Pending Payments'}
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {/* Next Event Card */}
+      {nextEvent ? (
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">
+            {language === 'es' ? 'Tu Próximo Evento' : 'Your Next Event'}
+          </h3>
+          <div className="flex flex-col md:flex-row gap-6">
+            {nextEvent.event.bannerUrl && (
+              <div className="w-full md:w-48 h-32 rounded-lg overflow-hidden">
+                <img
+                  src={nextEvent.event.bannerUrl}
+                  alt={nextEvent.event.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+            )}
+            <div className="flex-1">
+              <h4 className="text-xl font-bold mb-2">
+                {language === 'es' && nextEvent.event.titleEs 
+                  ? nextEvent.event.titleEs 
+                  : nextEvent.event.title}
+              </h4>
+              <div className="space-y-2 text-gray-600">
+                <p>
+                  <span className="font-medium">
+                    {language === 'es' ? 'Fecha:' : 'Date:'}
+                  </span>{' '}
+                  {formatDate(nextEvent.event.startDatetime)}
+                </p>
+                <p>
+                  <span className="font-medium">
+                    {language === 'es' ? 'Hora:' : 'Time:'}
+                  </span>{' '}
+                  {formatTime(nextEvent.event.startDatetime)}
+                </p>
+                <p>
+                  <span className="font-medium">
+                    {language === 'es' ? 'Lugar:' : 'Location:'}
+                  </span>{' '}
+                  {nextEvent.event.location}
+                </p>
+                <p>
+                  <span className="font-medium">
+                    {language === 'es' ? 'Estado:' : 'Status:'}
+                  </span>{' '}
+                  <span className={`inline-flex px-2 py-1 text-xs rounded-full ${
+                    nextEvent.payment?.status === 'paid'
+                      ? 'bg-green-100 text-green-800'
+                      : 'bg-yellow-100 text-yellow-800'
+                  }`}>
+                    {nextEvent.payment?.status === 'paid' 
+                      ? (language === 'es' ? 'Pagado' : 'Paid')
+                      : (language === 'es' ? 'Pendiente' : 'Pending')}
+                  </span>
+                </p>
+              </div>
+              <div className="mt-4 flex gap-2">
+                <Link href={`/booking/success/${nextEvent.ticket.id}`}>
+                  <Button size="sm">
+                    {language === 'es' ? 'Ver Entrada' : 'View Ticket'}
+                  </Button>
+                </Link>
+                {nextEvent.event.locationUrl && (
+                  <a
+                    href={nextEvent.event.locationUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <Button variant="outline" size="sm">
+                      {language === 'es' ? 'Ver Mapa' : 'View Map'}
+                    </Button>
+                  </a>
+                )}
+              </div>
+            </div>
+          </div>
+        </Card>
+      ) : (
+        <Card className="p-6 text-center">
+          <p className="text-gray-600 mb-4">
+            {language === 'es' 
+              ? 'No tienes eventos próximos' 
+              : 'You have no upcoming events'}
+          </p>
+          <Link href="/events">
+            <Button>
+              {language === 'es' ? 'Explorar Eventos' : 'Explore Events'}
+            </Button>
+          </Link>
+        </Card>
+      )}
+
+      {/* Recent Tickets */}
+      {tickets.length > 0 && (
+        <Card className="p-6">
+          <h3 className="text-lg font-semibold mb-4">
+            {language === 'es' ? 'Entradas Recientes' : 'Recent Tickets'}
+          </h3>
+          <div className="space-y-3">
+            {tickets.slice(0, 3).map((ticket) => (
+              <div
+                key={ticket.id}
+                className="flex items-center justify-between p-3 bg-gray-50 rounded-lg"
+              >
+                <div>
+                  <p className="font-medium">
+                    {language === 'es' && ticket.event?.titleEs
+                      ? ticket.event.titleEs
+                      : ticket.event?.title || 'Event'}
+                  </p>
+                  <p className="text-sm text-gray-600">
+                    {ticket.event?.startDatetime
+                      ? formatDate(ticket.event.startDatetime)
+                      : ''}
+                  </p>
+                </div>
+                <span className={`px-2 py-1 text-xs rounded-full ${
+                  ticket.status === 'confirmed' || ticket.status === 'checked_in'
+                    ? 'bg-green-100 text-green-800'
+                    : ticket.status === 'cancelled'
+                    ? 'bg-red-100 text-red-800'
+                    : 'bg-yellow-100 text-yellow-800'
+                }`}>
+                  {ticket.status}
+                </span>
+              </div>
+            ))}
+          </div>
+          {tickets.length > 3 && (
+            <div className="mt-4 text-center">
+              <Button variant="outline" size="sm" onClick={() => {}}>
+                {language === 'es' ? 'Ver Todas' : 'View All'}
+              </Button>
+            </div>
+          )}
+        </Card>
+      )}
+
+      {/* Community Links */}
+      <Card className="p-6">
+        <h3 className="text-lg font-semibold mb-4">
+          {language === 'es' ? 'Comunidad' : 'Community'}
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <a
+            href="https://wa.me/your-number"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-3 p-3 bg-green-50 rounded-lg hover:bg-green-100 transition-colors"
+          >
+            <div className="w-10 h-10 bg-green-500 rounded-full flex items-center justify-center">
+              <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/>
+              </svg>
+            </div>
+            <span className="font-medium">WhatsApp Group</span>
+          </a>
+          <a
+            href="https://instagram.com/spanglish"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-3 p-3 bg-pink-50 rounded-lg hover:bg-pink-100 transition-colors"
+          >
+            <div className="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center">
+              <svg className="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24">
+                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
+              </svg>
+            </div>
+            <span className="font-medium">Instagram</span>
+          </a>
+          <Link
+            href="/community"
+            className="flex items-center gap-3 p-3 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors"
+          >
+            <div className="w-10 h-10 bg-secondary-blue rounded-full flex items-center justify-center">
+              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
+              </svg>
+            </div>
+            <span className="font-medium">
+              {language === 'es' ? 'Comunidad' : 'Community Page'}
+            </span>
+          </Link>
+        </div>
+      </Card>
+    </div>
+  );
+}