Refactor Commerce module based on API
This commit is contained in:
gpt-engineer-app[bot]
146
src/components/establishments/CommerceReservations.tsx
Normal file
146
src/components/establishments/CommerceReservations.tsx
Normal file
@@ -0,0 +1,146 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Calendar, Users, Clock, CheckCircle, XCircle } from 'lucide-react';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { apiClient } from '@/services/adminApi';
|
||||||
|
|
||||||
|
const CommerceReservations = () => {
|
||||||
|
const [reservations, setReservations] = useState<any[]>([]);
|
||||||
|
const [filter, setFilter] = useState('all');
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadReservations();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const loadReservations = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/commerce/reservations');
|
||||||
|
setReservations(Array.isArray(response) ? response : (response as any)?.reservations || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading reservations:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateReservation = async (id: number, status: string) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/commerce/reservations/${id}`, { status });
|
||||||
|
toast({ title: 'Éxito', description: 'Reservación actualizada' });
|
||||||
|
loadReservations();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCancelReservation = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/commerce/reservations/${id}/cancel`);
|
||||||
|
toast({ title: 'Éxito', description: 'Reservación cancelada' });
|
||||||
|
loadReservations();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo cancelar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredReservations = reservations.filter(res =>
|
||||||
|
filter === 'all' || res.status === filter
|
||||||
|
);
|
||||||
|
|
||||||
|
const getStatusBadge = (status: string) => {
|
||||||
|
const variants: Record<string, any> = {
|
||||||
|
pending: 'secondary',
|
||||||
|
confirmed: 'default',
|
||||||
|
cancelled: 'destructive',
|
||||||
|
completed: 'outline'
|
||||||
|
};
|
||||||
|
return <Badge variant={variants[status] || 'default'}>{status}</Badge>;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<h3 className="text-lg font-semibold">Gestión de Reservaciones</h3>
|
||||||
|
<Select value={filter} onValueChange={setFilter}>
|
||||||
|
<SelectTrigger className="w-48">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="all">Todas</SelectItem>
|
||||||
|
<SelectItem value="pending">Pendientes</SelectItem>
|
||||||
|
<SelectItem value="confirmed">Confirmadas</SelectItem>
|
||||||
|
<SelectItem value="cancelled">Canceladas</SelectItem>
|
||||||
|
<SelectItem value="completed">Completadas</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{filteredReservations.map((reservation) => (
|
||||||
|
<Card key={reservation.id}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<Calendar className="w-8 h-8 text-primary" />
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-base">
|
||||||
|
{reservation.establishment?.name || 'Establecimiento'}
|
||||||
|
</CardTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Reserva #{reservation.id}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
{getStatusBadge(reservation.status)}
|
||||||
|
{reservation.status === 'pending' && (
|
||||||
|
<>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={() => handleUpdateReservation(reservation.id, 'confirmed')}
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-4 h-4 mr-1" />
|
||||||
|
Confirmar
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => handleCancelReservation(reservation.id)}
|
||||||
|
>
|
||||||
|
<XCircle className="w-4 h-4 mr-1" />
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Calendar className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span>{new Date(reservation.date).toLocaleDateString()}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Clock className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span>{reservation.time}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Users className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span>{reservation.guests} personas</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{reservation.specialRequests && (
|
||||||
|
<p className="text-sm text-muted-foreground mt-2">
|
||||||
|
Notas: {reservation.specialRequests}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CommerceReservations;
|
||||||
309
src/components/establishments/EstablishmentsList.tsx
Normal file
309
src/components/establishments/EstablishmentsList.tsx
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Plus, Edit, Trash2, Store, MapPin, Phone, Globe } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { apiClient } from '@/services/adminApi';
|
||||||
|
|
||||||
|
const EstablishmentsList = () => {
|
||||||
|
const [establishments, setEstablishments] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [editingId, setEditingId] = useState<number | null>(null);
|
||||||
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
type: 'restaurant',
|
||||||
|
address: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
website: '',
|
||||||
|
category: '',
|
||||||
|
coordinates: { x: 0, y: 0 },
|
||||||
|
openingHours: {
|
||||||
|
monday: '9:00-18:00',
|
||||||
|
tuesday: '9:00-18:00',
|
||||||
|
wednesday: '9:00-18:00',
|
||||||
|
thursday: '9:00-18:00',
|
||||||
|
friday: '9:00-18:00',
|
||||||
|
saturday: '9:00-18:00',
|
||||||
|
sunday: 'Closed'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const loadEstablishments = async () => {
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/commerce/establishments');
|
||||||
|
setEstablishments(Array.isArray(response) ? response : (response as any)?.establishments || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading establishments:', error);
|
||||||
|
toast({ title: 'Error', description: 'No se pudieron cargar los establecimientos', variant: 'destructive' });
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadEstablishments();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleSubmit = async () => {
|
||||||
|
try {
|
||||||
|
if (editingId) {
|
||||||
|
await apiClient.patch(`/commerce/establishments/${editingId}`, formData);
|
||||||
|
toast({ title: 'Éxito', description: 'Establecimiento actualizado correctamente' });
|
||||||
|
} else {
|
||||||
|
await apiClient.post('/commerce/establishments', formData);
|
||||||
|
toast({ title: 'Éxito', description: 'Establecimiento creado correctamente' });
|
||||||
|
}
|
||||||
|
resetForm();
|
||||||
|
loadEstablishments();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({ title: 'Error', description: error?.message || 'No se pudo guardar el establecimiento', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDelete = async (id: number) => {
|
||||||
|
if (!confirm('¿Estás seguro de eliminar este establecimiento?')) return;
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/commerce/establishments/${id}`);
|
||||||
|
toast({ title: 'Éxito', description: 'Establecimiento eliminado correctamente' });
|
||||||
|
loadEstablishments();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo eliminar el establecimiento', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleEdit = (establishment: any) => {
|
||||||
|
setEditingId(establishment.id);
|
||||||
|
setFormData({
|
||||||
|
name: establishment.name || '',
|
||||||
|
description: establishment.description || '',
|
||||||
|
type: establishment.type || 'restaurant',
|
||||||
|
address: establishment.address || '',
|
||||||
|
phone: establishment.phone || '',
|
||||||
|
email: establishment.email || '',
|
||||||
|
website: establishment.website || '',
|
||||||
|
category: establishment.category || '',
|
||||||
|
coordinates: establishment.coordinates || { x: 0, y: 0 },
|
||||||
|
openingHours: establishment.openingHours || formData.openingHours
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const resetForm = () => {
|
||||||
|
setEditingId(null);
|
||||||
|
setFormData({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
type: 'restaurant',
|
||||||
|
address: '',
|
||||||
|
phone: '',
|
||||||
|
email: '',
|
||||||
|
website: '',
|
||||||
|
category: '',
|
||||||
|
coordinates: { x: 0, y: 0 },
|
||||||
|
openingHours: {
|
||||||
|
monday: '9:00-18:00',
|
||||||
|
tuesday: '9:00-18:00',
|
||||||
|
wednesday: '9:00-18:00',
|
||||||
|
thursday: '9:00-18:00',
|
||||||
|
friday: '9:00-18:00',
|
||||||
|
saturday: '9:00-18:00',
|
||||||
|
sunday: 'Closed'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const filteredEstablishments = establishments.filter(est =>
|
||||||
|
est.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||||
|
est.category?.toLowerCase().includes(searchTerm.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex-1 max-w-sm">
|
||||||
|
<Input
|
||||||
|
placeholder="Buscar establecimientos..."
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={(e) => setSearchTerm(e.target.value)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button onClick={resetForm}>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Nuevo Establecimiento
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>{editingId ? 'Editar' : 'Crear'} Establecimiento</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Nombre</Label>
|
||||||
|
<Input
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
placeholder="Nombre del establecimiento"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Tipo</Label>
|
||||||
|
<Select value={formData.type} onValueChange={(value) => setFormData({ ...formData, type: value })}>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="restaurant">Restaurante</SelectItem>
|
||||||
|
<SelectItem value="hotel">Hotel</SelectItem>
|
||||||
|
<SelectItem value="bar">Bar</SelectItem>
|
||||||
|
<SelectItem value="cafe">Café</SelectItem>
|
||||||
|
<SelectItem value="store">Tienda</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Descripción</Label>
|
||||||
|
<Textarea
|
||||||
|
value={formData.description}
|
||||||
|
onChange={(e) => setFormData({ ...formData, description: e.target.value })}
|
||||||
|
placeholder="Describe el establecimiento..."
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Categoría</Label>
|
||||||
|
<Input
|
||||||
|
value={formData.category}
|
||||||
|
onChange={(e) => setFormData({ ...formData, category: e.target.value })}
|
||||||
|
placeholder="Ej: Comida rápida"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Teléfono</Label>
|
||||||
|
<Input
|
||||||
|
value={formData.phone}
|
||||||
|
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||||
|
placeholder="+1 809 123 4567"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Dirección</Label>
|
||||||
|
<Input
|
||||||
|
value={formData.address}
|
||||||
|
onChange={(e) => setFormData({ ...formData, address: e.target.value })}
|
||||||
|
placeholder="Dirección completa"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Email</Label>
|
||||||
|
<Input
|
||||||
|
type="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||||
|
placeholder="contacto@establecimiento.com"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Sitio Web</Label>
|
||||||
|
<Input
|
||||||
|
value={formData.website}
|
||||||
|
onChange={(e) => setFormData({ ...formData, website: e.target.value })}
|
||||||
|
placeholder="https://..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex gap-2">
|
||||||
|
<Button onClick={handleSubmit} className="flex-1">
|
||||||
|
{editingId ? 'Actualizar' : 'Crear'} Establecimiento
|
||||||
|
</Button>
|
||||||
|
{editingId && (
|
||||||
|
<Button variant="outline" onClick={resetForm}>
|
||||||
|
Cancelar
|
||||||
|
</Button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{loading ? (
|
||||||
|
<div className="text-center py-8">Cargando establecimientos...</div>
|
||||||
|
) : (
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{filteredEstablishments.map((establishment) => (
|
||||||
|
<Card key={establishment.id} className="hover:shadow-lg transition-shadow">
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<div className="w-16 h-16 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||||
|
<Store className="w-8 h-8 text-primary" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CardTitle className="text-lg">{establishment.name}</CardTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">{establishment.category}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Badge variant={establishment.isActive ? "default" : "secondary"}>
|
||||||
|
{establishment.isActive ? 'Activo' : 'Inactivo'}
|
||||||
|
</Badge>
|
||||||
|
<Badge variant="outline">{establishment.type}</Badge>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => handleEdit(establishment)}>
|
||||||
|
<Edit className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" size="sm" onClick={() => handleDelete(establishment.id)}>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground mb-3">{establishment.description}</p>
|
||||||
|
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||||
|
{establishment.address && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<MapPin className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span className="truncate">{establishment.address}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{establishment.phone && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Phone className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<span>{establishment.phone}</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{establishment.website && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Globe className="w-4 h-4 text-muted-foreground" />
|
||||||
|
<a href={establishment.website} target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
|
||||||
|
Sitio web
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default EstablishmentsList;
|
||||||
195
src/components/establishments/HotelManagement.tsx
Normal file
195
src/components/establishments/HotelManagement.tsx
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Bed, UserCheck, Bell, ClipboardCheck } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { apiClient } from '@/services/adminApi';
|
||||||
|
|
||||||
|
const HotelManagement = () => {
|
||||||
|
const [establishments, setEstablishments] = useState<any[]>([]);
|
||||||
|
const [selectedEstablishment, setSelectedEstablishment] = useState<string>('');
|
||||||
|
const [rooms, setRooms] = useState<any[]>([]);
|
||||||
|
const [housekeeping, setHousekeeping] = useState<any[]>([]);
|
||||||
|
const [stats, setStats] = useState<any>(null);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadEstablishments();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedEstablishment) {
|
||||||
|
loadHotelData();
|
||||||
|
}
|
||||||
|
}, [selectedEstablishment]);
|
||||||
|
|
||||||
|
const loadEstablishments = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/commerce/establishments?type=hotel');
|
||||||
|
setEstablishments(Array.isArray(response) ? response : (response as any)?.establishments || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading establishments:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadHotelData = async () => {
|
||||||
|
if (!selectedEstablishment) return;
|
||||||
|
try {
|
||||||
|
const [roomsData, housekeepingData, statsData] = await Promise.all([
|
||||||
|
apiClient.get(`/hotel/establishments/${selectedEstablishment}/rooms`),
|
||||||
|
apiClient.get(`/hotel/establishments/${selectedEstablishment}/housekeeping`),
|
||||||
|
apiClient.get(`/hotel/establishments/${selectedEstablishment}/stats`)
|
||||||
|
]);
|
||||||
|
|
||||||
|
setRooms(Array.isArray(roomsData) ? roomsData : (roomsData as any)?.rooms || []);
|
||||||
|
setHousekeeping(Array.isArray(housekeepingData) ? housekeepingData : (housekeepingData as any)?.tasks || []);
|
||||||
|
setStats(statsData);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading hotel data:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateRoomAvailability = async (roomId: number, isAvailable: boolean) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/hotel/rooms/${roomId}/availability`, { isAvailable });
|
||||||
|
toast({ title: 'Éxito', description: 'Disponibilidad actualizada' });
|
||||||
|
loadHotelData();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<Select value={selectedEstablishment} onValueChange={setSelectedEstablishment}>
|
||||||
|
<SelectTrigger className="w-64">
|
||||||
|
<SelectValue placeholder="Selecciona un hotel" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{establishments.map((est) => (
|
||||||
|
<SelectItem key={est.id} value={est.id.toString()}>
|
||||||
|
{est.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedEstablishment && (
|
||||||
|
<>
|
||||||
|
{stats && (
|
||||||
|
<div className="grid gap-4 md:grid-cols-4">
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Ocupación</CardTitle>
|
||||||
|
<Bed className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.occupancyRate}%</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Check-ins Hoy</CardTitle>
|
||||||
|
<UserCheck className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.todayCheckins || 0}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Room Service</CardTitle>
|
||||||
|
<Bell className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.pendingRoomService || 0}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-sm font-medium">Limpieza Pendiente</CardTitle>
|
||||||
|
<ClipboardCheck className="h-4 w-4 text-muted-foreground" />
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="text-2xl font-bold">{stats.pendingHousekeeping || 0}</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Tabs defaultValue="rooms" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-2">
|
||||||
|
<TabsTrigger value="rooms">Habitaciones</TabsTrigger>
|
||||||
|
<TabsTrigger value="housekeeping">Housekeeping</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="rooms" className="space-y-4">
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{rooms.map((room) => (
|
||||||
|
<Card key={room.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center justify-between">
|
||||||
|
<span>Habitación {room.roomNumber}</span>
|
||||||
|
<Bed className="w-5 h-5" />
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Tipo: {room.roomType}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-muted-foreground">
|
||||||
|
Precio: ${room.pricePerNight}/noche
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<Badge variant={room.isAvailable ? "default" : "secondary"}>
|
||||||
|
{room.isAvailable ? 'Disponible' : 'Ocupada'}
|
||||||
|
</Badge>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => handleUpdateRoomAvailability(room.id, !room.isAvailable)}
|
||||||
|
>
|
||||||
|
Cambiar Estado
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="housekeeping" className="space-y-4">
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{housekeeping.map((task: any) => (
|
||||||
|
<Card key={task.id}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<ClipboardCheck className="w-8 h-8 text-primary" />
|
||||||
|
<div>
|
||||||
|
<CardTitle>Habitación {task.roomNumber}</CardTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">{task.taskType}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Badge variant={task.status === 'completed' ? 'default' : 'secondary'}>
|
||||||
|
{task.status}
|
||||||
|
</Badge>
|
||||||
|
</CardHeader>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HotelManagement;
|
||||||
355
src/components/establishments/RestaurantPOS.tsx
Normal file
355
src/components/establishments/RestaurantPOS.tsx
Normal file
@@ -0,0 +1,355 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { Plus, Edit, Trash2, UtensilsCrossed, Table, ClipboardList } from 'lucide-react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||||
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Textarea } from '@/components/ui/textarea';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||||
|
import { Badge } from '@/components/ui/badge';
|
||||||
|
import { useToast } from '@/hooks/use-toast';
|
||||||
|
import { apiClient } from '@/services/adminApi';
|
||||||
|
|
||||||
|
const RestaurantPOS = () => {
|
||||||
|
const [establishments, setEstablishments] = useState<any[]>([]);
|
||||||
|
const [selectedEstablishment, setSelectedEstablishment] = useState<string>('');
|
||||||
|
const [menuItems, setMenuItems] = useState<any[]>([]);
|
||||||
|
const [tables, setTables] = useState<any[]>([]);
|
||||||
|
const [orders, setOrders] = useState<any[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const { toast } = useToast();
|
||||||
|
|
||||||
|
const [menuForm, setMenuForm] = useState({
|
||||||
|
name: '',
|
||||||
|
description: '',
|
||||||
|
category: '',
|
||||||
|
price: 0,
|
||||||
|
isAvailable: true
|
||||||
|
});
|
||||||
|
|
||||||
|
const [tableForm, setTableForm] = useState({
|
||||||
|
tableNumber: '',
|
||||||
|
capacity: 4,
|
||||||
|
status: 'available'
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
loadEstablishments();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedEstablishment) {
|
||||||
|
loadRestaurantData();
|
||||||
|
}
|
||||||
|
}, [selectedEstablishment]);
|
||||||
|
|
||||||
|
const loadEstablishments = async () => {
|
||||||
|
try {
|
||||||
|
const response = await apiClient.get('/commerce/establishments?type=restaurant');
|
||||||
|
setEstablishments(Array.isArray(response) ? response : (response as any)?.establishments || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading establishments:', error);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const loadRestaurantData = async () => {
|
||||||
|
if (!selectedEstablishment) return;
|
||||||
|
setLoading(true);
|
||||||
|
try {
|
||||||
|
const [menuData, tablesData, ordersData] = await Promise.all([
|
||||||
|
apiClient.get(`/restaurant/establishments/${selectedEstablishment}/menu`),
|
||||||
|
apiClient.get(`/restaurant/establishments/${selectedEstablishment}/tables`),
|
||||||
|
apiClient.get(`/restaurant/establishments/${selectedEstablishment}/orders`)
|
||||||
|
]);
|
||||||
|
|
||||||
|
setMenuItems(Array.isArray(menuData) ? menuData : (menuData as any)?.items || []);
|
||||||
|
setTables(Array.isArray(tablesData) ? tablesData : (tablesData as any)?.tables || []);
|
||||||
|
setOrders(Array.isArray(ordersData) ? ordersData : (ordersData as any)?.orders || []);
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error loading restaurant data:', error);
|
||||||
|
} finally {
|
||||||
|
setLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateMenuItem = async () => {
|
||||||
|
try {
|
||||||
|
await apiClient.post('/restaurant/menu-items', {
|
||||||
|
...menuForm,
|
||||||
|
establishmentId: parseInt(selectedEstablishment)
|
||||||
|
});
|
||||||
|
toast({ title: 'Éxito', description: 'Ítem de menú creado' });
|
||||||
|
setMenuForm({ name: '', description: '', category: '', price: 0, isAvailable: true });
|
||||||
|
loadRestaurantData();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({ title: 'Error', description: error?.message || 'No se pudo crear el ítem', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDeleteMenuItem = async (id: number) => {
|
||||||
|
try {
|
||||||
|
await apiClient.delete(`/restaurant/menu-items/${id}`);
|
||||||
|
toast({ title: 'Éxito', description: 'Ítem eliminado' });
|
||||||
|
loadRestaurantData();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo eliminar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleCreateTable = async () => {
|
||||||
|
try {
|
||||||
|
await apiClient.post('/restaurant/tables', {
|
||||||
|
...tableForm,
|
||||||
|
establishmentId: parseInt(selectedEstablishment)
|
||||||
|
});
|
||||||
|
toast({ title: 'Éxito', description: 'Mesa creada' });
|
||||||
|
setTableForm({ tableNumber: '', capacity: 4, status: 'available' });
|
||||||
|
loadRestaurantData();
|
||||||
|
} catch (error: any) {
|
||||||
|
toast({ title: 'Error', description: error?.message || 'No se pudo crear la mesa', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateTableStatus = async (tableId: number, status: string) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/restaurant/tables/${tableId}/status`, { status });
|
||||||
|
toast({ title: 'Éxito', description: 'Estado actualizado' });
|
||||||
|
loadRestaurantData();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUpdateOrderStatus = async (orderId: number, status: string) => {
|
||||||
|
try {
|
||||||
|
await apiClient.patch(`/restaurant/orders/${orderId}/status`, { status });
|
||||||
|
toast({ title: 'Éxito', description: 'Orden actualizada' });
|
||||||
|
loadRestaurantData();
|
||||||
|
} catch (error) {
|
||||||
|
toast({ title: 'Error', description: 'No se pudo actualizar', variant: 'destructive' });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<Select value={selectedEstablishment} onValueChange={setSelectedEstablishment}>
|
||||||
|
<SelectTrigger className="w-64">
|
||||||
|
<SelectValue placeholder="Selecciona un restaurante" />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
{establishments.map((est) => (
|
||||||
|
<SelectItem key={est.id} value={est.id.toString()}>
|
||||||
|
{est.name}
|
||||||
|
</SelectItem>
|
||||||
|
))}
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{selectedEstablishment && (
|
||||||
|
<Tabs defaultValue="menu" className="w-full">
|
||||||
|
<TabsList className="grid w-full grid-cols-3">
|
||||||
|
<TabsTrigger value="menu">Menú</TabsTrigger>
|
||||||
|
<TabsTrigger value="tables">Mesas</TabsTrigger>
|
||||||
|
<TabsTrigger value="orders">Órdenes</TabsTrigger>
|
||||||
|
</TabsList>
|
||||||
|
|
||||||
|
<TabsContent value="menu" className="space-y-4">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Nuevo Ítem
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Agregar Ítem al Menú</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Nombre</Label>
|
||||||
|
<Input
|
||||||
|
value={menuForm.name}
|
||||||
|
onChange={(e) => setMenuForm({ ...menuForm, name: e.target.value })}
|
||||||
|
placeholder="Nombre del plato"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Descripción</Label>
|
||||||
|
<Textarea
|
||||||
|
value={menuForm.description}
|
||||||
|
onChange={(e) => setMenuForm({ ...menuForm, description: e.target.value })}
|
||||||
|
placeholder="Describe el plato..."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Categoría</Label>
|
||||||
|
<Input
|
||||||
|
value={menuForm.category}
|
||||||
|
onChange={(e) => setMenuForm({ ...menuForm, category: e.target.value })}
|
||||||
|
placeholder="Ej: Entradas"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Precio</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={menuForm.price}
|
||||||
|
onChange={(e) => setMenuForm({ ...menuForm, price: parseFloat(e.target.value) })}
|
||||||
|
placeholder="0.00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleCreateMenuItem}>Crear Ítem</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{menuItems.map((item) => (
|
||||||
|
<Card key={item.id}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<CardTitle className="text-base font-medium">{item.name}</CardTitle>
|
||||||
|
<Button variant="ghost" size="sm" onClick={() => handleDeleteMenuItem(item.id)}>
|
||||||
|
<Trash2 className="w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">{item.description}</p>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<Badge variant="outline">{item.category}</Badge>
|
||||||
|
<span className="text-lg font-bold">${item.price}</span>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="tables" className="space-y-4">
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<Button>
|
||||||
|
<Plus className="w-4 h-4 mr-2" />
|
||||||
|
Nueva Mesa
|
||||||
|
</Button>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent>
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Agregar Mesa</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<div className="grid gap-4">
|
||||||
|
<div>
|
||||||
|
<Label>Número de Mesa</Label>
|
||||||
|
<Input
|
||||||
|
value={tableForm.tableNumber}
|
||||||
|
onChange={(e) => setTableForm({ ...tableForm, tableNumber: e.target.value })}
|
||||||
|
placeholder="Ej: 1, A1, etc."
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Label>Capacidad</Label>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
value={tableForm.capacity}
|
||||||
|
onChange={(e) => setTableForm({ ...tableForm, capacity: parseInt(e.target.value) })}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button onClick={handleCreateTable}>Crear Mesa</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid gap-4 md:grid-cols-3 lg:grid-cols-4">
|
||||||
|
{tables.map((table) => (
|
||||||
|
<Card key={table.id}>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center justify-between">
|
||||||
|
<span>Mesa {table.tableNumber}</span>
|
||||||
|
<Table className="w-5 h-5" />
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<p className="text-sm text-muted-foreground mb-2">
|
||||||
|
Capacidad: {table.capacity} personas
|
||||||
|
</p>
|
||||||
|
<Select
|
||||||
|
value={table.status}
|
||||||
|
onValueChange={(value) => handleUpdateTableStatus(table.id, value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger>
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="available">Disponible</SelectItem>
|
||||||
|
<SelectItem value="occupied">Ocupada</SelectItem>
|
||||||
|
<SelectItem value="reserved">Reservada</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="orders" className="space-y-4">
|
||||||
|
<div className="grid gap-4">
|
||||||
|
{orders.map((order) => (
|
||||||
|
<Card key={order.id}>
|
||||||
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||||
|
<div className="flex items-center space-x-4">
|
||||||
|
<ClipboardList className="w-8 h-8 text-primary" />
|
||||||
|
<div>
|
||||||
|
<CardTitle>Orden #{order.id}</CardTitle>
|
||||||
|
<p className="text-sm text-muted-foreground">Mesa {order.tableNumber}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-lg font-bold">${order.total?.toFixed(2)}</span>
|
||||||
|
<Select
|
||||||
|
value={order.status}
|
||||||
|
onValueChange={(value) => handleUpdateOrderStatus(order.id, value)}
|
||||||
|
>
|
||||||
|
<SelectTrigger className="w-32">
|
||||||
|
<SelectValue />
|
||||||
|
</SelectTrigger>
|
||||||
|
<SelectContent>
|
||||||
|
<SelectItem value="pending">Pendiente</SelectItem>
|
||||||
|
<SelectItem value="preparing">Preparando</SelectItem>
|
||||||
|
<SelectItem value="ready">Lista</SelectItem>
|
||||||
|
<SelectItem value="delivered">Entregada</SelectItem>
|
||||||
|
<SelectItem value="paid">Pagada</SelectItem>
|
||||||
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<div className="space-y-1">
|
||||||
|
{order.items?.map((item: any, idx: number) => (
|
||||||
|
<div key={idx} className="flex justify-between text-sm">
|
||||||
|
<span>{item.quantity}x {item.menuItem?.name}</span>
|
||||||
|
<span>${(item.quantity * item.price).toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</TabsContent>
|
||||||
|
</Tabs>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RestaurantPOS;
|
||||||
@@ -1,9 +1,10 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||||
import BusinessList from '@/components/establishments/BusinessList';
|
import EstablishmentsList from '@/components/establishments/EstablishmentsList';
|
||||||
import BusinessCategories from '@/components/establishments/BusinessCategories';
|
import RestaurantPOS from '@/components/establishments/RestaurantPOS';
|
||||||
|
import HotelManagement from '@/components/establishments/HotelManagement';
|
||||||
|
import CommerceReservations from '@/components/establishments/CommerceReservations';
|
||||||
import BusinessAnalytics from '@/components/establishments/BusinessAnalytics';
|
import BusinessAnalytics from '@/components/establishments/BusinessAnalytics';
|
||||||
import BusinessVerification from '@/components/establishments/BusinessVerification';
|
|
||||||
import { Store } from 'lucide-react';
|
import { Store } from 'lucide-react';
|
||||||
|
|
||||||
const Establishments = () => {
|
const Establishments = () => {
|
||||||
@@ -21,23 +22,28 @@ const Establishments = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
<Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
|
||||||
<TabsList className="grid w-full grid-cols-4 lg:w-auto">
|
<TabsList className="grid w-full grid-cols-5 lg:w-auto">
|
||||||
<TabsTrigger value="list">Comercios</TabsTrigger>
|
<TabsTrigger value="list">Establecimientos</TabsTrigger>
|
||||||
<TabsTrigger value="categories">Categorías</TabsTrigger>
|
<TabsTrigger value="restaurant">Restaurante POS</TabsTrigger>
|
||||||
<TabsTrigger value="verification">Verificación</TabsTrigger>
|
<TabsTrigger value="hotel">Hotel</TabsTrigger>
|
||||||
|
<TabsTrigger value="reservations">Reservaciones</TabsTrigger>
|
||||||
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
<TabsTrigger value="analytics">Analytics</TabsTrigger>
|
||||||
</TabsList>
|
</TabsList>
|
||||||
|
|
||||||
<TabsContent value="list">
|
<TabsContent value="list">
|
||||||
<BusinessList />
|
<EstablishmentsList />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="categories">
|
<TabsContent value="restaurant">
|
||||||
<BusinessCategories />
|
<RestaurantPOS />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="verification">
|
<TabsContent value="hotel">
|
||||||
<BusinessVerification />
|
<HotelManagement />
|
||||||
|
</TabsContent>
|
||||||
|
|
||||||
|
<TabsContent value="reservations">
|
||||||
|
<CommerceReservations />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
|
|
||||||
<TabsContent value="analytics">
|
<TabsContent value="analytics">
|
||||||
|
|||||||
Reference in New Issue
Block a user