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/layout.tsx

@@ -1,15 +1,23 @@
+'use client'
+
 import { ReactNode } from 'react'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
-import { Calendar, User } from 'lucide-react'
+import { Calendar, User, LogOut } from 'lucide-react'
+import { useAuth } from '@/lib/auth/context'
+import { loadStripe } from '@stripe/stripe-js'
+import { Elements } from '@stripe/react-stripe-js'
+
+const stripePromise = loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!)
 
 export default function BookingLayout({
   children,
 }: {
   children: ReactNode
 }) {
+  const { user, signOut, loading } = useAuth()
   return (
-    <>
+    <Elements stripe={stripePromise}>
       <header className="site-header booking-header">
         <nav className="nav-primary">
           <div className="logo">
@@ -26,23 +34,37 @@ export default function BookingLayout({
                 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="/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>
+            {user ? (
+              <>
+                <Link href="/booking/mis-citas">
+                  <Button variant="ghost" size="sm">
+                    <Calendar className="w-4 h-4 mr-2" />
+                    Mis Citas
+                  </Button>
+                </Link>
+                <Link href="/booking/perfil">
+                  <Button variant="ghost" size="sm">
+                    <User className="w-4 h-4 mr-2" />
+                    Perfil
+                  </Button>
+                </Link>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={() => signOut()}
+                  disabled={loading}
+                >
+                  <LogOut className="w-4 h-4 mr-2" />
+                  Salir
+                </Button>
+              </>
+            ) : (
+              <Link href="/booking/login">
+                <Button variant="outline" size="sm">
+                  Iniciar Sesión
+                </Button>
+              </Link>
+            )}
           </div>
         </nav>
       </header>
@@ -50,6 +72,6 @@ export default function BookingLayout({
       <main className="pt-24">
         {children}
       </main>
-    </>
+    </Elements>
   )
 }