feat: Completar implementación de The Boutique

**The Boutique - Frontend completo para clientes:**
- Página de login/signup (/booking/login)
  - Autenticación con email/password
  - Registro de nuevos clientes
  - Validación de formularios
  - Diseño responsive y accesible

- Página de perfil (/booking/perfil)
  - Información personal del cliente
  - Edición de datos (modal)
  - Estadísticas de actividad
  - Historial de citas recientes
  - Información de membresía (tier)

- Página Mis Citas (/booking/mis-citas)
  - Lista completa de citas
  - Filtros: todas, próximas, pasadas
  - Detalles completos de cada cita
  - Opción de cancelar citas pendientes
  - Estados visuales por estatus
  - Información de códigos de reserva

- Layout mejorado (/booking/layout)
  - Navbar completo con todas las opciones
  - Navegación entre secciones
  - Estilos consistentes con anchor23.mx

**Funcionalidades implementadas:**
- Gestión completa del perfil de cliente
- Historial y gestión de citas
- Sistema de autenticación básico
- Navegación fluida entre secciones
- Estados de carga y manejo de errores
- Diseño responsive para móviles

**Datos mock/simulados:**
- Perfiles de cliente con tiers
- Historial de citas con diferentes estados
- Información de staff y servicios
- Validación de formularios

**Próximos pasos:**
- Integración con APIs reales de autenticación
- Conexión con Stripe para pagos
- Sincronización con base de datos real
- Notificaciones por email/WhatsApp

TASKS.md

@@ -425,6 +425,17 @@ La migración de recursos eliminó todos los bookings existentes debido a CASCAD
 - Implementarse con migración de datos
 - Notificar a clientes de la necesidad de reprogramar
 
+### Good to Have - Funcionalidades Adicionales
+
+8. **Sistema de Passes Digitales para Clientes**
+   - Los clientes pueden generar passes/códigos de acceso desde su cuenta
+   - Pases válidos por tiempo limitado
+   - Integración con wallet móvil
+   - Gestión de passes activos/inactivos
+   - Auditoría de uso de passes
+
+---
+
 ### Próximas Decisiones
 1. ¿Implementar Auth con Supabase Magic Links o SMS?
 2. ¿Usar Google Calendar API o Edge Functions para sync?

app/aperture/page.tsx

@@ -176,16 +176,18 @@ export default function ApertureDashboard() {
                           </div>
                           <div className="text-right">
                             <span className={`px-2 py-1 rounded text-xs ${
-                              booking.status === 'confirmed' ? 'bg-green-100 text-green-800' :
-                              booking.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
-                              'bg-gray-100 text-gray-800'
+                              booking.status === 'confirmed'
+                                ? 'bg-green-100 text-green-800'
+                                : booking.status === 'pending'
+                                ? 'bg-yellow-100 text-yellow-800'
+                                : 'bg-gray-100 text-gray-800'
                             }`}>
                               {booking.status}
                             </span>
                           </div>
                         </div>
                       </div>
-                    )
+                    ))
                   )}
                 </div>
               )}

app/api/aperture/staff/schedule/route.ts

@@ -15,13 +15,15 @@ export async function GET(request: NextRequest) {
       .order('date', { ascending: true })
 
     if (locationId) {
-      const locationStaff = await supabaseAdmin
+      const { data: locationStaff } = await supabaseAdmin
         .from('staff')
         .select('id, display_name')
         .eq('location_id', locationId)
         .eq('is_active', true)
 
-      query = query.in('staff_id', locationStaff.map(s => s.id))
+      if (locationStaff && locationStaff.length > 0) {
+        query = query.in('staff_id', locationStaff.map(s => s.id))
+      }
     }
 
     if (staffId) {

app/booking/layout.tsx

@@ -21,18 +21,28 @@ export default function BookingLayout({
           </div>
 
           <div className="nav-actions flex items-center gap-4">
-            <Link href="/mis-citas">
+            <Link href="/booking/servicios">
+              <Button variant="ghost" size="sm">
+                Reservar
+              </Button>
+            </Link>
+            <Link href="/booking/mis-citas">
               <Button variant="ghost" size="sm">
                 <Calendar className="w-4 h-4 mr-2" />
                 Mis Citas
               </Button>
             </Link>
-            <Link href="/perfil">
+            <Link href="/booking/perfil">
               <Button variant="ghost" size="sm">
                 <User className="w-4 h-4 mr-2" />
                 Perfil
               </Button>
             </Link>
+            <Link href="/booking/login">
+              <Button variant="outline" size="sm">
+                Iniciar Sesión
+              </Button>
+            </Link>
           </div>
         </nav>
       </header>

app/booking/login/page.tsx

@@ -0,0 +1,320 @@
+'use client'
+
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import { Eye, EyeOff, Mail, Lock, User } from 'lucide-react'
+
+export default function LoginPage() {
+  const [activeTab, setActiveTab] = useState<'login' | 'signup'>('login')
+  const [showPassword, setShowPassword] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    confirmPassword: '',
+    firstName: '',
+    lastName: '',
+    phone: ''
+  })
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      // En una implementación real, esto haría una llamada a la API de autenticación
+      // Por ahora, simulamos un login exitoso
+      setTimeout(() => {
+        localStorage.setItem('customer_token', 'mock-token-123')
+        alert('Login exitoso! Redirigiendo...')
+        window.location.href = '/perfil'
+      }, 1000)
+    } catch (error) {
+      console.error('Login error:', error)
+      alert('Error al iniciar sesión')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleSignup = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (formData.password !== formData.confirmPassword) {
+      alert('Las contraseñas no coinciden')
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      // En una implementación real, esto crearía la cuenta del cliente
+      // Por ahora, simulamos un registro exitoso
+      setTimeout(() => {
+        alert('Cuenta creada exitosamente! Ahora puedes iniciar sesión.')
+        setActiveTab('login')
+        setFormData({
+          ...formData,
+          password: '',
+          confirmPassword: ''
+        })
+      }, 1000)
+    } catch (error) {
+      console.error('Signup error:', error)
+      alert('Error al crear la cuenta')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bone-white)] pt-24">
+      <div className="max-w-md mx-auto px-8 py-16">
+        <header className="mb-12 text-center">
+          <h1 className="text-4xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+            Anchor:23
+          </h1>
+          <p className="text-lg opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
+            Accede a tu cuenta
+          </p>
+        </header>
+
+        <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+          <CardHeader>
+            <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
+              Bienvenido
+            </CardTitle>
+            <CardDescription>
+              Gestiona tus citas y accede a beneficios exclusivos
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'login' | 'signup')}>
+              <TabsList className="grid w-full grid-cols-2 mb-6">
+                <TabsTrigger value="login">Iniciar Sesión</TabsTrigger>
+                <TabsTrigger value="signup">Crear Cuenta</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="login">
+                <form onSubmit={handleLogin} className="space-y-4">
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+                      <Input
+                        id="email"
+                        name="email"
+                        type="email"
+                        value={formData.email}
+                        onChange={handleChange}
+                        required
+                        className="pl-10"
+                        style={{ borderColor: 'var(--mocha-taupe)' }}
+                        placeholder="tu@email.com"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="password">Contraseña</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+                      <Input
+                        id="password"
+                        name="password"
+                        type={showPassword ? 'text' : 'password'}
+                        value={formData.password}
+                        onChange={handleChange}
+                        required
+                        className="pl-10 pr-10"
+                        style={{ borderColor: 'var(--mocha-taupe)' }}
+                        placeholder="Tu contraseña"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-3 opacity-50 hover:opacity-100"
+                        style={{ color: 'var(--mocha-taupe)' }}
+                      >
+                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full"
+                  >
+                    {loading ? 'Iniciando...' : 'Iniciar Sesión'}
+                  </Button>
+                </form>
+
+                <div className="mt-6 text-center">
+                  <Button
+                    variant="link"
+                    onClick={() => alert('Funcionalidad de recuperación próximamente')}
+                    className="text-sm"
+                    style={{ color: 'var(--mocha-taupe)' }}
+                  >
+                    ¿Olvidaste tu contraseña?
+                  </Button>
+                </div>
+              </TabsContent>
+
+              <TabsContent value="signup">
+                <form onSubmit={handleSignup} className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label htmlFor="firstName">Nombre</Label>
+                      <div className="relative">
+                        <User className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+                        <Input
+                          id="firstName"
+                          name="firstName"
+                          value={formData.firstName}
+                          onChange={handleChange}
+                          required
+                          className="pl-10"
+                          style={{ borderColor: 'var(--mocha-taupe)' }}
+                          placeholder="María"
+                        />
+                      </div>
+                    </div>
+                    <div>
+                      <Label htmlFor="lastName">Apellido</Label>
+                      <Input
+                        id="lastName"
+                        name="lastName"
+                        value={formData.lastName}
+                        onChange={handleChange}
+                        required
+                        style={{ borderColor: 'var(--mocha-taupe)' }}
+                        placeholder="García"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="signupEmail">Email</Label>
+                    <div className="relative">
+                      <Mail className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+                      <Input
+                        id="signupEmail"
+                        name="email"
+                        type="email"
+                        value={formData.email}
+                        onChange={handleChange}
+                        required
+                        className="pl-10"
+                        style={{ borderColor: 'var(--mocha-taupe)' }}
+                        placeholder="tu@email.com"
+                      />
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="phone">Teléfono</Label>
+                    <Input
+                      id="phone"
+                      name="phone"
+                      type="tel"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      style={{ borderColor: 'var(--mocha-taupe)' }}
+                      placeholder="+52 844 123 4567"
+                    />
+                  </div>
+
+                  <div>
+                    <Label htmlFor="signupPassword">Contraseña</Label>
+                    <div className="relative">
+                      <Lock className="absolute left-3 top-3 h-4 w-4 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+                      <Input
+                        id="signupPassword"
+                        name="password"
+                        type={showPassword ? 'text' : 'password'}
+                        value={formData.password}
+                        onChange={handleChange}
+                        required
+                        className="pl-10 pr-10"
+                        style={{ borderColor: 'var(--mocha-taupe)' }}
+                        placeholder="Mínimo 8 caracteres"
+                      />
+                      <button
+                        type="button"
+                        onClick={() => setShowPassword(!showPassword)}
+                        className="absolute right-3 top-3 opacity-50 hover:opacity-100"
+                        style={{ color: 'var(--mocha-taupe)' }}
+                      >
+                        {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                      </button>
+                    </div>
+                  </div>
+
+                  <div>
+                    <Label htmlFor="confirmPassword">Confirmar Contraseña</Label>
+                    <Input
+                      id="confirmPassword"
+                      name="confirmPassword"
+                      type="password"
+                      value={formData.confirmPassword}
+                      onChange={handleChange}
+                      required
+                      style={{ borderColor: 'var(--mocha-taupe)' }}
+                      placeholder="Repite tu contraseña"
+                    />
+                  </div>
+
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="w-full"
+                  >
+                    {loading ? 'Creando cuenta...' : 'Crear Cuenta'}
+                  </Button>
+                </form>
+
+                <div className="mt-6 p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
+                  <p className="text-xs opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                    Al crear una cuenta, aceptas nuestros{' '}
+                    <a href="/privacy-policy" className="underline hover:opacity-70" style={{ color: 'var(--deep-earth)' }}>
+                      términos de privacidad
+                    </a>{' '}
+                    y{' '}
+                    <a href="/legal" className="underline hover:opacity-70" style={{ color: 'var(--deep-earth)' }}>
+                      condiciones de servicio
+                    </a>.
+                  </p>
+                </div>
+              </TabsContent>
+            </Tabs>
+          </CardContent>
+        </Card>
+
+        <div className="mt-8 text-center">
+          <p className="text-sm opacity-70 mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+            ¿No necesitas cuenta? Reserva como invitado
+          </p>
+          <Button
+            variant="outline"
+            onClick={() => window.location.href = '/servicios'}
+          >
+            Reservar sin Cuenta
+          </Button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/booking/mis-citas/page.tsx

@@ -0,0 +1,252 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Calendar, Clock, MapPin, User, DollarSign } from 'lucide-react'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+
+export default function MisCitasPage() {
+  const [bookings, setBookings] = useState<any[]>([])
+  const [loading, setLoading] = useState(false)
+  const [filter, setFilter] = useState<'all' | 'upcoming' | 'past'>('all')
+
+  useEffect(() => {
+    loadBookings()
+  }, [])
+
+  const loadBookings = async () => {
+    setLoading(true)
+    try {
+      // En una implementación real, esto vendría de la API
+      // Por ahora, simulamos algunas citas del cliente
+      const mockBookings = [
+        {
+          id: 'booking-1',
+          short_id: 'ABC123',
+          status: 'confirmed',
+          start_time_utc: '2024-01-20T10:00:00Z',
+          end_time_utc: '2024-01-20T11:30:00Z',
+          service: { name: 'Corte y Estilismo', duration_minutes: 90, base_price: 2500 },
+          staff: { display_name: 'Ana López' },
+          location: { name: 'Anchor:23 Saltillo' },
+          notes: 'Corte moderno con degradado'
+        },
+        {
+          id: 'booking-2',
+          short_id: 'DEF456',
+          status: 'pending',
+          start_time_utc: '2024-01-25T14:30:00Z',
+          end_time_utc: '2024-01-25T15:45:00Z',
+          service: { name: 'Manicure de Precisión', duration_minutes: 75, base_price: 1200 },
+          staff: { display_name: 'Carlos Martínez' },
+          location: { name: 'Anchor:23 Saltillo' },
+          notes: null
+        },
+        {
+          id: 'booking-3',
+          short_id: 'GHI789',
+          status: 'completed',
+          start_time_utc: '2024-01-15T09:00:00Z',
+          end_time_utc: '2024-01-15T10:30:00Z',
+          service: { name: 'Peinado y Maquillaje', duration_minutes: 90, base_price: 3500 },
+          staff: { display_name: 'Sofia Ramírez' },
+          location: { name: 'Anchor:23 Saltillo' },
+          notes: 'Evento especial - boda'
+        }
+      ]
+      setBookings(mockBookings)
+    } catch (error) {
+      console.error('Error loading bookings:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const filteredBookings = bookings.filter(booking => {
+    const now = new Date()
+    const bookingDate = new Date(booking.start_time_utc)
+
+    switch (filter) {
+      case 'upcoming':
+        return bookingDate >= now
+      case 'past':
+        return bookingDate < now
+      default:
+        return true
+    }
+  })
+
+  const getStatusBadge = (status: string, startTime: string) => {
+    const now = new Date()
+    const bookingDate = new Date(startTime)
+    const isPast = bookingDate < now
+
+    const statuses = {
+      pending: { label: 'Pendiente', color: 'bg-yellow-100 text-yellow-800' },
+      confirmed: { label: 'Confirmada', color: 'bg-green-100 text-green-800' },
+      completed: { label: 'Completada', color: 'bg-blue-100 text-blue-800' },
+      cancelled: { label: 'Cancelada', color: 'bg-red-100 text-red-800' },
+      no_show: { label: 'No Show', color: 'bg-gray-100 text-gray-800' }
+    }
+
+    const statusInfo = statuses[status as keyof typeof statuses] || statuses.pending
+
+    // Si es pasado y no completado, mostrar como completado
+    if (isPast && status !== 'completed' && status !== 'cancelled') {
+      return { label: 'Completada', color: 'bg-blue-100 text-blue-800' }
+    }
+
+    return statusInfo
+  }
+
+  const handleCancelBooking = async (bookingId: string) => {
+    if (!confirm('¿Estás seguro de que quieres cancelar esta cita?')) {
+      return
+    }
+
+    try {
+      // En una implementación real, esto haría una llamada a la API
+      // Por ahora, simulamos la cancelación
+      setBookings(bookings.map(b =>
+        b.id === bookingId ? { ...b, status: 'cancelled' } : b
+      ))
+      alert('Cita cancelada exitosamente')
+    } catch (error) {
+      console.error('Error cancelling booking:', error)
+      alert('Error al cancelar la cita')
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-[var(--bone-white)] pt-24">
+      <div className="max-w-4xl mx-auto px-8 py-16">
+        <header className="mb-12">
+          <h1 className="text-5xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+            Mis Citas
+          </h1>
+          <p className="text-xl opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
+            Gestiona tus reservas y citas programadas
+          </p>
+        </header>
+
+        <div className="mb-8 flex gap-2">
+          <Button
+            variant={filter === 'all' ? 'default' : 'outline'}
+            onClick={() => setFilter('all')}
+          >
+            Todas
+          </Button>
+          <Button
+            variant={filter === 'upcoming' ? 'default' : 'outline'}
+            onClick={() => setFilter('upcoming')}
+          >
+            Próximas
+          </Button>
+          <Button
+            variant={filter === 'past' ? 'default' : 'outline'}
+            onClick={() => setFilter('past')}
+          >
+            Pasadas
+          </Button>
+        </div>
+
+        {loading ? (
+          <div className="text-center py-12">
+            <p style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>Cargando tus citas...</p>
+          </div>
+        ) : filteredBookings.length === 0 ? (
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardContent className="pt-12 text-center">
+              <Calendar className="w-16 h-16 mx-auto mb-6 opacity-50" style={{ color: 'var(--mocha-taupe)' }} />
+              <h3 className="text-2xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+                {filter === 'all' ? 'No tienes citas' : filter === 'upcoming' ? 'No tienes citas próximas' : 'No tienes citas pasadas'}
+              </h3>
+              <p className="mb-8 opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                {filter === 'all' ? 'Programa tu primera cita con nosotros' : 'Programa una nueva cita'}
+              </p>
+              <Button onClick={() => window.location.href = '/servicios'}>
+                Reservar Cita
+              </Button>
+            </CardContent>
+          </Card>
+        ) : (
+          <div className="space-y-6">
+            {filteredBookings.map((booking) => {
+              const statusInfo = getStatusBadge(booking.status, booking.start_time_utc)
+              const bookingDate = new Date(booking.start_time_utc)
+              const now = new Date()
+              const isUpcoming = bookingDate >= now
+              const canCancel = booking.status === 'pending' || booking.status === 'confirmed'
+
+              return (
+                <Card key={booking.id} className="border-none" style={{ background: 'var(--soft-cream)' }}>
+                  <CardContent className="pt-6">
+                    <div className="flex justify-between items-start mb-4">
+                      <div>
+                        <h3 className="text-xl font-semibold mb-2" style={{ color: 'var(--charcoal-brown)' }}>
+                          {booking.service?.name}
+                        </h3>
+                        <div className="space-y-2 text-sm opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
+                          <div className="flex items-center gap-2">
+                            <Calendar className="w-4 h-4" />
+                            <span>{format(bookingDate, 'EEEE, d MMMM yyyy', { locale: es })}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <Clock className="w-4 h-4" />
+                            <span>{format(new Date(booking.start_time_utc), 'HH:mm', { locale: es })} - {format(new Date(booking.end_time_utc), 'HH:mm', { locale: es })}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <User className="w-4 h-4" />
+                            <span>{booking.staff?.display_name}</span>
+                          </div>
+                          <div className="flex items-center gap-2">
+                            <MapPin className="w-4 h-4" />
+                            <span>{booking.location?.name}</span>
+                          </div>
+                        </div>
+                        {booking.notes && (
+                          <div className="mt-3 p-3 rounded-lg" style={{ background: 'var(--bone-white)', color: 'var(--charcoal-brown)' }}>
+                            <p className="text-sm italic">"{booking.notes}"</p>
+                          </div>
+                        )}
+                      </div>
+
+                      <div className="text-right">
+                        <div className="mb-3">
+                          <span className={`px-3 py-1 rounded-full text-xs font-medium ${statusInfo.color}`}>
+                            {statusInfo.label}
+                          </span>
+                        </div>
+                        <div className="flex items-center gap-1 mb-3">
+                          <DollarSign className="w-4 h-4" style={{ color: 'var(--mocha-taupe)' }} />
+                          <span className="font-semibold" style={{ color: 'var(--charcoal-brown)' }}>
+                            ${booking.service?.base_price?.toLocaleString()}
+                          </span>
+                        </div>
+                        <div className="text-xs opacity-60 mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+                          Código: {booking.short_id}
+                        </div>
+                        {isUpcoming && canCancel && (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() => handleCancelBooking(booking.id)}
+                            style={{ borderColor: 'var(--mocha-taupe)', color: 'var(--charcoal-brown)' }}
+                          >
+                            Cancelar
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

app/booking/perfil/page.tsx

@@ -0,0 +1,341 @@
+'use client'
+
+import { useState, useEffect } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import { Calendar, Clock, MapPin, User, Mail, Phone } from 'lucide-react'
+import { format } from 'date-fns'
+import { es } from 'date-fns/locale'
+
+export default function PerfilPage() {
+  const [customer, setCustomer] = useState<any>(null)
+  const [bookings, setBookings] = useState<any[]>([])
+  const [isEditing, setIsEditing] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    email: '',
+    phone: ''
+  })
+
+  useEffect(() => {
+    loadCustomerProfile()
+    loadCustomerBookings()
+  }, [])
+
+  const loadCustomerProfile = async () => {
+    try {
+      // En una implementación real, esto vendría de autenticación
+      // Por ahora, simulamos datos del cliente
+      const mockCustomer = {
+        id: 'customer-123',
+        first_name: 'María',
+        last_name: 'García',
+        email: 'maria.garcia@email.com',
+        phone: '+52 844 123 4567',
+        tier: 'gold',
+        created_at: '2024-01-15'
+      }
+      setCustomer(mockCustomer)
+      setFormData({
+        first_name: mockCustomer.first_name,
+        last_name: mockCustomer.last_name,
+        email: mockCustomer.email,
+        phone: mockCustomer.phone || ''
+      })
+    } catch (error) {
+      console.error('Error loading customer profile:', error)
+    }
+  }
+
+  const loadCustomerBookings = async () => {
+    try {
+      // En una implementación real, esto vendría de la API
+      // Por ahora, simulamos algunas citas
+      const mockBookings = [
+        {
+          id: 'booking-1',
+          short_id: 'ABC123',
+          status: 'confirmed',
+          start_time_utc: '2024-01-20T10:00:00Z',
+          service: { name: 'Corte y Estilismo', duration_minutes: 60, base_price: 2500 },
+          staff: { display_name: 'Ana López' },
+          location: { name: 'Anchor:23 Saltillo' }
+        },
+        {
+          id: 'booking-2',
+          short_id: 'DEF456',
+          status: 'pending',
+          start_time_utc: '2024-01-25T14:30:00Z',
+          service: { name: 'Manicure de Precisión', duration_minutes: 45, base_price: 1200 },
+          staff: { display_name: 'Carlos Martínez' },
+          location: { name: 'Anchor:23 Saltillo' }
+        }
+      ]
+      setBookings(mockBookings)
+    } catch (error) {
+      console.error('Error loading customer bookings:', error)
+    }
+  }
+
+  const handleSaveProfile = async () => {
+    setLoading(true)
+    try {
+      // En una implementación real, esto actualizaría el perfil del cliente
+      setCustomer({
+        ...customer,
+        ...formData
+      })
+      setIsEditing(false)
+      alert('Perfil actualizado exitosamente')
+    } catch (error) {
+      console.error('Error updating profile:', error)
+      alert('Error al actualizar el perfil')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    })
+  }
+
+  const getTierBadge = (tier: string) => {
+    const tiers = {
+      free: { label: 'Free', color: 'bg-gray-100 text-gray-800' },
+      gold: { label: 'Gold', color: 'bg-yellow-100 text-yellow-800' },
+      black: { label: 'Black', color: 'bg-gray-900 text-white' },
+      vip: { label: 'VIP', color: 'bg-purple-100 text-purple-800' }
+    }
+    return tiers[tier as keyof typeof tiers] || tiers.free
+  }
+
+  const getStatusBadge = (status: string) => {
+    const statuses = {
+      pending: { label: 'Pendiente', color: 'bg-yellow-100 text-yellow-800' },
+      confirmed: { label: 'Confirmada', color: 'bg-green-100 text-green-800' },
+      completed: { label: 'Completada', color: 'bg-blue-100 text-blue-800' },
+      cancelled: { label: 'Cancelada', color: 'bg-red-100 text-red-800' },
+      no_show: { label: 'No Show', color: 'bg-gray-100 text-gray-800' }
+    }
+    return statuses[status as keyof typeof statuses] || statuses.pending
+  }
+
+  if (!customer) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando perfil...</p>
+        </div>
+      </div>
+    )
+  }
+
+  const tierInfo = getTierBadge(customer.tier)
+
+  return (
+    <div className="min-h-screen bg-[var(--bone-white)] pt-24">
+      <div className="max-w-4xl mx-auto px-8 py-16">
+        <header className="mb-12">
+          <h1 className="text-5xl mb-4" style={{ color: 'var(--charcoal-brown)' }}>
+            Mi Perfil
+          </h1>
+          <p className="text-xl opacity-80" style={{ color: 'var(--charcoal-brown)' }}>
+            Gestiona tu información y citas
+          </p>
+        </header>
+
+        <div className="grid md:grid-cols-2 gap-8 mb-12">
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between" style={{ color: 'var(--charcoal-brown)' }}>
+                Información Personal
+                {!isEditing && (
+                  <Button variant="outline" size="sm" onClick={() => setIsEditing(true)}>
+                    Editar
+                  </Button>
+                )}
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              {isEditing ? (
+                <div className="space-y-4">
+                  <div className="grid grid-cols-2 gap-4">
+                    <div>
+                      <Label htmlFor="first_name">Nombre</Label>
+                      <Input
+                        id="first_name"
+                        name="first_name"
+                        value={formData.first_name}
+                        onChange={handleChange}
+                        className="mt-1"
+                      />
+                    </div>
+                    <div>
+                      <Label htmlFor="last_name">Apellido</Label>
+                      <Input
+                        id="last_name"
+                        name="last_name"
+                        value={formData.last_name}
+                        onChange={handleChange}
+                        className="mt-1"
+                      />
+                    </div>
+                  </div>
+                  <div>
+                    <Label htmlFor="email">Email</Label>
+                    <Input
+                      id="email"
+                      name="email"
+                      type="email"
+                      value={formData.email}
+                      onChange={handleChange}
+                      className="mt-1"
+                    />
+                  </div>
+                  <div>
+                    <Label htmlFor="phone">Teléfono</Label>
+                    <Input
+                      id="phone"
+                      name="phone"
+                      value={formData.phone}
+                      onChange={handleChange}
+                      className="mt-1"
+                    />
+                  </div>
+                  <div className="flex gap-2">
+                    <Button onClick={handleSaveProfile} disabled={loading}>
+                      {loading ? 'Guardando...' : 'Guardar'}
+                    </Button>
+                    <Button variant="outline" onClick={() => setIsEditing(false)}>
+                      Cancelar
+                    </Button>
+                  </div>
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  <div className="flex items-center gap-3">
+                    <User className="w-5 h-5" style={{ color: 'var(--mocha-taupe)' }} />
+                    <span style={{ color: 'var(--charcoal-brown)' }}>
+                      {customer.first_name} {customer.last_name}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-3">
+                    <Mail className="w-5 h-5" style={{ color: 'var(--mocha-taupe)' }} />
+                    <span style={{ color: 'var(--charcoal-brown)' }}>{customer.email}</span>
+                  </div>
+                  {customer.phone && (
+                    <div className="flex items-center gap-3">
+                      <Phone className="w-5 h-5" style={{ color: 'var(--mocha-taupe)' }} />
+                      <span style={{ color: 'var(--charcoal-brown)' }}>{customer.phone}</span>
+                    </div>
+                  )}
+                  <div className="flex items-center gap-3">
+                    <span className={`px-3 py-1 rounded-full text-sm font-medium ${tierInfo.color}`}>
+                      {tierInfo.label} Tier
+                    </span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+
+          <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+            <CardHeader>
+              <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
+                Resumen de Actividad
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div className="text-center">
+                  <div className="text-3xl font-bold" style={{ color: 'var(--charcoal-brown)' }}>
+                    {bookings.length}
+                  </div>
+                  <div className="text-sm opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                    Citas totales
+                  </div>
+                </div>
+
+                <div className="text-center">
+                  <div className="text-3xl font-bold" style={{ color: 'var(--charcoal-brown)' }}>
+                    {bookings.filter(b => b.status === 'completed').length}
+                  </div>
+                  <div className="text-sm opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                    Completadas
+                  </div>
+                </div>
+
+                <div className="text-center">
+                  <div className="text-3xl font-bold" style={{ color: 'var(--charcoal-brown)' }}>
+                    Miembro desde {format(new Date(customer.created_at), 'MMM yyyy', { locale: es })}
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
+          <CardHeader>
+            <CardTitle style={{ color: 'var(--charcoal-brown)' }}>
+              Mis Últimas Citas
+            </CardTitle>
+            <CardDescription>
+              Historial de tus reservas
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            {bookings.length === 0 ? (
+              <div className="text-center py-8">
+                <p style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
+                  No tienes citas programadas
+                </p>
+                <Button className="mt-4" onClick={() => window.location.href = '/servicios'}>
+                  Reservar Cita
+                </Button>
+              </div>
+            ) : (
+              <div className="space-y-4">
+                {bookings.map((booking) => (
+                  <div key={booking.id} className="flex items-center justify-between p-4 border rounded-lg" style={{ borderColor: 'var(--mocha-taupe)' }}>
+                    <div className="flex items-center gap-4">
+                      <div>
+                        <p className="font-semibold" style={{ color: 'var(--charcoal-brown)' }}>
+                          {booking.service?.name}
+                        </p>
+                        <p className="text-sm opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                          {booking.staff?.display_name} • {booking.location?.name}
+                        </p>
+                        <p className="text-sm opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                          {format(new Date(booking.start_time_utc), 'PPP HH:mm', { locale: es })}
+                        </p>
+                      </div>
+                      <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusBadge(booking.status).color}`}>
+                        {getStatusBadge(booking.status).label}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <p className="font-semibold" style={{ color: 'var(--charcoal-brown)' }}>
+                        ${booking.service?.base_price?.toLocaleString()}
+                      </p>
+                      <p className="text-xs opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
+                        Código: {booking.short_id}
+                      </p>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}