Implement Hotel Management module

src/App.tsx

@@ -32,6 +32,7 @@ import Profile from "./pages/dashboard/Profile";
 import Settings from "./pages/dashboard/Settings";
 import Invoices from "./pages/dashboard/Invoices";
 import InvoiceDetail from "./pages/dashboard/InvoiceDetail";
+import HotelManagement from "./pages/dashboard/HotelManagement";
 import NotFound from "./pages/NotFound";
 
 const queryClient = new QueryClient();
@@ -239,6 +240,14 @@ const AppRouter = () => (
         </ProtectedRoute>
       } />
       
+      <Route path="/dashboard/hotel-management" element={
+        <ProtectedRoute>
+          <DashboardLayout>
+            <HotelManagement />
+          </DashboardLayout>
+        </ProtectedRoute>
+      } />
+      
       {/* Catch-all route */}
       <Route path="*" element={<NotFound />} />
     </Routes>

src/components/DashboardLayout.tsx

@@ -36,7 +36,8 @@ import {
   Eye,
   Megaphone,
   ChevronDown,
-  ChevronRight
+  ChevronRight,
+  Hotel
 } from 'lucide-react';
 
 const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
@@ -59,6 +60,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
     { icon: Home, label: 'Dashboard', path: '/dashboard' },
     { icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' },
     { icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager' },
+    { icon: Hotel, label: 'Hotel Management', path: '/dashboard/hotel-management' },
     { icon: Wallet, label: 'Wallet', path: '/dashboard/wallet' },
     { icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
   ];

src/components/hotel/CheckInSystem.tsx

@@ -0,0 +1,319 @@
+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 { 
+  QrCode, 
+  Scan, 
+  UserCheck, 
+  Calendar,
+  Clock,
+  MapPin,
+  CreditCard,
+  CheckCircle,
+  Download,
+  Mail
+} from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+
+interface CheckInData {
+  reservationId: string;
+  guestName: string;
+  roomNumber: string;
+  checkIn: string;
+  checkOut: string;
+  adults: number;
+  children: number;
+}
+
+const CheckInSystem = () => {
+  const { toast } = useToast();
+  const [scanMode, setScanMode] = useState(false);
+  const [reservationCode, setReservationCode] = useState('');
+  const [checkInData, setCheckInData] = useState<CheckInData | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+
+  const handleSearchReservation = () => {
+    setIsProcessing(true);
+    
+    // Simular búsqueda
+    setTimeout(() => {
+      setCheckInData({
+        reservationId: reservationCode || 'RES-2025-001',
+        guestName: 'Juan Pérez García',
+        roomNumber: '305',
+        checkIn: '2025-01-15',
+        checkOut: '2025-01-20',
+        adults: 2,
+        children: 1
+      });
+      setIsProcessing(false);
+      toast({
+        title: "Reserva Encontrada",
+        description: "La información de la reserva ha sido cargada.",
+      });
+    }, 1500);
+  };
+
+  const handleCheckIn = () => {
+    if (!checkInData) return;
+    
+    setIsProcessing(true);
+    
+    setTimeout(() => {
+      toast({
+        title: "Check-in Exitoso",
+        description: `Habitación ${checkInData.roomNumber} asignada a ${checkInData.guestName}`,
+      });
+      setIsProcessing(false);
+      
+      // Reset
+      setCheckInData(null);
+      setReservationCode('');
+    }, 2000);
+  };
+
+  const generateQRCode = () => {
+    toast({
+      title: "Código QR Generado",
+      description: "El código QR ha sido enviado al huésped por email.",
+    });
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Search Reservation */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Scan className="w-5 h-5" />
+            Buscar Reserva
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            <div className="md:col-span-2">
+              <Label htmlFor="reservation">Código de Reserva o Email</Label>
+              <Input
+                id="reservation"
+                placeholder="RES-2025-001 o email@ejemplo.com"
+                value={reservationCode}
+                onChange={(e) => setReservationCode(e.target.value)}
+                onKeyPress={(e) => e.key === 'Enter' && handleSearchReservation()}
+              />
+            </div>
+            <div className="flex items-end gap-2">
+              <Button 
+                onClick={handleSearchReservation}
+                disabled={isProcessing}
+                className="flex-1"
+              >
+                <UserCheck className="w-4 h-4 mr-2" />
+                Buscar
+              </Button>
+              <Button 
+                variant="outline"
+                onClick={() => setScanMode(!scanMode)}
+              >
+                <QrCode className="w-4 h-4" />
+              </Button>
+            </div>
+          </div>
+
+          {scanMode && (
+            <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
+              <QrCode className="w-16 h-16 mx-auto mb-4 text-gray-400" />
+              <p className="text-gray-600 mb-2">Escanea el código QR de la reserva</p>
+              <p className="text-sm text-gray-500">El huésped puede mostrar el QR desde su email de confirmación</p>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Reservation Details */}
+      {checkInData && (
+        <>
+          <Card className="border-l-4 border-l-green-500">
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <CardTitle>Detalles de la Reserva</CardTitle>
+                <Badge variant="outline" className="text-green-600 border-green-600">
+                  Confirmada
+                </Badge>
+              </div>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-3">
+                  <div>
+                    <Label className="text-gray-600">Huésped Principal</Label>
+                    <p className="text-lg font-semibold">{checkInData.guestName}</p>
+                  </div>
+                  <div>
+                    <Label className="text-gray-600">ID de Reserva</Label>
+                    <p className="font-mono">{checkInData.reservationId}</p>
+                  </div>
+                  <div>
+                    <Label className="text-gray-600">Habitación Asignada</Label>
+                    <p className="text-2xl font-bold text-blue-600">#{checkInData.roomNumber}</p>
+                  </div>
+                </div>
+
+                <div className="space-y-3">
+                  <div className="flex items-center gap-2">
+                    <Calendar className="w-5 h-5 text-gray-500" />
+                    <div>
+                      <Label className="text-gray-600">Check-in</Label>
+                      <p className="font-semibold">{checkInData.checkIn}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Calendar className="w-5 h-5 text-gray-500" />
+                    <div>
+                      <Label className="text-gray-600">Check-out</Label>
+                      <p className="font-semibold">{checkInData.checkOut}</p>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Clock className="w-5 h-5 text-gray-500" />
+                    <div>
+                      <Label className="text-gray-600">Hora de entrada</Label>
+                      <p className="font-semibold">15:00</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-4 pt-4 border-t">
+                <Badge variant="secondary">
+                  {checkInData.adults} Adulto(s)
+                </Badge>
+                {checkInData.children > 0 && (
+                  <Badge variant="secondary">
+                    {checkInData.children} Niño(s)
+                  </Badge>
+                )}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Actions */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Acciones de Check-in</CardTitle>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <Button 
+                  onClick={handleCheckIn}
+                  disabled={isProcessing}
+                  size="lg"
+                  className="h-20 flex-col gap-2"
+                >
+                  <CheckCircle className="w-6 h-6" />
+                  <span>Completar Check-in</span>
+                </Button>
+                <Button 
+                  onClick={generateQRCode}
+                  variant="outline"
+                  size="lg"
+                  className="h-20 flex-col gap-2"
+                >
+                  <QrCode className="w-6 h-6" />
+                  <span>Generar Código QR</span>
+                </Button>
+                <Button 
+                  variant="outline"
+                  size="lg"
+                  className="h-20 flex-col gap-2"
+                >
+                  <Mail className="w-6 h-6" />
+                  <span>Enviar Confirmación</span>
+                </Button>
+                <Button 
+                  variant="outline"
+                  size="lg"
+                  className="h-20 flex-col gap-2"
+                >
+                  <Download className="w-6 h-6" />
+                  <span>Imprimir Voucher</span>
+                </Button>
+              </div>
+
+              <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mt-4">
+                <h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+                  <CreditCard className="w-5 h-5" />
+                  Información de Pago
+                </h4>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span>Tarifa por noche:</span>
+                    <span className="font-semibold">$150.00</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Noches:</span>
+                    <span className="font-semibold">5</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span>Impuestos (18%):</span>
+                    <span className="font-semibold">$135.00</span>
+                  </div>
+                  <div className="flex justify-between border-t pt-2 text-base">
+                    <span className="font-bold">Total:</span>
+                    <span className="font-bold text-green-600">$885.00</span>
+                  </div>
+                  <div className="pt-2">
+                    <Badge className="bg-green-100 text-green-800">
+                      ✓ Pago Confirmado
+                    </Badge>
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </>
+      )}
+
+      {/* Quick Stats */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Check-ins Hoy</p>
+                <p className="text-2xl font-bold">15</p>
+              </div>
+              <CheckCircle 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">Pendientes</p>
+                <p className="text-2xl font-bold">8</p>
+              </div>
+              <Clock className="w-8 h-8 text-orange-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Check-outs Hoy</p>
+                <p className="text-2xl font-bold">12</p>
+              </div>
+              <MapPin className="w-8 h-8 text-blue-500" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default CheckInSystem;

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;

src/components/hotel/RoomManagement.tsx

@@ -0,0 +1,271 @@
+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 { Badge } from '@/components/ui/badge';
+import { 
+  Bed, 
+  Plus, 
+  Search, 
+  Filter,
+  Edit,
+  Trash2,
+  CheckCircle,
+  AlertCircle,
+  Wrench,
+  Users,
+  DollarSign,
+  Wifi,
+  Tv,
+  Wind,
+  Coffee
+} from 'lucide-react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { Switch } from '@/components/ui/switch';
+
+interface Room {
+  id: string;
+  number: string;
+  type: 'single' | 'double' | 'suite' | 'deluxe';
+  status: 'available' | 'occupied' | 'maintenance' | 'cleaning';
+  floor: number;
+  capacity: number;
+  price: number;
+  amenities: string[];
+  guest?: {
+    name: string;
+    checkIn: string;
+    checkOut: string;
+  };
+}
+
+const RoomManagement = () => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [rooms, setRooms] = useState<Room[]>([
+    {
+      id: '1',
+      number: '101',
+      type: 'single',
+      status: 'available',
+      floor: 1,
+      capacity: 1,
+      price: 80,
+      amenities: ['wifi', 'tv', 'ac']
+    },
+    {
+      id: '2',
+      number: '102',
+      type: 'double',
+      status: 'occupied',
+      floor: 1,
+      capacity: 2,
+      price: 120,
+      amenities: ['wifi', 'tv', 'ac', 'coffee'],
+      guest: {
+        name: 'Juan Pérez',
+        checkIn: '2025-01-15',
+        checkOut: '2025-01-20'
+      }
+    },
+    {
+      id: '3',
+      number: '201',
+      type: 'suite',
+      status: 'maintenance',
+      floor: 2,
+      capacity: 4,
+      price: 250,
+      amenities: ['wifi', 'tv', 'ac', 'coffee']
+    },
+    {
+      id: '4',
+      number: '202',
+      type: 'deluxe',
+      status: 'cleaning',
+      floor: 2,
+      capacity: 3,
+      price: 180,
+      amenities: ['wifi', 'tv', 'ac', 'coffee']
+    }
+  ]);
+
+  const statusConfig = {
+    available: { label: 'Disponible', color: 'bg-green-500', icon: CheckCircle },
+    occupied: { label: 'Ocupada', color: 'bg-blue-500', icon: Users },
+    maintenance: { label: 'Mantenimiento', color: 'bg-orange-500', icon: Wrench },
+    cleaning: { label: 'Limpieza', color: 'bg-purple-500', icon: AlertCircle }
+  };
+
+  const amenitiesIcons: Record<string, any> = {
+    wifi: Wifi,
+    tv: Tv,
+    ac: Wind,
+    coffee: Coffee
+  };
+
+  const filteredRooms = rooms.filter(room => {
+    const matchesSearch = room.number.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = filterStatus === 'all' || room.status === filterStatus;
+    return matchesSearch && matchesStatus;
+  });
+
+  const changeRoomStatus = (roomId: string, newStatus: Room['status']) => {
+    setRooms(rooms.map(room => 
+      room.id === roomId ? { ...room, status: newStatus } : room
+    ));
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Header & Actions */}
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between">
+            <div className="flex-1 w-full md:w-auto">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+                <Input
+                  placeholder="Buscar habitación..."
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+            </div>
+            <div className="flex gap-2 w-full md:w-auto">
+              <Select value={filterStatus} onValueChange={setFilterStatus}>
+                <SelectTrigger className="w-full md:w-40">
+                  <SelectValue placeholder="Estado" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="all">Todos</SelectItem>
+                  <SelectItem value="available">Disponibles</SelectItem>
+                  <SelectItem value="occupied">Ocupadas</SelectItem>
+                  <SelectItem value="maintenance">Mantenimiento</SelectItem>
+                  <SelectItem value="cleaning">Limpieza</SelectItem>
+                </SelectContent>
+              </Select>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button>
+                    <Plus className="w-4 h-4 mr-2" />
+                    Nueva Habitación
+                  </Button>
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader>
+                    <DialogTitle>Agregar Nueva Habitación</DialogTitle>
+                  </DialogHeader>
+                  <div className="space-y-4 py-4">
+                    <div>
+                      <Label>Número de Habitación</Label>
+                      <Input placeholder="101" />
+                    </div>
+                    <div>
+                      <Label>Tipo</Label>
+                      <Select>
+                        <SelectTrigger>
+                          <SelectValue placeholder="Seleccionar tipo" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="single">Individual</SelectItem>
+                          <SelectItem value="double">Doble</SelectItem>
+                          <SelectItem value="suite">Suite</SelectItem>
+                          <SelectItem value="deluxe">Deluxe</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                    <div>
+                      <Label>Precio por Noche</Label>
+                      <Input type="number" placeholder="80" />
+                    </div>
+                    <Button className="w-full">Crear Habitación</Button>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Rooms Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+        {filteredRooms.map((room) => {
+          const StatusIcon = statusConfig[room.status].icon;
+          return (
+            <Card key={room.id} className="hover:shadow-lg transition-shadow">
+              <CardHeader className="pb-3">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Bed className="w-5 h-5 text-gray-600" />
+                    <CardTitle className="text-lg">Hab. {room.number}</CardTitle>
+                  </div>
+                  <div className={`w-3 h-3 rounded-full ${statusConfig[room.status].color}`}></div>
+                </div>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="flex items-center justify-between text-sm">
+                  <span className="text-gray-600">Piso {room.floor}</span>
+                  <Badge variant="outline">{room.type}</Badge>
+                </div>
+
+                <div className="flex items-center gap-2">
+                  <StatusIcon className="w-4 h-4" />
+                  <span className="text-sm font-medium">{statusConfig[room.status].label}</span>
+                </div>
+
+                {room.guest && (
+                  <div className="p-2 bg-blue-50 rounded text-sm">
+                    <p className="font-medium">{room.guest.name}</p>
+                    <p className="text-xs text-gray-600">
+                      {room.guest.checkIn} → {room.guest.checkOut}
+                    </p>
+                  </div>
+                )}
+
+                <div className="flex items-center justify-between pt-2 border-t">
+                  <div className="flex items-center gap-1 text-lg font-bold text-green-600">
+                    <DollarSign className="w-4 h-4" />
+                    {room.price}
+                  </div>
+                  <div className="flex gap-2">
+                    {room.amenities.slice(0, 3).map((amenity) => {
+                      const Icon = amenitiesIcons[amenity];
+                      return Icon ? <Icon key={amenity} className="w-4 h-4 text-gray-500" /> : null;
+                    })}
+                  </div>
+                </div>
+
+                <div className="flex gap-2 pt-2">
+                  <Select
+                    value={room.status}
+                    onValueChange={(value) => changeRoomStatus(room.id, value as Room['status'])}
+                  >
+                    <SelectTrigger className="flex-1">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="available">Disponible</SelectItem>
+                      <SelectItem value="occupied">Ocupada</SelectItem>
+                      <SelectItem value="maintenance">Mantenimiento</SelectItem>
+                      <SelectItem value="cleaning">Limpieza</SelectItem>
+                    </SelectContent>
+                  </Select>
+                  <Button size="sm" variant="outline">
+                    <Edit className="w-4 h-4" />
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default RoomManagement;

src/components/hotel/RoomService.tsx

@@ -0,0 +1,317 @@
+import React, { useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import { Input } from '@/components/ui/input';
+import { 
+  UtensilsCrossed, 
+  Coffee, 
+  Pizza,
+  Wine,
+  Salad,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  ChefHat,
+  Bell,
+  DollarSign,
+  Search
+} from 'lucide-react';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { useToast } from '@/hooks/use-toast';
+
+interface Order {
+  id: string;
+  roomNumber: string;
+  guestName: string;
+  items: { name: string; quantity: number; price: number }[];
+  status: 'pending' | 'preparing' | 'delivering' | 'completed';
+  orderTime: string;
+  total: number;
+}
+
+const RoomService = () => {
+  const { toast } = useToast();
+  const [filterStatus, setFilterStatus] = useState<string>('all');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [orders, setOrders] = useState<Order[]>([
+    {
+      id: 'ORD-001',
+      roomNumber: '305',
+      guestName: 'Juan Pérez',
+      items: [
+        { name: 'Desayuno Continental', quantity: 2, price: 25 },
+        { name: 'Café Americano', quantity: 2, price: 5 }
+      ],
+      status: 'preparing',
+      orderTime: '08:15 AM',
+      total: 60
+    },
+    {
+      id: 'ORD-002',
+      roomNumber: '412',
+      guestName: 'María González',
+      items: [
+        { name: 'Club Sandwich', quantity: 1, price: 18 },
+        { name: 'Ensalada César', quantity: 1, price: 15 },
+        { name: 'Limonada', quantity: 2, price: 6 }
+      ],
+      status: 'delivering',
+      orderTime: '12:30 PM',
+      total: 39
+    },
+    {
+      id: 'ORD-003',
+      roomNumber: '208',
+      guestName: 'Carlos Martínez',
+      items: [
+        { name: 'Botella de Vino', quantity: 1, price: 45 }
+      ],
+      status: 'pending',
+      orderTime: '07:45 PM',
+      total: 45
+    }
+  ]);
+
+  const statusConfig = {
+    pending: { label: 'Pendiente', color: 'bg-yellow-100 text-yellow-800', icon: Bell },
+    preparing: { label: 'Preparando', color: 'bg-blue-100 text-blue-800', icon: ChefHat },
+    delivering: { label: 'En Camino', color: 'bg-purple-100 text-purple-800', icon: Clock },
+    completed: { label: 'Completado', color: 'bg-green-100 text-green-800', icon: CheckCircle }
+  };
+
+  const updateOrderStatus = (orderId: string, newStatus: Order['status']) => {
+    setOrders(orders.map(order => 
+      order.id === orderId ? { ...order, status: newStatus } : order
+    ));
+    toast({
+      title: "Estado Actualizado",
+      description: `Orden ${orderId} actualizada a ${statusConfig[newStatus].label}`,
+    });
+  };
+
+  const filteredOrders = orders.filter(order => {
+    const matchesSearch = 
+      order.roomNumber.includes(searchTerm) ||
+      order.guestName.toLowerCase().includes(searchTerm.toLowerCase()) ||
+      order.id.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesStatus = filterStatus === 'all' || order.status === filterStatus;
+    return matchesSearch && matchesStatus;
+  });
+
+  const stats = {
+    pending: orders.filter(o => o.status === 'pending').length,
+    preparing: orders.filter(o => o.status === 'preparing').length,
+    delivering: orders.filter(o => o.status === 'delivering').length,
+    completed: orders.filter(o => o.status === 'completed').length
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Stats */}
+      <div className="grid grid-cols-2 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">Pendientes</p>
+                <p className="text-2xl font-bold">{stats.pending}</p>
+              </div>
+              <Bell className="w-8 h-8 text-yellow-500" />
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <p className="text-sm text-gray-600">Preparando</p>
+                <p className="text-2xl font-bold">{stats.preparing}</p>
+              </div>
+              <ChefHat 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">En Camino</p>
+                <p className="text-2xl font-bold">{stats.delivering}</p>
+              </div>
+              <Clock 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">Completados</p>
+                <p className="text-2xl font-bold">{stats.completed}</p>
+              </div>
+              <CheckCircle className="w-8 h-8 text-green-500" />
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Filters */}
+      <Card>
+        <CardContent className="p-6">
+          <div className="flex flex-col md:flex-row gap-4">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
+              <Input
+                placeholder="Buscar por habitación, huésped o ID..."
+                value={searchTerm}
+                onChange={(e) => setSearchTerm(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={filterStatus} onValueChange={setFilterStatus}>
+              <SelectTrigger className="w-full md:w-48">
+                <SelectValue placeholder="Estado" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Todos</SelectItem>
+                <SelectItem value="pending">Pendientes</SelectItem>
+                <SelectItem value="preparing">Preparando</SelectItem>
+                <SelectItem value="delivering">En Camino</SelectItem>
+                <SelectItem value="completed">Completados</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Orders List */}
+      <div className="grid grid-cols-1 gap-4">
+        {filteredOrders.map((order) => {
+          const StatusIcon = statusConfig[order.status].icon;
+          return (
+            <Card key={order.id} className="hover:shadow-md transition-shadow">
+              <CardContent className="p-6">
+                <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">
+                        {order.roomNumber}
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-lg">{order.guestName}</h3>
+                        <p className="text-sm text-gray-600">Orden #{order.id}</p>
+                      </div>
+                      <Badge className={statusConfig[order.status].color}>
+                        <StatusIcon className="w-3 h-3 mr-1" />
+                        {statusConfig[order.status].label}
+                      </Badge>
+                    </div>
+
+                    <div className="space-y-1 mb-3">
+                      {order.items.map((item, idx) => (
+                        <div key={idx} className="flex items-center justify-between text-sm">
+                          <span className="text-gray-700">
+                            {item.quantity}x {item.name}
+                          </span>
+                          <span className="font-medium">${item.price * item.quantity}</span>
+                        </div>
+                      ))}
+                    </div>
+
+                    <div className="flex items-center gap-4 text-sm text-gray-600">
+                      <div className="flex items-center gap-1">
+                        <Clock className="w-4 h-4" />
+                        {order.orderTime}
+                      </div>
+                      <div className="flex items-center gap-1 font-semibold text-green-600">
+                        <DollarSign className="w-4 h-4" />
+                        Total: ${order.total}
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="flex flex-col gap-2">
+                    {order.status === 'pending' && (
+                      <Button 
+                        onClick={() => updateOrderStatus(order.id, 'preparing')}
+                        className="w-full md:w-auto"
+                      >
+                        <ChefHat className="w-4 h-4 mr-2" />
+                        Preparar
+                      </Button>
+                    )}
+                    {order.status === 'preparing' && (
+                      <Button 
+                        onClick={() => updateOrderStatus(order.id, 'delivering')}
+                        className="w-full md:w-auto bg-purple-600 hover:bg-purple-700"
+                      >
+                        <Clock className="w-4 h-4 mr-2" />
+                        Entregar
+                      </Button>
+                    )}
+                    {order.status === 'delivering' && (
+                      <Button 
+                        onClick={() => updateOrderStatus(order.id, 'completed')}
+                        className="w-full md:w-auto bg-green-600 hover:bg-green-700"
+                      >
+                        <CheckCircle className="w-4 h-4 mr-2" />
+                        Completar
+                      </Button>
+                    )}
+                    {order.status === 'completed' && (
+                      <Badge variant="outline" className="bg-green-50">
+                        ✓ Completado
+                      </Badge>
+                    )}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })}
+      </div>
+
+      {filteredOrders.length === 0 && (
+        <Card>
+          <CardContent className="p-12 text-center">
+            <UtensilsCrossed className="w-16 h-16 mx-auto text-gray-300 mb-4" />
+            <h3 className="text-lg font-semibold text-gray-900 mb-2">
+              No hay órdenes
+            </h3>
+            <p className="text-gray-600">
+              No se encontraron órdenes con los filtros aplicados
+            </p>
+          </CardContent>
+        </Card>
+      )}
+
+      {/* Popular Menu Items */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Menú Más Solicitado</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+            {[
+              { name: 'Desayuno Continental', icon: Coffee, orders: 45 },
+              { name: 'Club Sandwich', icon: Pizza, orders: 32 },
+              { name: 'Vino Tinto', icon: Wine, orders: 28 },
+              { name: 'Ensalada César', icon: Salad, orders: 21 }
+            ].map((item, idx) => (
+              <div key={idx} className="flex items-center gap-3 p-3 bg-gray-50 rounded-lg">
+                <item.icon className="w-8 h-8 text-blue-600" />
+                <div>
+                  <p className="font-medium text-sm">{item.name}</p>
+                  <p className="text-xs text-gray-600">{item.orders} pedidos</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default RoomService;

src/pages/dashboard/HotelManagement.tsx

@@ -0,0 +1,279 @@
+import React, { useState } from 'react';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { 
+  Hotel, 
+  DoorOpen, 
+  BellRing, 
+  QrCode, 
+  Users, 
+  Bed,
+  Calendar,
+  Clock,
+  CheckCircle,
+  AlertCircle,
+  Sparkles,
+  UtensilsCrossed,
+  Key
+} from 'lucide-react';
+import RoomManagement from '@/components/hotel/RoomManagement';
+import CheckInSystem from '@/components/hotel/CheckInSystem';
+import RoomService from '@/components/hotel/RoomService';
+import KeylessEntry from '@/components/hotel/KeylessEntry';
+
+const HotelManagement = () => {
+  const [activeTab, setActiveTab] = useState('overview');
+
+  // Stats de ejemplo
+  const stats = {
+    totalRooms: 120,
+    occupied: 85,
+    available: 25,
+    maintenance: 10,
+    checkInsToday: 15,
+    checkOutsToday: 12,
+    roomServiceOrders: 8,
+    revenue: 45600
+  };
+
+  const occupancyRate = ((stats.occupied / stats.totalRooms) * 100).toFixed(1);
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50 p-6">
+      {/* Header */}
+      <div className="mb-8">
+        <div className="flex items-center gap-3 mb-2">
+          <div className="w-12 h-12 rounded-xl bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
+            <Hotel className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h1 className="text-3xl font-bold text-gray-900">Hotel Management</h1>
+            <p className="text-gray-600">Sistema integral de gestión hotelera</p>
+          </div>
+        </div>
+      </div>
+
+      {/* Overview Stats */}
+      {activeTab === 'overview' && (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
+          <Card className="border-l-4 border-l-blue-500">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Ocupación</p>
+                  <p className="text-2xl font-bold text-gray-900">{occupancyRate}%</p>
+                  <p className="text-xs text-gray-500">{stats.occupied}/{stats.totalRooms} habitaciones</p>
+                </div>
+                <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center">
+                  <Bed className="w-6 h-6 text-blue-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-l-4 border-l-green-500">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Check-ins Hoy</p>
+                  <p className="text-2xl font-bold text-gray-900">{stats.checkInsToday}</p>
+                  <p className="text-xs text-gray-500">{stats.checkOutsToday} check-outs</p>
+                </div>
+                <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
+                  <DoorOpen className="w-6 h-6 text-green-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-l-4 border-l-purple-500">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Room Service</p>
+                  <p className="text-2xl font-bold text-gray-900">{stats.roomServiceOrders}</p>
+                  <p className="text-xs text-gray-500">Pedidos activos</p>
+                </div>
+                <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
+                  <BellRing className="w-6 h-6 text-purple-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="border-l-4 border-l-orange-500">
+            <CardContent className="p-6">
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="text-sm text-gray-600 mb-1">Ingresos Hoy</p>
+                  <p className="text-2xl font-bold text-gray-900">${stats.revenue.toLocaleString()}</p>
+                  <p className="text-xs text-green-600">+12% vs ayer</p>
+                </div>
+                <div className="w-12 h-12 rounded-full bg-orange-100 flex items-center justify-center">
+                  <Sparkles className="w-6 h-6 text-orange-600" />
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Main Content Tabs */}
+      <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
+        <TabsList className="grid w-full grid-cols-5 lg:w-auto lg:inline-grid">
+          <TabsTrigger value="overview" className="flex items-center gap-2">
+            <Hotel className="w-4 h-4" />
+            <span className="hidden sm:inline">Resumen</span>
+          </TabsTrigger>
+          <TabsTrigger value="rooms" className="flex items-center gap-2">
+            <Bed className="w-4 h-4" />
+            <span className="hidden sm:inline">Habitaciones</span>
+          </TabsTrigger>
+          <TabsTrigger value="checkin" className="flex items-center gap-2">
+            <QrCode className="w-4 h-4" />
+            <span className="hidden sm:inline">Check-in</span>
+          </TabsTrigger>
+          <TabsTrigger value="roomservice" className="flex items-center gap-2">
+            <UtensilsCrossed className="w-4 h-4" />
+            <span className="hidden sm:inline">Room Service</span>
+          </TabsTrigger>
+          <TabsTrigger value="keyless" className="flex items-center gap-2">
+            <Key className="w-4 h-4" />
+            <span className="hidden sm:inline">Acceso</span>
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="overview" className="space-y-6">
+          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+            {/* Habitaciones por Estado */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Bed className="w-5 h-5" />
+                  Estado de Habitaciones
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-4">
+                  <div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
+                    <div className="flex items-center gap-3">
+                      <div className="w-3 h-3 rounded-full bg-green-500"></div>
+                      <span className="font-medium">Disponibles</span>
+                    </div>
+                    <Badge variant="secondary">{stats.available}</Badge>
+                  </div>
+                  <div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
+                    <div className="flex items-center gap-3">
+                      <div className="w-3 h-3 rounded-full bg-blue-500"></div>
+                      <span className="font-medium">Ocupadas</span>
+                    </div>
+                    <Badge variant="secondary">{stats.occupied}</Badge>
+                  </div>
+                  <div className="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
+                    <div className="flex items-center gap-3">
+                      <div className="w-3 h-3 rounded-full bg-orange-500"></div>
+                      <span className="font-medium">Mantenimiento</span>
+                    </div>
+                    <Badge variant="secondary">{stats.maintenance}</Badge>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Check-ins Pendientes */}
+            <Card>
+              <CardHeader>
+                <CardTitle className="flex items-center gap-2">
+                  <Calendar className="w-5 h-5" />
+                  Check-ins de Hoy
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-3">
+                  {[1, 2, 3].map((i) => (
+                    <div key={i} className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors">
+                      <div>
+                        <p className="font-medium">Habitación {100 + i}</p>
+                        <p className="text-sm text-gray-600">Reserva #{1234 + i} - 2 huéspedes</p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-sm font-medium">14:00</p>
+                        <Badge variant="outline" className="mt-1">Pendiente</Badge>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                <Button className="w-full mt-4" variant="outline">
+                  Ver Todos los Check-ins
+                </Button>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Quick Actions */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Acciones Rápidas</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                <Button 
+                  variant="outline" 
+                  className="h-24 flex-col gap-2"
+                  onClick={() => setActiveTab('checkin')}
+                >
+                  <QrCode className="w-6 h-6" />
+                  <span>Nuevo Check-in</span>
+                </Button>
+                <Button 
+                  variant="outline" 
+                  className="h-24 flex-col gap-2"
+                  onClick={() => setActiveTab('rooms')}
+                >
+                  <Bed className="w-6 h-6" />
+                  <span>Gestionar Habitaciones</span>
+                </Button>
+                <Button 
+                  variant="outline" 
+                  className="h-24 flex-col gap-2"
+                  onClick={() => setActiveTab('roomservice')}
+                >
+                  <UtensilsCrossed className="w-6 h-6" />
+                  <span>Room Service</span>
+                </Button>
+                <Button 
+                  variant="outline" 
+                  className="h-24 flex-col gap-2"
+                  onClick={() => setActiveTab('keyless')}
+                >
+                  <Key className="w-6 h-6" />
+                  <span>Acceso Digital</span>
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="rooms">
+          <RoomManagement />
+        </TabsContent>
+
+        <TabsContent value="checkin">
+          <CheckInSystem />
+        </TabsContent>
+
+        <TabsContent value="roomservice">
+          <RoomService />
+        </TabsContent>
+
+        <TabsContent value="keyless">
+          <KeylessEntry />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+};
+
+export default HotelManagement;