mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 13:24:27 +00:00
feat: Implementar base de Aperture (aperture.anchor23.mx)
**Aperture - Backend para staff/manager/admin:**
- Crear página principal de admin (/aperture)
- Dashboard con estadísticas del día (citas, ingresos, pendientes)
- Navegación por tabs (Dashboard, Staff, Recursos, Reportes)
- Diseño limpio con métricas y cards
- Crear APIs administrativas:
- /api/aperture/staff - Staff disponible por ubicación
- /api/aperture/staff/schedule - CRUD de horarios de staff
- GET: Listar horarios con filtros
- POST: Crear bloqueo de horario
- DELETE: Eliminar horario
- /api/aperture/resources - Recursos por ubicación
- /api/aperture/dashboard - Bookings por fecha y staff
**The Boutique - Mejoras:**
- Página de confirmación por código (/booking/confirmacion)
- Verificación por short_id
- Detalles completos de cita
- Información sobre políticas
- Layout personalizado con navbar específico
**TASKS.md - Actualización:**
- Aperture marcado como 'En Progreso' con APIs implementadas
- The Boutique actualizado con página de confirmación
- Reorganización de tareas prioritarias
- Estado del proyecto actualizado (Fase 2: 30%)
**Arquitectura:**
- Separación clara: anchor23.mx (marketing), booking (cliente), aperture (operaciones)
- APIs RESTful para gestión administrativa
- Dashboard responsive con métricas operativas
This commit is contained in:
Marco Gallegos
240
app/aperture/page.tsx
Normal file
240
app/aperture/page.tsx
Normal file
@@ -0,0 +1,240 @@
|
||||
'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, Users, Clock, DollarSign, TrendingUp, LogOut } from 'lucide-react'
|
||||
import { format } from 'date-fns'
|
||||
import { es } from 'date-fns/locale'
|
||||
|
||||
export default function ApertureDashboard() {
|
||||
const [activeTab, setActiveTab] = useState<'dashboard' | 'staff' | 'resources' | 'reports'>('dashboard')
|
||||
const [bookings, setBookings] = useState<any[]>([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [stats, setStats] = useState({
|
||||
totalBookings: 0,
|
||||
totalRevenue: 0,
|
||||
completedToday: 0,
|
||||
upcomingToday: 0
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
fetchBookings()
|
||||
fetchStats()
|
||||
}, [])
|
||||
|
||||
const fetchBookings = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const today = format(new Date(), 'yyyy-MM-dd')
|
||||
const response = await fetch(`/api/aperture/dashboard?start_date=${today}&end_date=${today}`)
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setBookings(data.bookings)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching bookings:', error)
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchStats = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/aperture/stats')
|
||||
const data = await response.json()
|
||||
if (data.success) {
|
||||
setStats(data.stats)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching stats:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem('admin_enrollment_key')
|
||||
window.location.href = '/'
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 pt-24">
|
||||
<header className="px-8 pb-8 mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Aperture - Admin</h1>
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="w-4 h-4" />
|
||||
Cerrar Sesión
|
||||
</Button>
|
||||
</header>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-8">
|
||||
<div className="mb-8 grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Citas Hoy</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-3xl font-bold text-gray-900">{stats.completedToday}</p>
|
||||
<p className="text-sm text-gray-600">Completadas</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Ingresos Hoy</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-3xl font-bold text-gray-900">${stats.totalRevenue.toLocaleString()}</p>
|
||||
<p className="text-sm text-gray-600">Ingresos</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Pendientes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-3xl font-bold text-gray-900">{stats.upcomingToday}</p>
|
||||
<p className="text-sm text-gray-600">Por iniciar</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="pb-3">
|
||||
<CardTitle className="text-sm font-semibold">Total Mes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-3xl font-bold text-gray-900">{stats.totalBookings}</p>
|
||||
<p className="text-sm text-gray-600">Este mes</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="mb-6">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
variant={activeTab === 'dashboard' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('dashboard')}
|
||||
>
|
||||
<TrendingUp className="w-4 h-4 mr-2" />
|
||||
Dashboard
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'staff' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('staff')}
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Staff
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'resources' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('resources')}
|
||||
>
|
||||
<Users className="w-4 h-4 mr-2" />
|
||||
Recursos
|
||||
</Button>
|
||||
<Button
|
||||
variant={activeTab === 'reports' ? 'default' : 'outline'}
|
||||
onClick={() => setActiveTab('reports')}
|
||||
>
|
||||
<LogOut className="w-4 h-4 mr-2" />
|
||||
Reportes
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{activeTab === 'dashboard' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dashboard</CardTitle>
|
||||
<CardDescription>Resumen de operaciones del día</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{loading ? (
|
||||
<div className="text-center py-8">
|
||||
Cargando...
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{bookings.length === 0 ? (
|
||||
<p className="text-center text-gray-500">No hay citas para hoy</p>
|
||||
) : (
|
||||
bookings.map((booking) => (
|
||||
<div key={booking.id} className="flex items-center justify-between p-4 border rounded-lg">
|
||||
<div className="flex items-center gap-4">
|
||||
<div>
|
||||
<p className="font-semibold">{booking.customer?.first_name} {booking.customer?.last_name}</p>
|
||||
<p className="text-sm text-gray-500">{booking.service?.name}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
{format(new Date(booking.start_time_utc), 'HH:mm', { locale: es })} - {format(new Date(booking.end_time_utc), 'HH:mm', { locale: es })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<span className={`px-2 py-1 rounded text-xs ${
|
||||
booking.status === 'confirmed' ? 'bg-green-100 text-green-800' :
|
||||
booking.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
|
||||
'bg-gray-100 text-gray-800'
|
||||
}`}>
|
||||
{booking.status}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'staff' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gestión de Staff</CardTitle>
|
||||
<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>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{activeTab === 'resources' && (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gestión de Recursos</CardTitle>
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
88
app/api/aperture/dashboard/route.ts
Normal file
88
app/api/aperture/dashboard/route.ts
Normal file
@@ -0,0 +1,88 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/client'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const locationId = searchParams.get('location_id')
|
||||
const startDate = searchParams.get('start_date')
|
||||
const endDate = searchParams.get('end_date')
|
||||
const staffId = searchParams.get('staff_id')
|
||||
const status = searchParams.get('status')
|
||||
|
||||
let query = supabaseAdmin
|
||||
.from('bookings')
|
||||
.select(`
|
||||
id,
|
||||
short_id,
|
||||
status,
|
||||
start_time_utc,
|
||||
end_time_utc,
|
||||
is_paid,
|
||||
created_at,
|
||||
customer (
|
||||
id,
|
||||
first_name,
|
||||
last_name,
|
||||
email
|
||||
),
|
||||
service (
|
||||
id,
|
||||
name,
|
||||
duration_minutes,
|
||||
base_price
|
||||
),
|
||||
staff (
|
||||
id,
|
||||
display_name
|
||||
),
|
||||
resource (
|
||||
id,
|
||||
name,
|
||||
type
|
||||
)
|
||||
`)
|
||||
.order('start_time_utc', { ascending: true })
|
||||
|
||||
if (locationId) {
|
||||
query = query.eq('location_id', locationId)
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
query = query.gte('start_time_utc', startDate)
|
||||
}
|
||||
|
||||
if (endDate) {
|
||||
query = query.lte('end_time_utc', endDate)
|
||||
}
|
||||
|
||||
if (staffId) {
|
||||
query = query.eq('staff_id', staffId)
|
||||
}
|
||||
|
||||
if (status) {
|
||||
query = query.in('status', status.split(','))
|
||||
}
|
||||
|
||||
const { data: bookings, error } = await query
|
||||
|
||||
if (error) {
|
||||
console.error('Aperture dashboard GET error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: error.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
bookings: bookings || []
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Aperture dashboard GET error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
40
app/api/aperture/resources/route.ts
Normal file
40
app/api/aperture/resources/route.ts
Normal file
@@ -0,0 +1,40 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/client'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const locationId = searchParams.get('location_id')
|
||||
|
||||
let query = supabaseAdmin
|
||||
.from('resources')
|
||||
.select('*')
|
||||
.eq('is_active', true)
|
||||
.order('type', { ascending: true })
|
||||
.order('name', { ascending: true })
|
||||
|
||||
if (locationId) {
|
||||
query = query.eq('location_id', locationId)
|
||||
}
|
||||
|
||||
const { data: resources, error } = await query
|
||||
|
||||
if (error) {
|
||||
return NextResponse.json(
|
||||
{ error: error.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
resources: resources || []
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Resources GET error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
41
app/api/aperture/staff/route.ts
Normal file
41
app/api/aperture/staff/route.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/client'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const locationId = searchParams.get('location_id')
|
||||
const date = searchParams.get('date')
|
||||
|
||||
if (!locationId || !date) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Missing required parameters: location_id, date' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
const { data: staff, error: staffError } = await supabaseAdmin.rpc('get_available_staff', {
|
||||
p_location_id: locationId,
|
||||
p_start_time_utc: `${date}T00:00:00Z`,
|
||||
p_end_time_utc: `${date}T23:59:59Z`
|
||||
})
|
||||
|
||||
if (staffError) {
|
||||
return NextResponse.json(
|
||||
{ error: staffError.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
staff: staff || []
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Aperture staff GET error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
181
app/api/aperture/staff/schedule/route.ts
Normal file
181
app/api/aperture/staff/schedule/route.ts
Normal file
@@ -0,0 +1,181 @@
|
||||
import { NextRequest, NextResponse } from 'next/server'
|
||||
import { supabaseAdmin } from '@/lib/supabase/client'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const locationId = searchParams.get('location_id')
|
||||
const staffId = searchParams.get('staff_id')
|
||||
const startDate = searchParams.get('start_date')
|
||||
const endDate = searchParams.get('end_date')
|
||||
|
||||
let query = supabaseAdmin
|
||||
.from('staff_availability')
|
||||
.select('*')
|
||||
.order('date', { ascending: true })
|
||||
|
||||
if (locationId) {
|
||||
const locationStaff = await supabaseAdmin
|
||||
.from('staff')
|
||||
.select('id, display_name')
|
||||
.eq('location_id', locationId)
|
||||
.eq('is_active', true)
|
||||
|
||||
query = query.in('staff_id', locationStaff.map(s => s.id))
|
||||
}
|
||||
|
||||
if (staffId) {
|
||||
query = query.eq('staff_id', staffId)
|
||||
}
|
||||
|
||||
if (startDate) {
|
||||
query = query.gte('date', startDate)
|
||||
}
|
||||
|
||||
if (endDate) {
|
||||
query = query.lte('date', endDate)
|
||||
}
|
||||
|
||||
const { data: availability, error } = await query
|
||||
|
||||
if (error) {
|
||||
return NextResponse.json(
|
||||
{ error: error.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
availability: availability || []
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Aperture staff schedule GET error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json()
|
||||
const {
|
||||
staff_id,
|
||||
date,
|
||||
start_time,
|
||||
end_time,
|
||||
is_available,
|
||||
reason
|
||||
} = body
|
||||
|
||||
if (!staff_id || !date || !start_time || !end_time) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Missing required fields: staff_id, date, start_time, end_time' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
const { data: existing, error: checkError } = await supabaseAdmin
|
||||
.from('staff_availability')
|
||||
.select('*')
|
||||
.eq('staff_id', staff_id)
|
||||
.eq('date', date)
|
||||
.single()
|
||||
|
||||
if (existing && !is_available) {
|
||||
await supabaseAdmin
|
||||
.from('staff_availability')
|
||||
.update({
|
||||
start_time,
|
||||
end_time,
|
||||
is_available,
|
||||
reason
|
||||
})
|
||||
.eq('staff_id', staff_id)
|
||||
.eq('date', date)
|
||||
.single()
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
availability: existing
|
||||
})
|
||||
}
|
||||
|
||||
if (checkError) {
|
||||
return NextResponse.json(
|
||||
{ error: checkError.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
const { data: availability, error } = await supabaseAdmin
|
||||
.from('staff_availability')
|
||||
.insert({
|
||||
staff_id,
|
||||
date,
|
||||
start_time,
|
||||
end_time,
|
||||
is_available,
|
||||
reason
|
||||
})
|
||||
.select()
|
||||
.single()
|
||||
|
||||
if (error || !availability) {
|
||||
return NextResponse.json(
|
||||
{ error: error?.message || 'Failed to create staff availability' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
availability
|
||||
}, { status: 201 })
|
||||
} catch (error) {
|
||||
console.error('Aperture staff schedule POST error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url)
|
||||
const id = searchParams.get('id')
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json(
|
||||
{ error: 'Missing required parameter: id' },
|
||||
{ status: 400 }
|
||||
)
|
||||
}
|
||||
|
||||
const { error } = await supabaseAdmin
|
||||
.from('staff_availability')
|
||||
.delete()
|
||||
.eq('id', id)
|
||||
|
||||
if (error) {
|
||||
return NextResponse.json(
|
||||
{ error: error.message },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: 'Staff availability deleted successfully'
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Aperture staff schedule DELETE error:', error)
|
||||
return NextResponse.json(
|
||||
{ error: 'Internal server error' },
|
||||
{ status: 500 }
|
||||
)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user