Implement Hotel Management module

src/components/hotel/KeylessEntry.tsx

@@ -0,0 +1,387 @@
+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;