feat: Complete SalonOS implementation with authentication, payments, reports, and documentation

- Implement client authentication with Supabase magic links
- Add Stripe payment integration for deposits
- Complete The Boutique booking flow with payment processing
- Implement Aperture backend with staff/resources management
- Add comprehensive reports: sales, payments, payroll
- Create permissions management system by roles
- Configure kiosk system with enrollment
- Add no-show logic and penalization system
- Update project documentation and API docs
- Enhance README with current project status

app/booking/cita/page.tsx

@@ -1,15 +1,20 @@
 'use client'
 
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/navigation'
 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 { CheckCircle2, Calendar, Clock, MapPin } from 'lucide-react'
+import { CheckCircle2, Calendar, Clock, MapPin, CreditCard } from 'lucide-react'
+import { CardElement, useStripe, useElements } from '@stripe/react-stripe-js'
 import { format } from 'date-fns'
 import { es } from 'date-fns/locale'
+import { useAuth } from '@/lib/auth/context'
 
 export default function CitaPage() {
+  const { user, loading: authLoading } = useAuth()
+  const router = useRouter()
   const [formData, setFormData] = useState({
     nombre: '',
     email: '',
@@ -17,8 +22,32 @@ export default function CitaPage() {
     notas: ''
   })
   const [bookingDetails, setBookingDetails] = useState<any>(null)
-  const [loading, setLoading] = useState(false)
+  const [pageLoading, setPageLoading] = useState(false)
   const [submitted, setSubmitted] = useState(false)
+  const [paymentIntent, setPaymentIntent] = useState<any>(null)
+  const [showPayment, setShowPayment] = useState(false)
+  const stripe = useStripe()
+  const elements = useElements()
+
+  useEffect(() => {
+    if (!authLoading && !user) {
+      router.push('/booking/login?redirect=/booking/cita' + window.location.search)
+    }
+  }, [user, authLoading, router])
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null
+  }
 
   useEffect(() => {
     const params = new URLSearchParams(window.location.search)
@@ -32,6 +61,15 @@ export default function CitaPage() {
     }
   }, [])
 
+  useEffect(() => {
+    if (user) {
+      setFormData(prev => ({
+        ...prev,
+        email: user.email || ''
+      }))
+    }
+  }, [user])
+
   const fetchBookingDetails = async (serviceId: string, locationId: string, date: string, time: string) => {
     try {
       const response = await fetch(`/api/availability/time-slots?location_id=${locationId}&service_id=${serviceId}&date=${date}`)
@@ -51,10 +89,10 @@ export default function CitaPage() {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
-    setLoading(true)
+    setPageLoading(true)
 
     try {
-      const response = await fetch('/api/bookings', {
+      const response = await fetch('/api/create-payment-intent', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json'
@@ -73,16 +111,17 @@ export default function CitaPage() {
 
       const data = await response.json()
 
-      if (response.ok && data.success) {
-        setSubmitted(true)
+      if (response.ok) {
+        setPaymentIntent(data)
+        setShowPayment(true)
       } else {
-        alert('Error al crear la reserva: ' + (data.error || 'Error desconocido'))
+        alert('Error al preparar el pago: ' + (data.error || 'Error desconocido'))
       }
     } catch (error) {
-      console.error('Error creating booking:', error)
-      alert('Error al crear la reserva')
+      console.error('Error creating payment intent:', error)
+      alert('Error al preparar el pago')
     } finally {
-      setLoading(false)
+      setPageLoading(false)
     }
   }
 
@@ -93,6 +132,57 @@ export default function CitaPage() {
     })
   }
 
+  const handlePayment = async () => {
+    if (!stripe || !elements) return
+
+    setPageLoading(true)
+
+    const { error } = await stripe.confirmCardPayment(paymentIntent.clientSecret, {
+      payment_method: {
+        card: elements.getElement(CardElement)!,
+      }
+    })
+
+    if (error) {
+      alert('Error en el pago: ' + error.message)
+      setPageLoading(false)
+    } else {
+      // Payment succeeded, create booking
+      try {
+        const response = await fetch('/api/bookings', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            customer_email: formData.email,
+            customer_phone: formData.telefono,
+            customer_first_name: formData.nombre.split(' ')[0] || formData.nombre,
+            customer_last_name: formData.nombre.split(' ').slice(1).join(' '),
+            service_id: bookingDetails.service_id,
+            location_id: bookingDetails.location_id,
+            start_time_utc: bookingDetails.startTime,
+            notes: formData.notas,
+            payment_intent_id: paymentIntent.id
+          })
+        })
+
+        const data = await response.json()
+
+        if (response.ok && data.success) {
+          setSubmitted(true)
+        } else {
+          alert('Error al crear la reserva: ' + (data.error || 'Error desconocido'))
+        }
+      } catch (error) {
+        console.error('Error creating booking:', error)
+        alert('Error al crear la reserva')
+      } finally {
+        setPageLoading(false)
+      }
+    }
+  }
+
   if (submitted) {
     return (
       <div className="min-h-screen bg-[var(--bone-white)] pt-24 flex items-center justify-center">
@@ -257,19 +347,52 @@ export default function CitaPage() {
                   />
                 </div>
 
-                <Button
-                  type="submit"
-                  disabled={loading}
-                  className="w-full"
-                >
-                  {loading ? 'Procesando...' : 'Confirmar Reserva'}
-                </Button>
+                {showPayment ? (
+                  <div className="space-y-4">
+                    <div className="p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
+                      <Label>Información de Pago</Label>
+                      <p className="text-sm opacity-70 mb-4">
+                        Depósito requerido: ${(paymentIntent.amount / 100).toFixed(2)} USD
+                        (50% del servicio o $200 máximo)
+                      </p>
+                      <div className="border rounded-lg p-4" style={{ borderColor: 'var(--mocha-taupe)' }}>
+                        <CardElement
+                          options={{
+                            style: {
+                              base: {
+                                fontSize: '16px',
+                                color: 'var(--charcoal-brown)',
+                                '::placeholder': {
+                                  color: 'var(--mocha-taupe)',
+                                },
+                              },
+                            },
+                          }}
+                        />
+                      </div>
+                    </div>
+                    <Button
+                      onClick={handlePayment}
+                      disabled={!stripe || pageLoading}
+                      className="w-full"
+                    >
+                      {pageLoading ? 'Procesando Pago...' : 'Pagar y Confirmar Reserva'}
+                    </Button>
+                  </div>
+                ) : (
+                  <Button
+                    type="submit"
+                    disabled={pageLoading}
+                  >
+                    {pageLoading ? 'Procesando...' : 'Continuar al Pago'}
+                  </Button>
+                )}
               </form>
 
               <div className="mt-6 p-4 rounded-lg" style={{ background: 'var(--bone-white)' }}>
                 <p className="text-sm" style={{ color: 'var(--charcoal-brown)', opacity: 0.7 }}>
                   * Al confirmar tu reserva, recibirás un correo de confirmación
-                  con los detalles. La reserva se mantendrá por 30 minutos.
+                  con los detalles. Se requiere un depósito para confirmar.
                 </p>
               </div>
             </CardContent>