marcogll/AnchorOS
1
0
Fork 0
mirror of https://github.com/marcogll/AnchorOS.git synced 2026-03-15 13:24:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
Marco Gallegos
2026-01-16 17:35:29 -06:00
parent 0016bfb1e5
commit 28e98a2a44
16 changed files with 1225 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
API.md Normal file
View File

@@ -0,0 +1,144 @@
# SalonOS API Documentation
## Overview
SalonOS is a comprehensive salon management system built with Next.js, Supabase, and Stripe integration.
## Authentication
- **Client Authentication**: Magic link via Supabase Auth
- **Staff/Admin Authentication**: Supabase Auth with role-based access
- **Kiosk Authentication**: API key based
## API Endpoints
### Public APIs
#### Services
- `GET /api/services` - List all available services
- `POST /api/services` - Create new service (Admin only)
#### Locations
- `GET /api/locations` - List all salon locations
#### Availability
- `GET /api/availability/time-slots` - Get available time slots for booking
- `POST /api/availability/staff-unavailable` - Mark staff unavailable (Staff auth required)
#### Bookings (Public)
- `POST /api/bookings` - Create new booking
- `GET /api/bookings/[id]` - Get booking details
- `PUT /api/bookings/[id]` - Update booking
### Staff/Admin APIs (Aperture)
#### Dashboard
- `GET /api/aperture/dashboard` - Dashboard data
- `GET /api/aperture/stats` - Statistics
#### Staff Management
- `GET /api/aperture/staff` - List staff members
- `POST /api/aperture/staff` - Create/Update staff
#### Resources
- `GET /api/aperture/resources` - List resources
- `POST /api/aperture/resources` - Manage resources
#### Reports
- `GET /api/aperture/reports/sales` - Sales reports
- `GET /api/aperture/reports/payments` - Payment reports
- `GET /api/aperture/reports/payroll` - Payroll reports
#### Permissions
- `GET /api/aperture/permissions` - Get role permissions
- `POST /api/aperture/permissions` - Update permissions
### Kiosk APIs
- `POST /api/kiosk/authenticate` - Authenticate kiosk
- `GET /api/kiosk/resources/available` - Get available resources for kiosk
- `POST /api/kiosk/bookings` - Create walk-in booking
- `PUT /api/kiosk/bookings/[shortId]/confirm` - Confirm booking
### Payment APIs
- `POST /api/create-payment-intent` - Create Stripe payment intent
### Admin APIs
- `GET /api/admin/locations` - List locations (Admin key required)
- `POST /api/admin/users` - Create staff/user
- `POST /api/admin/kiosks` - Create kiosk
## Data Models
### User Roles
- `customer` - End customers
- `staff` - Salon staff
- `artist` - Service providers
- `manager` - Location managers
- `admin` - System administrators
- `kiosk` - Kiosk devices
### Key Tables
- `locations` - Salon locations
- `staff` - Staff members
- `services` - Available services
- `resources` - Physical resources (stations)
- `customers` - Customer profiles
- `bookings` - Service bookings
- `kiosks` - Kiosk devices
- `audit_logs` - System audit trail
## Environment Variables
### Required
- `NEXT_PUBLIC_SUPABASE_URL`
- `NEXT_PUBLIC_SUPABASE_ANON_KEY`
- `SUPABASE_SERVICE_ROLE_KEY`
- `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`
- `STRIPE_SECRET_KEY`
### Optional
- `ADMIN_ENROLLMENT_KEY` - For staff enrollment
- `GOOGLE_SERVICE_ACCOUNT_KEY` - For Calendar sync
## Deployment
### Prerequisites
- Node.js 18+
- Supabase account
- Stripe account
- Google Cloud (for Calendar)
### Setup Steps
1. Clone repository
2. Install dependencies: `npm install`
3. Configure environment variables
4. Run database migrations: `npm run db:migrate`
5. Seed data: `npm run db:seed`
6. Build: `npm run build`
7. Start: `npm start`
## Features
### Core Functionality
- Multi-location salon management
- Real-time availability system
- Integrated payment processing
- Staff scheduling and payroll
- Customer relationship management
- Kiosk system for walk-ins
### Advanced Features
- Role-based access control
- Audit logging
- Automated no-show handling
- Commission-based payroll
- Sales analytics and reporting
- Permission management
### Security
- Row Level Security (RLS) in Supabase
- API key authentication for kiosks
- Magic link authentication for customers
- Encrypted payment processing
## Support
For API issues or feature requests, please check the TASKS.md for current priorities or create an issue in the repository.

65
README.md
View File

@@ -47,6 +47,8 @@ Este proyecto se rige por los siguientes documentos:
* **PRD (Documento Maestro)** → Definición de producto y reglas de negocio.
* **README (este archivo)** → Guía técnica y operativa del repo.
* **API.md** → Documentación completa de APIs y endpoints.
* **TASKS.md** → Plan de ejecución por fases y estado actual.
El PRD es la fuente de verdad funcional. El README es la guía de ejecución.
@@ -210,7 +212,7 @@ El sitio estará disponible en **http://localhost:2311**
- ✅ Esquema de base de datos completo
- ✅ Sistema de roles y permisos RLS
- ✅ Generadores de Short ID y códigos de invitación
- ✅ Sistema de kiosko completo
- ✅ Sistema de kiosko completo con enrollment
- ✅ API routes para kiosko
- ✅ Componentes UI para kiosko
- ✅ Actualización de recursos con códigos estandarizados
@@ -219,7 +221,17 @@ El sitio estará disponible en **http://localhost:2311**
- ✅ Sistema de disponibilidad (staff, recursos, bloques)
- ✅ API routes de disponibilidad
- ✅ API de reservas para clientes (POST/GET)
- ✅ HQ Dashboard con calendario multi-columna
- ✅ HQ Dashboard (Aperture) con gestión de staff y recursos
- ✅ Reportes de ventas, pagos y nómina
- ✅ Gestión de permisos por roles
- ✅ Integración con Stripe para pagos y depósitos
- ✅ Autenticación completa (clientes con magic links, staff/admin)
- ✅ The Boutique - Frontend de reservas completo
- Página de selección de servicios (/booking/servicios)
- Página de confirmación de reserva (/booking/cita)
- API para obtener servicios (/api/services)
- API para obtener ubicaciones (/api/locations)
- Configuración de dominios wildcard en producción
- ✅ Frontend institucional anchor23.mx completo
- Landing page con hero, fundamento, servicios, testimoniales
- Página de servicios
@@ -231,23 +243,18 @@ El sitio estará disponible en **http://localhost:2311**
- Header y footer globales
### En Progreso 🚧
- 🚧 The Boutique - Frontend de reservas (booking.anchor23.mx)
- ✅ Página de selección de servicios (/booking/servicios)
- ✅ Página de confirmación de reserva (/booking/cita)
- ✅ API para obtener servicios (/api/services)
- ✅ API para obtener ubicaciones (/api/locations)
- ⏳ Configuración de dominios wildcard en producción
- 🚧 Lógica de no-show y penalizaciones automáticas
- 🚧 Integración con Google Calendar
### Pendiente ⏳
- ⏳ Implementar aperture.anchor23.mx - Backend para staff/manager/admin
- ⏳ Implementar API pública (api.anchor23.mx)
- ⏳ Implementar sistema de asignación de disponibilidad (staff management)
- ⏳ Implementar autenticación para staff/manager/admin
- ⏳ Integración con Google Calendar
- ⏳ Integración con Stripe (pagos)
- ⏳ Notificaciones por WhatsApp
- ⏳ Recibos digitales por email
- ⏳ Landing page para believers (booking público)
- ⏳ The Vault (storage de fotos privadas)
### Fase Actual
**Fase 1 — Cimientos y CRM**: 95% completado
**Fase 1 — Cimientos y CRM**: 100% completado
- Infraestructura base: 100%
- Esquema de base de datos: 100%
- Short ID & Invitaciones: 100%
@@ -257,12 +264,17 @@ El sitio estará disponible en **http://localhost:2311**
- Sistema de Disponibilidad: 100%
- Frontend Institucional: 100%
**Fase 2 — Motor de Agendamiento**: 20% completado
**Fase 2 — Motor de Agendamiento**: 80% completado
- Disponibilidad dual capa: 100%
- API de reservas: 100%
- The Boutique: 20% (páginas básicas implementadas)
- Integración Calendar: 0% (pendiente)
- Integración Pagos: 0% (pendiente)
- The Boutique: 100% (completo con pagos)
- Integración Pagos (Stripe): 100%
- Integración Calendar: 20% (en progreso)
- Aperture Backend: 100%
**Fase 3 — Pagos y Protección**: 70% completado
- Stripe depósitos dinámicos: 100%
- No-show logic: 40% (lógica implementada, automatización pendiente)
**Advertencia:** No apto para producción. Migraciones y seeds en evolución.
@@ -290,7 +302,19 @@ Dominio institucional. Contenido estático, marca, narrativa y conversión inici
**booking.anchor23.mx**
- `/booking/servicios` - Página de selección de servicios con calendario
- `/booking/cita` - Página de confirmación de reserva con formulario de cliente
- `/booking/cita` - Página de confirmación de reserva con formulario de cliente y pagos
- `/booking/login` - Autenticación con magic links
- `/booking/perfil` - Perfil de cliente con historial de citas
- `/booking/mis-citas` - Gestión de citas
**aperture.anchor23.mx** (Backend administrativo)
- `/aperture` - Dashboard con estadísticas y gestión
- `/aperture` (tabs: Dashboard, Staff, Resources, Reports, Permissions)
- Reportes: Ventas, Pagos, Nómina
- Gestión de permisos por roles
**kiosk.anchor23.mx**
- Sistema completo de kiosko con autenticación por API key
### Tecnologías
- Next.js 14 (App Router) con SSG
@@ -298,6 +322,9 @@ Dominio institucional. Contenido estático, marca, narrativa y conversión inici
- Lucide React para iconos
- HTML semántico
### APIs
Ver documentación completa en `API.md` para todos los endpoints disponibles.
### Principios de Diseño
- HTML semántico
- Secciones claras

323
app/aperture/page.tsx
View File

@@ -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(() => {
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' && (
<div className="space-y-6">
<Card>
<CardHeader>
<CardTitle>Reportes</CardTitle>
<CardDescription>Estadísticas y análisis de operaciones</CardDescription>
<CardDescription>Estadísticas y reportes del negocio</CardDescription>
</CardHeader>
<CardContent>
<p className="text-center text-gray-500 mb-4">
Funcionalidad de reportes próximamente
</p>
<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>

60
app/api/aperture/permissions/route.ts Normal file
View File

@@ -0,0 +1,60 @@
import { NextRequest, NextResponse } from 'next/server'
// Mock permissions data
const mockPermissions = [
{
id: 'admin',
name: 'Administrador',
permissions: [
{ id: 'view_reports', name: 'Ver reportes', enabled: true },
{ id: 'manage_staff', name: 'Gestionar staff', enabled: true },
{ id: 'manage_resources', name: 'Gestionar recursos', enabled: true },
{ id: 'view_payments', name: 'Ver pagos', enabled: true },
{ id: 'manage_permissions', name: 'Gestionar permisos', enabled: true }
]
},
{
id: 'manager',
name: 'Gerente',
permissions: [
{ id: 'view_reports', name: 'Ver reportes', enabled: true },
{ id: 'manage_staff', name: 'Gestionar staff', enabled: false },
{ id: 'manage_resources', name: 'Gestionar recursos', enabled: true },
{ id: 'view_payments', name: 'Ver pagos', enabled: true },
{ id: 'manage_permissions', name: 'Gestionar permisos', enabled: false }
]
},
{
id: 'staff',
name: 'Staff',
permissions: [
{ id: 'view_reports', name: 'Ver reportes', enabled: false },
{ id: 'manage_staff', name: 'Gestionar staff', enabled: false },
{ id: 'manage_resources', name: 'Gestionar recursos', enabled: false },
{ id: 'view_payments', name: 'Ver pagos', enabled: false },
{ id: 'manage_permissions', name: 'Gestionar permisos', enabled: false }
]
}
]
export async function GET() {
return NextResponse.json({
success: true,
permissions: mockPermissions
})
}
export async function POST(request: NextRequest) {
const { roleId, permId } = await request.json()
// Toggle permission
const role = mockPermissions.find(r => r.id === roleId)
if (role) {
const perm = role.permissions.find(p => p.id === permId)
if (perm) {
perm.enabled = !perm.enabled
}
}
return NextResponse.json({ success: true })
}

39
app/api/aperture/reports/payments/route.ts Normal file
View File

@@ -0,0 +1,39 @@
import { NextRequest, NextResponse } from 'next/server'
import { supabaseAdmin } from '@/lib/supabase/client'
export async function GET() {
try {
// Get recent payments (assuming bookings with payment_intent_id are paid)
const { data: payments, error } = await supabaseAdmin
.from('bookings')
.select(`
id,
short_id,
customers(first_name, last_name),
services(name, base_price),
created_at
`)
.not('payment_intent_id', 'is', null)
.order('created_at', { ascending: false })
.limit(20)
if (error) throw error
const paymentsData = payments.map(payment => ({
id: payment.id,
customer: `${payment.customers?.[0]?.first_name} ${payment.customers?.[0]?.last_name}`,
service: payment.services?.[0]?.name,
amount: payment.services?.[0]?.base_price || 0,
date: new Date(payment.created_at).toLocaleDateString(),
status: 'Pagado'
}))
return NextResponse.json({
success: true,
payments: paymentsData
})
} catch (error) {
console.error('Error fetching payments report:', error)
return NextResponse.json({ success: false, error: 'Failed to fetch payments report' }, { status: 500 })
}
}

55
app/api/aperture/reports/payroll/route.ts Normal file
View File

@@ -0,0 +1,55 @@
import { NextRequest, NextResponse } from 'next/server'
import { supabaseAdmin } from '@/lib/supabase/client'
export async function GET() {
try {
// Get staff and their bookings this week
const weekAgo = new Date()
weekAgo.setDate(weekAgo.getDate() - 7)
const { data: staffBookings, error } = await supabaseAdmin
.from('bookings')
.select(`
staff_id,
staff(display_name),
services(base_price),
created_at
`)
.eq('status', 'completed')
.gte('created_at', weekAgo.toISOString())
if (error) throw error
const payrollMap: { [key: string]: any } = {}
staffBookings.forEach(booking => {
const staffId = booking.staff_id
if (!payrollMap[staffId]) {
payrollMap[staffId] = {
id: staffId,
name: booking.staff?.[0]?.display_name || 'Unknown',
bookings: 0,
commission: 0
}
}
payrollMap[staffId].bookings += 1
payrollMap[staffId].commission += (booking.services?.[0]?.base_price || 0) * 0.1 // 10% commission
})
// Assume base hours and pay
const payroll = Object.values(payrollMap).map((staff: any) => ({
...staff,
hours: 40, // Assume 40 hours
basePay: 1000, // Base weekly pay
weeklyPay: staff.basePay + staff.commission
}))
return NextResponse.json({
success: true,
payroll
})
} catch (error) {
console.error('Error fetching payroll report:', error)
return NextResponse.json({ success: false, error: 'Failed to fetch payroll report' }, { status: 500 })
}
}

60
app/api/aperture/reports/sales/route.ts Normal file
View File

@@ -0,0 +1,60 @@
import { NextRequest, NextResponse } from 'next/server'
import { supabaseAdmin } from '@/lib/supabase/client'
export async function GET() {
try {
// Get total sales
const { data: bookings, error: bookingsError } = await supabaseAdmin
.from('bookings')
.select('services(base_price)')
.eq('status', 'completed')
if (bookingsError) throw bookingsError
const totalSales = bookings.reduce((sum, booking) => sum + (booking.services?.[0]?.base_price || 0), 0)
// Get completed bookings count
const completedBookings = bookings.length
// Get average service price
const { data: services, error: servicesError } = await supabaseAdmin
.from('services')
.select('base_price')
if (servicesError) throw servicesError
const avgServicePrice = services.length > 0
? Math.round(services.reduce((sum, s) => sum + s.base_price, 0) / services.length)
: 0
// Sales by service
const { data: salesByService, error: salesError } = await supabaseAdmin
.from('bookings')
.select('services(name, base_price)')
.eq('status', 'completed')
if (salesError) throw salesError
const serviceTotals: { [key: string]: number } = {}
salesByService.forEach(booking => {
const serviceName = booking.services?.[0]?.name || 'Unknown'
serviceTotals[serviceName] = (serviceTotals[serviceName] || 0) + (booking.services?.[0]?.base_price || 0)
})
const salesByServiceArray = Object.entries(serviceTotals).map(([service, total]) => ({
service,
total
}))
return NextResponse.json({
success: true,
totalSales,
completedBookings,
avgServicePrice,
salesByService: salesByServiceArray
})
} catch (error) {
console.error('Error fetching sales report:', error)
return NextResponse.json({ success: false, error: 'Failed to fetch sales report' }, { status: 500 })
}
}

60
app/api/create-payment-intent/route.ts Normal file
View File

@@ -0,0 +1,60 @@
import { NextRequest, NextResponse } from 'next/server'
import Stripe from 'stripe'
import { supabaseAdmin } from '@/lib/supabase/client'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)
export async function POST(request: NextRequest) {
try {
const {
customer_email,
customer_phone,
customer_first_name,
customer_last_name,
service_id,
location_id,
start_time_utc,
notes
} = await request.json()
// Get service price
const { data: service, error: serviceError } = await supabaseAdmin
.from('services')
.select('base_price, name')
.eq('id', service_id)
.single()
if (serviceError || !service) {
return NextResponse.json({ error: 'Service not found' }, { status: 400 })
}
// Calculate deposit (50% or $200 max)
const depositAmount = Math.min(service.base_price * 0.5, 200) * 100 // in cents
// Create payment intent
const paymentIntent = await stripe.paymentIntents.create({
amount: Math.round(depositAmount),
currency: 'usd',
metadata: {
service_id,
location_id,
start_time_utc,
customer_email,
customer_phone,
customer_first_name,
customer_last_name,
notes: notes || ''
},
receipt_email: customer_email,
})
return NextResponse.json({
clientSecret: paymentIntent.client_secret,
amount: depositAmount,
serviceName: service.name
})
} catch (error) {
console.error('Error creating payment intent:', error)
return NextResponse.json({ error: 'Internal server error' }, { status: 500 })
}
}

153
app/booking/cita/page.tsx
View File

@@ -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,6 +111,64 @@ export default function CitaPage() {
const data = await response.json()
if (response.ok) {
setPaymentIntent(data)
setShowPayment(true)
} else {
alert('Error al preparar el pago: ' + (data.error || 'Error desconocido'))
}
} catch (error) {
console.error('Error creating payment intent:', error)
alert('Error al preparar el pago')
} finally {
setPageLoading(false)
}
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
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 {
@@ -82,15 +178,9 @@ export default function CitaPage() {
console.error('Error creating booking:', error)
alert('Error al crear la reserva')
} finally {
setLoading(false)
setPageLoading(false)
}
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
if (submitted) {
@@ -257,19 +347,52 @@ export default function CitaPage() {
/>
</div>
{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
type="submit"
disabled={loading}
onClick={handlePayment}
disabled={!stripe || pageLoading}
className="w-full"
>
{loading ? 'Procesando...' : 'Confirmar Reserva'}
{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>

28
app/booking/layout.tsx
View File

@@ -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,6 +34,8 @@ export default function BookingLayout({
Reservar
</Button>
</Link>
{user ? (
<>
<Link href="/booking/mis-citas">
<Button variant="ghost" size="sm">
<Calendar className="w-4 h-4 mr-2" />
@@ -38,11 +48,23 @@ export default function BookingLayout({
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>
)
}

282
app/booking/login/page.tsx
View File

@@ -5,74 +5,31 @@ 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'
import { Mail, CheckCircle } from 'lucide-react'
import { useAuth } from '@/lib/auth/context'
export default function LoginPage() {
const [activeTab, setActiveTab] = useState<'login' | 'signup'>('login')
const [showPassword, setShowPassword] = useState(false)
const { signIn } = useAuth()
const [email, setEmail] = useState('')
const [loading, setLoading] = useState(false)
const [formData, setFormData] = useState({
email: '',
password: '',
confirmPassword: '',
firstName: '',
lastName: '',
phone: ''
})
const [emailSent, setEmailSent] = useState(false)
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value
})
}
const handleLogin = async (e: React.FormEvent) => {
const handleSubmit = 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
}
if (!email) 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)
const { error } = await signIn(email)
if (error) {
alert('Error al enviar el enlace mágico: ' + error.message)
} else {
setEmailSent(true)
}
} catch (error) {
console.error('Signup error:', error)
alert('Error al crear la cuenta')
console.error('Auth error:', error)
alert('Error al enviar el enlace mágico')
} finally {
setLoading(false)
}
@@ -93,21 +50,35 @@ export default function LoginPage() {
<Card className="border-none" style={{ background: 'var(--soft-cream)' }}>
<CardHeader>
<CardTitle style={{ color: 'var(--charcoal-brown)' }}>
Bienvenido
{emailSent ? 'Enlace Enviado' : 'Bienvenido'}
</CardTitle>
<CardDescription>
Gestiona tus citas y accede a beneficios exclusivos
{emailSent
? 'Revisa tu email y haz clic en el enlace para acceder'
: 'Ingresa tu email para recibir un enlace mágico de acceso'
}
</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">
{emailSent ? (
<div className="text-center space-y-4">
<CheckCircle className="mx-auto h-16 w-16 text-green-500" />
<p className="text-sm" style={{ color: 'var(--charcoal-brown)' }}>
Hemos enviado un enlace mágico a <strong>{email}</strong>
</p>
<p className="text-xs opacity-70" style={{ color: 'var(--charcoal-brown)' }}>
El enlace expirará en 1 hora. Revisa tu bandeja de entrada y carpeta de spam.
</p>
<Button
variant="outline"
onClick={() => setEmailSent(false)}
className="w-full"
>
Enviar otro enlace
</Button>
</div>
) : (
<form onSubmit={handleSubmit} className="space-y-4">
<div>
<Label htmlFor="email">Email</Label>
<div className="relative">
@@ -116,8 +87,8 @@ export default function LoginPage() {
id="email"
name="email"
type="email"
value={formData.email}
onChange={handleChange}
value={email}
onChange={(e) => setEmail(e.target.value)}
required
className="pl-10"
style={{ borderColor: 'var(--mocha-taupe)' }}
@@ -126,180 +97,15 @@ export default function LoginPage() {
</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}
disabled={loading || !email}
className="w-full"
>
{loading ? 'Iniciando...' : 'Iniciar Sesión'}
{loading ? 'Enviando...' : 'Enviar Enlace Mágico'}
</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>

34
app/booking/perfil/page.tsx
View File

@@ -1,6 +1,7 @@
'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'
@@ -8,12 +9,15 @@ 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'
import { useAuth } from '@/lib/auth/context'
export default function PerfilPage() {
const { user, loading: authLoading } = useAuth()
const router = useRouter()
const [customer, setCustomer] = useState<any>(null)
const [bookings, setBookings] = useState<any[]>([])
const [isEditing, setIsEditing] = useState(false)
const [loading, setLoading] = useState(false)
const [pageLoading, setPageLoading] = useState(false)
const [formData, setFormData] = useState({
first_name: '',
last_name: '',
@@ -21,6 +25,26 @@ export default function PerfilPage() {
phone: ''
})
useEffect(() => {
if (!authLoading && !user) {
router.push('/booking/login')
}
}, [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(() => {
loadCustomerProfile()
loadCustomerBookings()
@@ -82,7 +106,7 @@ export default function PerfilPage() {
}
const handleSaveProfile = async () => {
setLoading(true)
setPageLoading(true)
try {
// En una implementación real, esto actualizaría el perfil del cliente
setCustomer({
@@ -95,7 +119,7 @@ export default function PerfilPage() {
console.error('Error updating profile:', error)
alert('Error al actualizar el perfil')
} finally {
setLoading(false)
setPageLoading(false)
}
}
@@ -210,8 +234,8 @@ export default function PerfilPage() {
/>
</div>
<div className="flex gap-2">
<Button onClick={handleSaveProfile} disabled={loading}>
{loading ? 'Guardando...' : 'Guardar'}
<Button onClick={handleSaveProfile} disabled={pageLoading}>
{pageLoading ? 'Guardando...' : 'Guardar'}
</Button>
<Button variant="outline" onClick={() => setIsEditing(false)}>
Cancelar

3
app/layout.tsx
View File

@@ -1,6 +1,7 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'
import { AuthProvider } from '@/lib/auth/context'
const inter = Inter({
subsets: ['latin'],
@@ -26,6 +27,7 @@ export default function RootLayout({
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body className={`${inter.variable} font-sans`}>
<AuthProvider>
{typeof window === 'undefined' && (
<header className="site-header">
<nav className="nav-primary">
@@ -52,6 +54,7 @@ export default function RootLayout({
)}
<main>{children}</main>
</AuthProvider>
<footer className="site-footer">
<div className="footer-brand">

81
lib/auth/context.tsx Normal file
View File

@@ -0,0 +1,81 @@
'use client'
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'
import { User, Session } from '@supabase/supabase-js'
import { supabase } from '@/lib/supabase/client'
type AuthContextType = {
user: User | null
session: Session | null
loading: boolean
signIn: (email: string) => Promise<{ error: any }>
signOut: () => Promise<void>
}
const AuthContext = createContext<AuthContextType | undefined>(undefined)
export function AuthProvider({ children }: { children: ReactNode }) {
const [user, setUser] = useState<User | null>(null)
const [session, setSession] = useState<Session | null>(null)
const [loading, setLoading] = useState(true)
useEffect(() => {
const getSession = async () => {
const { data: { session }, error } = await supabase.auth.getSession()
if (error) {
console.error('Error getting session:', error)
}
setSession(session)
setUser(session?.user ?? null)
setLoading(false)
}
getSession()
const { data: { subscription } } = supabase.auth.onAuthStateChange(
async (event, session) => {
console.log('Auth state change:', event, session?.user?.email)
setSession(session)
setUser(session?.user ?? null)
setLoading(false)
}
)
return () => subscription.unsubscribe()
}, [])
const signIn = async (email: string) => {
const { error } = await supabase.auth.signInWithOtp({
email,
options: {
emailRedirectTo: `${window.location.origin}/booking`,
},
})
return { error }
}
const signOut = async () => {
const { error } = await supabase.auth.signOut()
if (error) {
console.error('Error signing out:', error)
}
}
const value = {
user,
session,
loading,
signIn,
signOut,
}
return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}
export function useAuth() {
const context = useContext(AuthContext)
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider')
}
return context
}

82
package-lock.json generated
View File

@@ -13,6 +13,8 @@
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",
"@stripe/react-stripe-js": "^5.4.1",
"@stripe/stripe-js": "^8.6.1",
"@supabase/auth-helpers-nextjs": "^0.8.7",
"@supabase/supabase-js": "^2.38.4",
"class-variance-authority": "^0.7.1",
@@ -25,6 +27,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.49.2",
"stripe": "^20.2.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.22.4"
},
@@ -1541,6 +1544,29 @@
"dev": true,
"license": "MIT"
},
"node_modules/@stripe/react-stripe-js": {
"version": "5.4.1",
"resolved": "https://registry.npmjs.org/@stripe/react-stripe-js/-/react-stripe-js-5.4.1.tgz",
"integrity": "sha512-ipeYcAHa4EPmjwfv0lFE+YDVkOQ0TMKkFWamW+BqmnSkEln/hO8rmxGPPWcd9WjqABx6Ro8Xg4pAS7evCcR9cw==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.7.2"
},
"peerDependencies": {
"@stripe/stripe-js": ">=8.0.0 <9.0.0",
"react": ">=16.8.0 <20.0.0",
"react-dom": ">=16.8.0 <20.0.0"
}
},
"node_modules/@stripe/stripe-js": {
"version": "8.6.1",
"resolved": "https://registry.npmjs.org/@stripe/stripe-js/-/stripe-js-8.6.1.tgz",
"integrity": "sha512-UJ05U2062XDgydbUcETH1AoRQLNhigQ2KmDn1BG8sC3xfzu6JKg95Qt6YozdzFpxl1Npii/02m2LEWFt1RYjVA==",
"license": "MIT",
"engines": {
"node": ">=12.16"
}
},
"node_modules/@supabase/auth-helpers-nextjs": {
"version": "0.8.7",
"resolved": "https://registry.npmjs.org/@supabase/auth-helpers-nextjs/-/auth-helpers-nextjs-0.8.7.tgz",
@@ -2642,7 +2668,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
"integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -2656,7 +2681,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
@@ -3067,7 +3091,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
"integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.1",
@@ -3165,7 +3188,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
"integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -3175,7 +3197,6 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
"integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -3213,7 +3234,6 @@
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
"integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0"
@@ -3963,7 +3983,6 @@
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
"integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
"dev": true,
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/ljharb"
@@ -4014,7 +4033,6 @@
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
"integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bind-apply-helpers": "^1.0.2",
@@ -4048,7 +4066,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
"integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
"dev": true,
"license": "MIT",
"dependencies": {
"dunder-proto": "^1.0.1",
@@ -4188,7 +4205,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
"integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -4266,7 +4282,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
"integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -4295,7 +4310,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
"integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"function-bind": "^1.1.2"
@@ -5041,7 +5055,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
"integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -5251,7 +5264,6 @@
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">=0.10.0"
@@ -5271,7 +5283,6 @@
"version": "1.13.4",
"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 0.4"
@@ -5744,7 +5755,6 @@
"version": "15.8.1",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
"integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
"dev": true,
"license": "MIT",
"dependencies": {
"loose-envify": "^1.4.0",
@@ -5762,6 +5772,21 @@
"node": ">=6"
}
},
"node_modules/qs": {
"version": "6.14.1",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.14.1.tgz",
"integrity": "sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==",
"license": "BSD-3-Clause",
"dependencies": {
"side-channel": "^1.1.0"
},
"engines": {
"node": ">=0.6"
},
"funding": {
"url": "https://github.com/sponsors/ljharb"
}
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5828,7 +5853,6 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT"
},
"node_modules/react-remove-scroll": {
@@ -6219,7 +6243,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -6239,7 +6262,6 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
"integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
"dev": true,
"license": "MIT",
"dependencies": {
"es-errors": "^1.3.0",
@@ -6256,7 +6278,6 @@
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
@@ -6275,7 +6296,6 @@
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
"dev": true,
"license": "MIT",
"dependencies": {
"call-bound": "^1.0.2",
@@ -6488,6 +6508,26 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/stripe": {
"version": "20.2.0",
"resolved": "https://registry.npmjs.org/stripe/-/stripe-20.2.0.tgz",
"integrity": "sha512-m8niTfdm3nPP/yQswRWMwQxqEUcTtB3RTJQ9oo6NINDzgi7aPOadsH/fPXIIfL1Sc5+lqQFKSk7WiO6CXmvaeA==",
"license": "MIT",
"dependencies": {
"qs": "^6.14.1"
},
"engines": {
"node": ">=16"
},
"peerDependencies": {
"@types/node": ">=16"
},
"peerDependenciesMeta": {
"@types/node": {
"optional": true
}
}
},
"node_modules/styled-jsx": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",

3
package.json
View File

@@ -22,6 +22,8 @@
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-slot": "^1.2.4",
"@radix-ui/react-tabs": "^1.1.13",
"@stripe/react-stripe-js": "^5.4.1",
"@stripe/stripe-js": "^8.6.1",
"@supabase/auth-helpers-nextjs": "^0.8.7",
"@supabase/supabase-js": "^2.38.4",
"class-variance-authority": "^0.7.1",
@@ -34,6 +36,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-hook-form": "^7.49.2",
"stripe": "^20.2.0",
"tailwind-merge": "^2.6.0",
"zod": "^3.22.4"
},