mirror of
https://github.com/marcogll/AnchorOS.git
synced 2026-03-15 13:24:27 +00:00
feat: Implementar sistema de kiosko, enrollment e integración Telegram
## Sistema de Kiosko ✅ - Nuevo rol 'kiosk' en enum user_role - Tabla kiosks con autenticación por API key (64 caracteres) - Funciones SQL: generate_kiosk_api_key(), is_kiosk(), get_available_resources_with_priority() - API Routes: authenticate, bookings (GET/POST), confirm, resources/available, walkin - Componentes UI: BookingConfirmation, WalkInFlow, ResourceAssignment - Página kiosko: /kiosk/[locationId]/page.tsx ## Sistema de Enrollment ✅ - API routes para administración: /api/admin/users, /api/admin/kiosks, /api/admin/locations - Frontend enrollment: /admin/enrollment con autenticación por ADMIN_KEY - Creación de staff (admin, manager, staff, artist) con Supabase Auth - Creación de kiosks con generación automática de API key - Componentes UI: card, button, input, label, select, tabs ## Actualización de Recursos ✅ - Reemplazo de recursos con códigos estándarizados - Estructura por location: 3 mkup, 1 lshs, 4 pedi, 4 mani - Migración de limpieza: elimina duplicados - Total: 12 recursos por location ## Integración Telegram y Scoring ✅ - Campos agregados a staff: telegram_id, email, gmail, google_account, telegram_chat_id - Sistema de scoring: performance_score, total_bookings_completed, total_guarantees_count - Tablas: telegram_notifications, telegram_groups, telegram_bots - Funciones: update_staff_performance_score(), get_top_performers(), get_performance_summary() - Triggers automáticos: notificaciones al crear/confirmar/completar booking - Cálculo de score: base 50 +10 por booking +5 por garantía +1 por $100 ## Actualización de Tipos ✅ - UserRole: agregado 'kiosk' - CustomerTier: agregado 'black', 'VIP' - Nuevas interfaces: Kiosk ## Documentación ✅ - KIOSK_SYSTEM.md: Documentación completa del sistema - KIOSK_IMPLEMENTATION.md: Guía rápida - ENROLLMENT_SYSTEM.md: Sistema de enrollment - RESOURCES_UPDATE.md: Actualización de recursos - PROJECT_UPDATE_JAN_2026.md: Resumen de proyecto ## Componentes UI (7) - button.tsx, card.tsx, input.tsx, label.tsx, select.tsx, tabs.tsx ## Migraciones SQL (4) - 20260116000000_add_kiosk_system.sql - 20260116010000_update_resources.sql - 20260116020000_cleanup_and_fix_resources.sql - 20260116030000_telegram_integration.sql ## Métricas - ~7,500 líneas de código - 32 archivos creados/modificados - 7 componentes UI - 10 API routes - 4 migraciones SQL
This commit is contained in:
Marco Gallegos
242
app/kiosk/[locationId]/page.tsx
Normal file
242
app/kiosk/[locationId]/page.tsx
Normal file
@@ -0,0 +1,242 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
||||
import { BookingConfirmation } from '@/components/kiosk/BookingConfirmation'
|
||||
import { WalkInFlow } from '@/components/kiosk/WalkInFlow'
|
||||
import { Calendar, UserPlus, MapPin, Clock } from 'lucide-react'
|
||||
|
||||
export default function KioskPage({ params }: { params: { locationId: string } }) {
|
||||
const [apiKey, setApiKey] = useState<string | null>(null)
|
||||
const [location, setLocation] = useState<any>(null)
|
||||
const [currentView, setCurrentView] = useState<'home' | 'confirm' | 'walkin'>('home')
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [currentTime, setCurrentTime] = useState<Date>(new Date())
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date())
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const authenticateKiosk = async () => {
|
||||
setLoading(true)
|
||||
setError(null)
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/kiosk/authenticate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
api_key: process.env.NEXT_PUBLIC_KIOSK_API_KEY || 'demo-api-key-64-characters-long-enough'
|
||||
})
|
||||
})
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error || 'Authentication failed')
|
||||
}
|
||||
|
||||
setApiKey(data.kiosk.device_name)
|
||||
setLocation(data.kiosk.location)
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Error de autenticación del kiosko')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
authenticateKiosk()
|
||||
}, [])
|
||||
|
||||
const formatDateTime = (date: Date) => {
|
||||
return new Intl.DateTimeFormat('es-MX', {
|
||||
dateStyle: 'full',
|
||||
timeStyle: 'short',
|
||||
timeZone: location?.timezone || 'America/Monterrey'
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardContent className="pt-6">
|
||||
<div className="text-center py-8">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600 mx-auto mb-4"></div>
|
||||
<p className="text-muted-foreground">Iniciando kiosko...</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-red-50 to-orange-50">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-red-600">Error de Conexión</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="p-4 bg-red-50 border border-red-200 rounded-md mb-4">
|
||||
{error}
|
||||
</div>
|
||||
<Button onClick={() => window.location.reload()} className="w-full">
|
||||
Reintentar
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (currentView === 'confirm') {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50 p-4">
|
||||
<BookingConfirmation
|
||||
apiKey={apiKey || ''}
|
||||
onConfirm={(booking) => {
|
||||
setCurrentView('home')
|
||||
}}
|
||||
onCancel={() => setCurrentView('home')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
if (currentView === 'walkin') {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50 p-4">
|
||||
<WalkInFlow
|
||||
apiKey={apiKey || ''}
|
||||
onComplete={(booking) => {
|
||||
setCurrentView('home')
|
||||
}}
|
||||
onCancel={() => setCurrentView('home')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-purple-50 to-pink-50 p-4">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<header className="mb-8">
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-2">
|
||||
{location?.name || 'Kiosko'}
|
||||
</h1>
|
||||
<div className="flex items-center gap-4 text-muted-foreground">
|
||||
<div className="flex items-center gap-2">
|
||||
<MapPin className="w-5 h-5" />
|
||||
<span>Kiosko Principal</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
<span>{formatDateTime(currentTime)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">ID del Kiosko</p>
|
||||
<p className="font-mono text-lg">{apiKey || 'N/A'}</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 mb-8">
|
||||
<Card
|
||||
className="cursor-pointer hover:shadow-lg transition-shadow border-2 hover:border-purple-400"
|
||||
onClick={() => setCurrentView('confirm')}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Calendar className="w-8 h-8 text-purple-600" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Confirmar Cita</CardTitle>
|
||||
<CardDescription>
|
||||
Confirma tu llegada ingresando el código de tu cita
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button className="w-full" size="lg">
|
||||
Confirmar Cita
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
className="cursor-pointer hover:shadow-lg transition-shadow border-2 hover:border-pink-400"
|
||||
onClick={() => setCurrentView('walkin')}
|
||||
>
|
||||
<CardHeader>
|
||||
<div className="w-16 h-16 bg-pink-100 rounded-full flex items-center justify-center mb-4">
|
||||
<UserPlus className="w-8 h-8 text-pink-600" />
|
||||
</div>
|
||||
<CardTitle className="text-2xl">Reserva Inmediata</CardTitle>
|
||||
<CardDescription>
|
||||
Crea una reserva sin cita previa (Walk-in)
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button className="w-full" size="lg" variant="outline">
|
||||
Crear Reserva
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Instrucciones</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<Calendar className="w-5 h-5 text-purple-600" />
|
||||
Confirmar Cita
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
||||
<li>Selecciona "Confirmar Cita"</li>
|
||||
<li>Ingresa el código de 6 caracteres de tu reserva</li>
|
||||
<li>Verifica los detalles de tu cita</li>
|
||||
<li>Confirma tu llegada</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-semibold mb-2 flex items-center gap-2">
|
||||
<UserPlus className="w-5 h-5 text-pink-600" />
|
||||
Reserva Inmediata
|
||||
</h3>
|
||||
<ol className="list-decimal list-inside space-y-2 text-sm text-muted-foreground">
|
||||
<li>Selecciona "Reserva Inmediata"</li>
|
||||
<li>Elige el servicio que deseas</li>
|
||||
<li>Ingresa tus datos personales</li>
|
||||
<li>Confirma la reserva</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<footer className="mt-8 text-center text-sm text-muted-foreground">
|
||||
<p>SalonOS Kiosk v1.0</p>
|
||||
<p className="mt-1">Necesitas ayuda? Contacta al personal del salón</p>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user