first commit

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>
+  );
+}