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/aperture/page.tsx

@@ -1,16 +1,25 @@
 '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 { Calendar, Users, Clock, DollarSign, TrendingUp, LogOut } from 'lucide-react'
 import { format } from 'date-fns'
 import { es } from 'date-fns/locale'
+import { useAuth } from '@/lib/auth/context'
 
 export default function ApertureDashboard() {
-  const [activeTab, setActiveTab] = useState<'dashboard' | 'staff' | 'resources' | 'reports'>('dashboard')
+  const { user, loading: authLoading, signOut } = useAuth()
+  const router = useRouter()
+  const [activeTab, setActiveTab] = useState<'dashboard' | 'staff' | 'resources' | 'reports' | 'permissions'>('dashboard')
+  const [reportType, setReportType] = useState<'sales' | 'payments' | 'payroll'>('sales')
   const [bookings, setBookings] = useState<any[]>([])
-  const [loading, setLoading] = useState(false)
+  const [staff, setStaff] = useState<any[]>([])
+  const [resources, setResources] = useState<any[]>([])
+  const [reports, setReports] = useState<any>({})
+  const [permissions, setPermissions] = useState<any[]>([])
+  const [pageLoading, setPageLoading] = useState(false)
   const [stats, setStats] = useState({
     totalBookings: 0,
     totalRevenue: 0,
@@ -19,12 +28,42 @@ export default function ApertureDashboard() {
   })
 
   useEffect(() => {
-    fetchBookings()
-    fetchStats()
-  }, [])
+    if (!authLoading && !user) {
+      router.push('/booking/login?redirect=/aperture')
+    }
+  }, [user, authLoading, router])
+
+  if (authLoading) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+        <div className="text-center">
+          <p>Cargando...</p>
+        </div>
+      </div>
+    )
+  }
+
+  if (!user) {
+    return null
+  }
+
+  useEffect(() => {
+    if (activeTab === 'dashboard') {
+      fetchBookings()
+      fetchStats()
+    } else if (activeTab === 'staff') {
+      fetchStaff()
+    } else if (activeTab === 'resources') {
+      fetchResources()
+    } else if (activeTab === 'reports') {
+      fetchReports()
+    } else if (activeTab === 'permissions') {
+      fetchPermissions()
+    }
+  }, [activeTab, reportType])
 
   const fetchBookings = async () => {
-    setLoading(true)
+    setPageLoading(true)
     try {
       const today = format(new Date(), 'yyyy-MM-dd')
       const response = await fetch(`/api/aperture/dashboard?start_date=${today}&end_date=${today}`)
@@ -35,7 +74,7 @@ export default function ApertureDashboard() {
     } catch (error) {
       console.error('Error fetching bookings:', error)
     } finally {
-      setLoading(false)
+      setPageLoading(false)
     }
   }
 
@@ -51,6 +90,86 @@ export default function ApertureDashboard() {
     }
   }
 
+  const fetchStaff = async () => {
+    setPageLoading(true)
+    try {
+      const response = await fetch('/api/aperture/staff')
+      const data = await response.json()
+      if (data.success) {
+        setStaff(data.staff)
+      }
+    } catch (error) {
+      console.error('Error fetching staff:', error)
+    } finally {
+      setPageLoading(false)
+    }
+  }
+
+  const fetchResources = async () => {
+    setPageLoading(true)
+    try {
+      const response = await fetch('/api/aperture/resources')
+      const data = await response.json()
+      if (data.success) {
+        setResources(data.resources)
+      }
+    } catch (error) {
+      console.error('Error fetching resources:', error)
+    } finally {
+      setPageLoading(false)
+    }
+  }
+
+  const fetchReports = async () => {
+    setPageLoading(true)
+    try {
+      let endpoint = ''
+      if (reportType === 'sales') endpoint = '/api/aperture/reports/sales'
+      else if (reportType === 'payments') endpoint = '/api/aperture/reports/payments'
+      else if (reportType === 'payroll') endpoint = '/api/aperture/reports/payroll'
+
+      if (endpoint) {
+        const response = await fetch(endpoint)
+        const data = await response.json()
+        if (data.success) {
+          setReports(data)
+        }
+      }
+    } catch (error) {
+      console.error('Error fetching reports:', error)
+    } finally {
+      setPageLoading(false)
+    }
+  }
+
+  const fetchPermissions = async () => {
+    setPageLoading(true)
+    try {
+      const response = await fetch('/api/aperture/permissions')
+      const data = await response.json()
+      if (data.success) {
+        setPermissions(data.permissions)
+      }
+    } catch (error) {
+      console.error('Error fetching permissions:', error)
+    } finally {
+      setPageLoading(false)
+    }
+  }
+
+  const togglePermission = async (roleId: string, permId: string) => {
+    try {
+      await fetch('/api/aperture/permissions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ roleId, permId })
+      })
+      fetchPermissions() // Refresh
+    } catch (error) {
+      console.error('Error toggling permission:', error)
+    }
+  }
+
   const handleLogout = () => {
     localStorage.removeItem('admin_enrollment_key')
     window.location.href = '/'
@@ -142,9 +261,16 @@ export default function ApertureDashboard() {
               variant={activeTab === 'reports' ? 'default' : 'outline'}
               onClick={() => setActiveTab('reports')}
             >
-              <LogOut className="w-4 h-4 mr-2" />
+              <TrendingUp className="w-4 h-4 mr-2" />
               Reportes
             </Button>
+            <Button
+              variant={activeTab === 'permissions' ? 'default' : 'outline'}
+              onClick={() => setActiveTab('permissions')}
+            >
+              <Users className="w-4 h-4 mr-2" />
+              Permisos
+            </Button>
           </div>
         </div>
 
@@ -155,7 +281,7 @@ export default function ApertureDashboard() {
               <CardDescription>Resumen de operaciones del día</CardDescription>
             </CardHeader>
             <CardContent>
-              {loading ? (
+              {pageLoading ? (
                 <div className="text-center py-8">
                   Cargando...
                 </div>
@@ -202,9 +328,23 @@ export default function ApertureDashboard() {
               <CardDescription>Administra horarios y disponibilidad del equipo</CardDescription>
             </CardHeader>
             <CardContent>
-              <p className="text-center text-gray-500 mb-4">
-                Funcionalidad de gestión de staff próximamente
-              </p>
+              {pageLoading ? (
+                <p className="text-center">Cargando staff...</p>
+              ) : (
+                <div className="space-y-4">
+                  {staff.map((member) => (
+                    <div key={member.id} className="flex items-center justify-between p-4 border rounded-lg">
+                      <div>
+                        <p className="font-semibold">{member.display_name}</p>
+                        <p className="text-sm text-gray-600">{member.role}</p>
+                      </div>
+                      <Button variant="outline" size="sm">
+                        Gestionar Horarios
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
             </CardContent>
           </Card>
         )}
@@ -216,25 +356,174 @@ export default function ApertureDashboard() {
               <CardDescription>Administra estaciones y asignación</CardDescription>
             </CardHeader>
             <CardContent>
-              <p className="text-center text-gray-500 mb-4">
-                Funcionalidad de gestión de recursos próximamente
-              </p>
+              {pageLoading ? (
+                <p className="text-center">Cargando recursos...</p>
+              ) : (
+                <div className="space-y-4">
+                  {resources.map((resource) => (
+                    <div key={resource.id} className="flex items-center justify-between p-4 border rounded-lg">
+                      <div>
+                        <p className="font-semibold">{resource.name}</p>
+                        <p className="text-sm text-gray-600">{resource.type} - {resource.location_name}</p>
+                      </div>
+                      <span className={`px-2 py-1 rounded text-xs ${
+                        resource.is_available ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'
+                      }`}>
+                        {resource.is_available ? 'Disponible' : 'Ocupado'}
+                      </span>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {activeTab === 'permissions' && (
+          <Card>
+            <CardHeader>
+              <CardTitle>Gestión de Permisos</CardTitle>
+              <CardDescription>Asignar permisos dependiendo del perfil</CardDescription>
+            </CardHeader>
+            <CardContent>
+              {pageLoading ? (
+                <p className="text-center">Cargando permisos...</p>
+              ) : (
+                <div className="space-y-4">
+                  {permissions.map((role: any) => (
+                    <div key={role.id} className="p-4 border rounded-lg">
+                      <h3 className="font-semibold">{role.name}</h3>
+                      <div className="mt-2 space-y-2">
+                        {role.permissions.map((perm: any) => (
+                          <div key={perm.id} className="flex items-center space-x-2">
+                            <input
+                              type="checkbox"
+                              checked={perm.enabled}
+                              onChange={() => togglePermission(role.id, perm.id)}
+                            />
+                            <span>{perm.name}</span>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
             </CardContent>
           </Card>
         )}
 
         {activeTab === 'reports' && (
-          <Card>
-            <CardHeader>
-              <CardTitle>Reportes</CardTitle>
-              <CardDescription>Estadísticas y análisis de operaciones</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <p className="text-center text-gray-500 mb-4">
-                Funcionalidad de reportes próximamente
-              </p>
-            </CardContent>
-          </Card>
+          <div className="space-y-6">
+            <Card>
+              <CardHeader>
+                <CardTitle>Reportes</CardTitle>
+                <CardDescription>Estadísticas y reportes del negocio</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="flex space-x-4 mb-4">
+                  <Button
+                    variant={reportType === 'sales' ? 'default' : 'outline'}
+                    onClick={() => setReportType('sales')}
+                  >
+                    Ventas
+                  </Button>
+                  <Button
+                    variant={reportType === 'payments' ? 'default' : 'outline'}
+                    onClick={() => setReportType('payments')}
+                  >
+                    Pagos
+                  </Button>
+                  <Button
+                    variant={reportType === 'payroll' ? 'default' : 'outline'}
+                    onClick={() => setReportType('payroll')}
+                  >
+                    Nómina
+                  </Button>
+                </div>
+
+                {pageLoading ? (
+                  <p className="text-center">Cargando reportes...</p>
+                ) : (
+                  <div>
+                    {reportType === 'sales' && (
+                      <div className="space-y-4">
+                        <div className="grid grid-cols-3 gap-4">
+                          <div className="p-4 bg-green-50 rounded-lg">
+                            <p className="text-sm text-green-600">Ventas Totales</p>
+                            <p className="text-2xl font-bold">${reports.totalSales || 0}</p>
+                          </div>
+                          <div className="p-4 bg-blue-50 rounded-lg">
+                            <p className="text-sm text-blue-600">Citas Completadas</p>
+                            <p className="text-2xl font-bold">{reports.completedBookings || 0}</p>
+                          </div>
+                          <div className="p-4 bg-purple-50 rounded-lg">
+                            <p className="text-sm text-purple-600">Promedio por Servicio</p>
+                            <p className="text-2xl font-bold">${reports.avgServicePrice || 0}</p>
+                          </div>
+                        </div>
+                        {reports.salesByService && (
+                          <div>
+                            <h3 className="text-lg font-semibold mb-2">Ventas por Servicio</h3>
+                            <div className="space-y-2">
+                              {reports.salesByService.map((item: any) => (
+                                <div key={item.service} className="flex justify-between p-2 bg-gray-50 rounded">
+                                  <span>{item.service}</span>
+                                  <span>${item.total}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    )}
+
+                    {reportType === 'payments' && (
+                      <div className="space-y-4">
+                        <h3 className="text-lg font-semibold">Pagos Recientes</h3>
+                        {reports.payments && reports.payments.length > 0 ? (
+                          <div className="space-y-2">
+                            {reports.payments.map((payment: any) => (
+                              <div key={payment.id} className="p-4 border rounded-lg">
+                                <div className="flex justify-between">
+                                  <span>{payment.customer}</span>
+                                  <span>${payment.amount}</span>
+                                </div>
+                                <p className="text-sm text-gray-600">{payment.date} - {payment.status}</p>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <p>No hay pagos recientes</p>
+                        )}
+                      </div>
+                    )}
+
+                    {reportType === 'payroll' && (
+                      <div className="space-y-4">
+                        <h3 className="text-lg font-semibold">Nómina Semanal</h3>
+                        {reports.payroll && reports.payroll.length > 0 ? (
+                          <div className="space-y-2">
+                            {reports.payroll.map((staff: any) => (
+                              <div key={staff.id} className="p-4 border rounded-lg">
+                                <div className="flex justify-between">
+                                  <span>{staff.name}</span>
+                                  <span>${staff.weeklyPay}</span>
+                                </div>
+                                <p className="text-sm text-gray-600">Horas: {staff.hours}, Comisión: ${staff.commission}</p>
+                              </div>
+                            ))}
+                          </div>
+                        ) : (
+                          <p>No hay datos de nómina</p>
+                        )}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
         )}
       </div>
     </div>