Refactor Commerce module based on API

src/components/establishments/RestaurantPOS.tsx

@@ -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;