import React from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Badge } from "@/components/ui/badge"; import { Checkbox } from "@/components/ui/checkbox"; import { Package, CheckCircle2, Scale, Printer, Search, AlertCircle, Truck, MapPin } from "lucide-react"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { usePicking } from "@/hooks/usePicking"; import { toast } from "sonner"; export default function Picking() { const { selectedCompany, shippingCompanies, availableSales, filteredOrders, searchTerm, selectedTransport, selectedOrder, actualWeight, isCreatingPicking, setSearchTerm, setSelectedTransport, setSelectedOrder, setActualWeight, createPickingOrder, toggleItem, validateWeight, } = usePicking(); const handleValidateWeight = async () => { const result = await validateWeight(); if (result.valid) { toast.success(result.message); } else { toast.error(result.message); } }; const handlePrintTicket = (order) => { const ticketContent = ` ================================ ORDEN DE PICKING ================================ N° Venta: ${order.sale_number} Cliente: ${order.customer_name} Fecha: ${new Date().toLocaleString('es-CL')} ================================ PRODUCTOS A RECOGER: ${order.items.map(item => ` [ ] ${item.name} SKU: ${item.sku} Cantidad: ${item.quantity} Peso: ${item.weight_kg} kg `).join('\n')} ================================ Peso Total: ${order.total_weight_kg.toFixed(2)} kg Embalaje: +${order.packaging_percentage}% Peso Esperado: ${order.expected_weight_kg.toFixed(2)} kg ================================ Bodegero: _________________ Hora Inicio: _____________ Hora Fin: ________________ ================================ `; const printWindow = window.open('', '', 'width=300,height=600'); printWindow.document.write(` 
${ticketContent}
`); printWindow.document.close(); }; const getStatusBadge = (status) => { const badges = { pending: Pendiente, picking: En Picking, validated: Validado, dispatched: Despachado }; return badges[status] || badges.pending; }; return (

Picking - Preparación de Pedidos

{selectedCompany?.name}

{/* Search and Filter */}
setSearchTerm(e.target.value)} className="pl-10" />
{/* Available Sales to Create Picking */} {availableSales.length > 0 && ( Ventas Pendientes de Picking ({availableSales.length})
{availableSales.slice(0, 5).map((sale) => (

Venta #{sale.sale_number}

{sale.customer_name}

))}
)} {/* Picking Orders */}
{filteredOrders.map((order, orderIndex) => (
Venta #{order.sale_number}

{order.customer_name}

{/* Shipping Info */}
{order.shipping_info?.shipping_type === 'pickup' ? 'Retiro en Tienda' : order.shipping_info?.shipping_company_name || 'Sin Transporte'}
{order.shipping_info?.shipping_type === 'delivery' && order.shipping_info?.shipping_address && (
{order.shipping_info.shipping_address.street_address}, {order.shipping_info.shipping_address.comuna}, {order.shipping_info.shipping_address.region}
)}
{getStatusBadge(order.status)}
{/* Items Checklist */}
{order.items.map((item, itemIndex) => (
toggleItem(orderIndex, itemIndex)} />

{item.name}

SKU: {item.sku} | Cant: {item.quantity} | {item.weight_kg}kg

{item.picked && }
))}
{/* Weight Info */}
Peso Productos: {order.total_weight_kg.toFixed(2)} kg
Embalaje (+{order.packaging_percentage}%): {(order.expected_weight_kg - order.total_weight_kg).toFixed(2)} kg
Peso Esperado: {order.expected_weight_kg.toFixed(2)} kg
{/* Weight Validation */} {order.items.every(item => item.picked) && !order.weight_validated && (
{ setSelectedOrder(order); setActualWeight(e.target.value); }} />
)} {/* Validated */} {order.weight_validated && (

Peso Validado: {order.actual_weight_kg} kg

Diferencia: {(order.actual_weight_kg - order.expected_weight_kg).toFixed(2)} kg

)} ))}
{filteredOrders.length === 0 && (

No hay órdenes de picking

 )}
); }