Implement Hotel Management module
This commit is contained in:
gpt-engineer-app[bot]
@@ -32,6 +32,7 @@ import Profile from "./pages/dashboard/Profile";
|
|||||||
import Settings from "./pages/dashboard/Settings";
|
import Settings from "./pages/dashboard/Settings";
|
||||||
import Invoices from "./pages/dashboard/Invoices";
|
import Invoices from "./pages/dashboard/Invoices";
|
||||||
import InvoiceDetail from "./pages/dashboard/InvoiceDetail";
|
import InvoiceDetail from "./pages/dashboard/InvoiceDetail";
|
||||||
|
import HotelManagement from "./pages/dashboard/HotelManagement";
|
||||||
import NotFound from "./pages/NotFound";
|
import NotFound from "./pages/NotFound";
|
||||||
|
|
||||||
const queryClient = new QueryClient();
|
const queryClient = new QueryClient();
|
||||||
@@ -239,6 +240,14 @@ const AppRouter = () => (
|
|||||||
</ProtectedRoute>
|
</ProtectedRoute>
|
||||||
} />
|
} />
|
||||||
|
|
||||||
|
<Route path="/dashboard/hotel-management" element={
|
||||||
|
<ProtectedRoute>
|
||||||
|
<DashboardLayout>
|
||||||
|
<HotelManagement />
|
||||||
|
</DashboardLayout>
|
||||||
|
</ProtectedRoute>
|
||||||
|
} />
|
||||||
|
|
||||||
{/* Catch-all route */}
|
{/* Catch-all route */}
|
||||||
<Route path="*" element={<NotFound />} />
|
<Route path="*" element={<NotFound />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
|
|||||||
@@ -36,7 +36,8 @@ import {
|
|||||||
Eye,
|
Eye,
|
||||||
Megaphone,
|
Megaphone,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
ChevronRight
|
ChevronRight,
|
||||||
|
Hotel
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
||||||
@@ -59,6 +60,7 @@ const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
|||||||
{ icon: Home, label: 'Dashboard', path: '/dashboard' },
|
{ icon: Home, label: 'Dashboard', path: '/dashboard' },
|
||||||
{ icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' },
|
{ icon: Settings, label: 'Admin Panel', path: '/dashboard/admin' },
|
||||||
{ icon: Plus, label: 'Channel Manager', path: '/dashboard/channel-manager' },
|
{ 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: Wallet, label: 'Wallet', path: '/dashboard/wallet' },
|
||||||
{ icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
|
{ icon: MessageSquare, label: 'Message', path: '/dashboard/messages', badge: '2' },
|
||||||
];
|
];
|
||||||
|
|||||||
319
src/components/hotel/CheckInSystem.tsx
Normal file
319
src/components/hotel/CheckInSystem.tsx
Normal file
@@ -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;
|
||||||
387
src/components/hotel/KeylessEntry.tsx
Normal file
387
src/components/hotel/KeylessEntry.tsx
Normal file
@@ -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;
|
||||||
271
src/components/hotel/RoomManagement.tsx
Normal file
271
src/components/hotel/RoomManagement.tsx
Normal file
@@ -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;
|
||||||
317
src/components/hotel/RoomService.tsx
Normal file
317
src/components/hotel/RoomService.tsx
Normal file
@@ -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;
|
||||||
279
src/pages/dashboard/HotelManagement.tsx
Normal file
279
src/pages/dashboard/HotelManagement.tsx
Normal file
@@ -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;
|
||||||
Reference in New Issue
Block a user