Refactor Commerce module based on API

src/components/establishments/CommerceReservations.tsx

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

src/components/establishments/EstablishmentsList.tsx

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

src/components/establishments/HotelManagement.tsx

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

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;