388 lines
13 KiB
TypeScript
388 lines
13 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import {
|
|
Key,
|
|
QrCode,
|
|
Smartphone,
|
|
Clock,
|
|
Shield,
|
|
CheckCircle,
|
|
AlertCircle,
|
|
Copy,
|
|
Send,
|
|
Unlock,
|
|
Lock,
|
|
Calendar,
|
|
RefreshCw
|
|
} from 'lucide-react';
|
|
import { useToast } from '@/hooks/use-toast';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
|
|
interface AccessCode {
|
|
id: string;
|
|
roomNumber: string;
|
|
guestName: string;
|
|
code: string;
|
|
qrCode: string;
|
|
validFrom: string;
|
|
validUntil: string;
|
|
status: 'active' | 'expired' | 'revoked';
|
|
accessCount: number;
|
|
}
|
|
|
|
const KeylessEntry = () => {
|
|
const { toast } = useToast();
|
|
const [accessCodes, setAccessCodes] = useState<AccessCode[]>([
|
|
{
|
|
id: '1',
|
|
roomNumber: '305',
|
|
guestName: 'Juan Pérez',
|
|
code: '8A9B-C4D7',
|
|
qrCode: 'QR-305-8A9BC4D7',
|
|
validFrom: '2025-01-15 14:00',
|
|
validUntil: '2025-01-20 12:00',
|
|
status: 'active',
|
|
accessCount: 12
|
|
},
|
|
{
|
|
id: '2',
|
|
roomNumber: '412',
|
|
guestName: 'María González',
|
|
code: '5F2E-H8J3',
|
|
qrCode: 'QR-412-5F2EH8J3',
|
|
validFrom: '2025-01-14 15:00',
|
|
validUntil: '2025-01-19 11:00',
|
|
status: 'active',
|
|
accessCount: 8
|
|
}
|
|
]);
|
|
|
|
const [newCodeForm, setNewCodeForm] = useState({
|
|
roomNumber: '',
|
|
guestName: '',
|
|
validFrom: '',
|
|
validUntil: ''
|
|
});
|
|
|
|
const generateCode = () => {
|
|
const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
|
|
let code = '';
|
|
for (let i = 0; i < 8; i++) {
|
|
if (i === 4) code += '-';
|
|
code += chars.charAt(Math.floor(Math.random() * chars.length));
|
|
}
|
|
return code;
|
|
};
|
|
|
|
const handleGenerateAccessCode = () => {
|
|
if (!newCodeForm.roomNumber || !newCodeForm.guestName) {
|
|
toast({
|
|
title: "Error",
|
|
description: "Por favor completa todos los campos requeridos",
|
|
variant: "destructive"
|
|
});
|
|
return;
|
|
}
|
|
|
|
const newCode: AccessCode = {
|
|
id: String(accessCodes.length + 1),
|
|
roomNumber: newCodeForm.roomNumber,
|
|
guestName: newCodeForm.guestName,
|
|
code: generateCode(),
|
|
qrCode: `QR-${newCodeForm.roomNumber}-${Date.now()}`,
|
|
validFrom: newCodeForm.validFrom || new Date().toISOString(),
|
|
validUntil: newCodeForm.validUntil || new Date(Date.now() + 5 * 24 * 60 * 60 * 1000).toISOString(),
|
|
status: 'active',
|
|
accessCount: 0
|
|
};
|
|
|
|
setAccessCodes([...accessCodes, newCode]);
|
|
|
|
toast({
|
|
title: "Código Generado",
|
|
description: `Código de acceso creado para habitación ${newCodeForm.roomNumber}`,
|
|
});
|
|
|
|
// Reset form
|
|
setNewCodeForm({
|
|
roomNumber: '',
|
|
guestName: '',
|
|
validFrom: '',
|
|
validUntil: ''
|
|
});
|
|
};
|
|
|
|
const copyCode = (code: string) => {
|
|
navigator.clipboard.writeText(code);
|
|
toast({
|
|
title: "Código Copiado",
|
|
description: "El código ha sido copiado al portapapeles",
|
|
});
|
|
};
|
|
|
|
const sendCode = (code: AccessCode) => {
|
|
toast({
|
|
title: "Código Enviado",
|
|
description: `Código enviado a ${code.guestName} por email y SMS`,
|
|
});
|
|
};
|
|
|
|
const revokeCode = (codeId: string) => {
|
|
setAccessCodes(accessCodes.map(code =>
|
|
code.id === codeId ? { ...code, status: 'revoked' as const } : code
|
|
));
|
|
toast({
|
|
title: "Código Revocado",
|
|
description: "El código de acceso ha sido desactivado",
|
|
variant: "destructive"
|
|
});
|
|
};
|
|
|
|
const statusConfig = {
|
|
active: { label: 'Activo', color: 'bg-green-100 text-green-800', icon: CheckCircle },
|
|
expired: { label: 'Expirado', color: 'bg-gray-100 text-gray-800', icon: Clock },
|
|
revoked: { label: 'Revocado', color: 'bg-red-100 text-red-800', icon: AlertCircle }
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* Stats */}
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Códigos Activos</p>
|
|
<p className="text-2xl font-bold">{accessCodes.filter(c => c.status === 'active').length}</p>
|
|
</div>
|
|
<Key className="w-8 h-8 text-green-500" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Total Accesos Hoy</p>
|
|
<p className="text-2xl font-bold">47</p>
|
|
</div>
|
|
<Unlock className="w-8 h-8 text-blue-500" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Códigos QR</p>
|
|
<p className="text-2xl font-bold">{accessCodes.length}</p>
|
|
</div>
|
|
<QrCode className="w-8 h-8 text-purple-500" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardContent className="p-4">
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<p className="text-sm text-gray-600">Seguridad</p>
|
|
<p className="text-2xl font-bold">99.9%</p>
|
|
</div>
|
|
<Shield className="w-8 h-8 text-orange-500" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Generate New Code */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Key className="w-5 h-5" />
|
|
Generar Nuevo Código de Acceso
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div>
|
|
<Label htmlFor="roomNumber">Número de Habitación *</Label>
|
|
<Input
|
|
id="roomNumber"
|
|
placeholder="305"
|
|
value={newCodeForm.roomNumber}
|
|
onChange={(e) => setNewCodeForm({ ...newCodeForm, roomNumber: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="guestName">Nombre del Huésped *</Label>
|
|
<Input
|
|
id="guestName"
|
|
placeholder="Juan Pérez"
|
|
value={newCodeForm.guestName}
|
|
onChange={(e) => setNewCodeForm({ ...newCodeForm, guestName: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="validFrom">Válido Desde</Label>
|
|
<Input
|
|
id="validFrom"
|
|
type="datetime-local"
|
|
value={newCodeForm.validFrom}
|
|
onChange={(e) => setNewCodeForm({ ...newCodeForm, validFrom: e.target.value })}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Label htmlFor="validUntil">Válido Hasta</Label>
|
|
<Input
|
|
id="validUntil"
|
|
type="datetime-local"
|
|
value={newCodeForm.validUntil}
|
|
onChange={(e) => setNewCodeForm({ ...newCodeForm, validUntil: e.target.value })}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<Button onClick={handleGenerateAccessCode} className="mt-4 w-full md:w-auto">
|
|
<Key className="w-4 h-4 mr-2" />
|
|
Generar Código de Acceso
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Active Codes */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Códigos de Acceso Generados</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="space-y-4">
|
|
{accessCodes.map((code) => {
|
|
const StatusIcon = statusConfig[code.status].icon;
|
|
return (
|
|
<div key={code.id} className="border rounded-lg p-4 hover:shadow-md transition-shadow">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center font-bold text-blue-600">
|
|
{code.roomNumber}
|
|
</div>
|
|
<div>
|
|
<h3 className="font-semibold text-lg">{code.guestName}</h3>
|
|
<p className="text-sm text-gray-600">ID: {code.id}</p>
|
|
</div>
|
|
<Badge className={statusConfig[code.status].color}>
|
|
<StatusIcon className="w-3 h-3 mr-1" />
|
|
{statusConfig[code.status].label}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">
|
|
<div className="flex items-center gap-2 p-3 bg-gray-50 rounded">
|
|
<Key className="w-5 h-5 text-blue-600" />
|
|
<div>
|
|
<p className="text-xs text-gray-600">Código PIN</p>
|
|
<p className="font-mono font-bold">{code.code}</p>
|
|
</div>
|
|
<Button
|
|
size="sm"
|
|
variant="ghost"
|
|
onClick={() => copyCode(code.code)}
|
|
className="ml-auto"
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-3 bg-gray-50 rounded">
|
|
<QrCode className="w-5 h-5 text-purple-600" />
|
|
<div>
|
|
<p className="text-xs text-gray-600">Código QR</p>
|
|
<p className="font-mono text-sm">{code.qrCode}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-4 text-sm text-gray-600">
|
|
<div className="flex items-center gap-1">
|
|
<Calendar className="w-4 h-4" />
|
|
{code.validFrom}
|
|
</div>
|
|
<span>→</span>
|
|
<div className="flex items-center gap-1">
|
|
<Calendar className="w-4 h-4" />
|
|
{code.validUntil}
|
|
</div>
|
|
<div className="flex items-center gap-1 ml-auto">
|
|
<Unlock className="w-4 h-4" />
|
|
{code.accessCount} accesos
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
{code.status === 'active' && (
|
|
<>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => sendCode(code)}
|
|
className="w-full md:w-auto"
|
|
>
|
|
<Send className="w-4 h-4 mr-2" />
|
|
Enviar
|
|
</Button>
|
|
<Button
|
|
variant="destructive"
|
|
onClick={() => revokeCode(code.id)}
|
|
className="w-full md:w-auto"
|
|
>
|
|
<Lock className="w-4 h-4 mr-2" />
|
|
Revocar
|
|
</Button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Security Info */}
|
|
<Card className="bg-blue-50 border-blue-200">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 text-blue-900">
|
|
<Shield className="w-5 h-5" />
|
|
Seguridad del Sistema
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="text-blue-900">
|
|
<ul className="space-y-2 text-sm">
|
|
<li className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
Códigos encriptados de 256-bit
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
Expiración automática de códigos
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
Registro de todos los accesos
|
|
</li>
|
|
<li className="flex items-center gap-2">
|
|
<CheckCircle className="w-4 h-4 text-green-600" />
|
|
Notificaciones en tiempo real
|
|
</li>
|
|
</ul>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KeylessEntry;
|