356 lines
14 KiB
TypeScript
356 lines
14 KiB
TypeScript
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;
|