mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 19:24:32 +00:00
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
This commit is contained in:
Marco Gallegos
11
TASKS.md
11
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
|
- Implementarse con migración de datos
|
||||||
- Notificar a clientes de la necesidad de reprogramar
|
- 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
|
### Próximas Decisiones
|
||||||
1. ¿Implementar Auth con Supabase Magic Links o SMS?
|
1. ¿Implementar Auth con Supabase Magic Links o SMS?
|
||||||
2. ¿Usar Google Calendar API o Edge Functions para sync?
|
2. ¿Usar Google Calendar API o Edge Functions para sync?
|
||||||
|
|||||||
@@ -176,16 +176,18 @@ export default function ApertureDashboard() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="text-right">
|
<div className="text-right">
|
||||||
<span className={`px-2 py-1 rounded text-xs ${
|
<span className={`px-2 py-1 rounded text-xs ${
|
||||||
booking.status === 'confirmed' ? 'bg-green-100 text-green-800' :
|
booking.status === 'confirmed'
|
||||||
booking.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
? 'bg-green-100 text-green-800'
|
||||||
'bg-gray-100 text-gray-800'
|
: booking.status === 'pending'
|
||||||
|
? 'bg-yellow-100 text-yellow-800'
|
||||||
|
: 'bg-gray-100 text-gray-800'
|
||||||
}`}>
|
}`}>
|
||||||
{booking.status}
|
{booking.status}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
))
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -15,14 +15,16 @@ export async function GET(request: NextRequest) {
|
|||||||
.order('date', { ascending: true })
|
.order('date', { ascending: true })
|
||||||
|
|
||||||
if (locationId) {
|
if (locationId) {
|
||||||
const locationStaff = await supabaseAdmin
|
const { data: locationStaff } = await supabaseAdmin
|
||||||
.from('staff')
|
.from('staff')
|
||||||
.select('id, display_name')
|
.select('id, display_name')
|
||||||
.eq('location_id', locationId)
|
.eq('location_id', locationId)
|
||||||
.eq('is_active', true)
|
.eq('is_active', true)
|
||||||
|
|
||||||
|
if (locationStaff && locationStaff.length > 0) {
|
||||||
query = query.in('staff_id', locationStaff.map(s => s.id))
|
query = query.in('staff_id', locationStaff.map(s => s.id))
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (staffId) {
|
if (staffId) {
|
||||||
query = query.eq('staff_id', staffId)
|
query = query.eq('staff_id', staffId)
|
||||||
|
|||||||
@@ -21,18 +21,28 @@ export default function BookingLayout({
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="nav-actions flex items-center gap-4">
|
<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">
|
<Button variant="ghost" size="sm">
|
||||||
<Calendar className="w-4 h-4 mr-2" />
|
<Calendar className="w-4 h-4 mr-2" />
|
||||||
Mis Citas
|
Mis Citas
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
<Link href="/perfil">
|
<Link href="/booking/perfil">
|
||||||
<Button variant="ghost" size="sm">
|
<Button variant="ghost" size="sm">
|
||||||
<User className="w-4 h-4 mr-2" />
|
<User className="w-4 h-4 mr-2" />
|
||||||
Perfil
|
Perfil
|
||||||
</Button>
|
</Button>
|
||||||
</Link>
|
</Link>
|
||||||
|
<Link href="/booking/login">
|
||||||
|
<Button variant="outline" size="sm">
|
||||||
|
Iniciar Sesión
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
320
app/booking/login/page.tsx
Normal file
320
app/booking/login/page.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
252
app/booking/mis-citas/page.tsx
Normal file
252
app/booking/mis-citas/page.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
341
app/booking/perfil/page.tsx
Normal file
341
app/booking/perfil/page.tsx
Normal file
@@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user