mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 18:24:31 +00:00
fb60178c86
- Add public API endpoints for locations, services, and availability - Implement staff login system with password authentication - Update auth context to support password sign-in - Protect aperture dashboard with authentication - Update project documentation with new domains
539 lines
20 KiB
TypeScript
539 lines
20 KiB
TypeScript
'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'
|
|
|
|
/** @description Admin dashboard component for managing salon operations including bookings, staff, resources, reports, and permissions. */
|
|
export default function ApertureDashboard() {
|
|
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 [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,
|
|
completedToday: 0,
|
|
upcomingToday: 0
|
|
})
|
|
|
|
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>
|
|
)
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!user) {
|
|
router.push('/aperture/login')
|
|
}
|
|
}, [user, router])
|
|
|
|
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 () => {
|
|
setPageLoading(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 {
|
|
setPageLoading(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 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 = '/'
|
|
}
|
|
|
|
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')}
|
|
>
|
|
<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>
|
|
|
|
{activeTab === 'dashboard' && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Dashboard</CardTitle>
|
|
<CardDescription>Resumen de operaciones del día</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{pageLoading ? (
|
|
<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>
|
|
{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>
|
|
)}
|
|
|
|
{activeTab === 'resources' && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Gestión de Recursos</CardTitle>
|
|
<CardDescription>Administra estaciones y asignación</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{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 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>
|
|
)
|
|
}
|