'use client' import { useState, useEffect, useRef } from 'react' import Link from 'next/link' import api from '@/lib/api' import BarcodeLabel from '@/components/BarcodeLabel' import { PrinterIcon, DownloadIcon } from '@/components/Icons' interface Item { id: number sku: string name: string category: string | null unit: string active: boolean } export default function EtiquetasPage() { const [items, setItems] = useState([]) const [categories, setCategories] = useState([]) const [selectedCategory, setSelectedCategory] = useState('') const [loading, setLoading] = useState(false) const [selectedItems, setSelectedItems] = useState>(new Set()) const printRef = useRef(null) useEffect(() => { loadCategories() }, []) useEffect(() => { loadItems() }, [selectedCategory]) const loadCategories = async () => { try { const response = await api.get('/items/categories/list') setCategories(response.data) } catch (error) { console.error('Error loading categories:', error) } } const loadItems = async () => { setLoading(true) try { const params: any = { activeOnly: 'true' } if (selectedCategory) { params.category = selectedCategory } const response = await api.get('/items', { params }) setItems(response.data) // Seleccionar todos por defecto setSelectedItems(new Set(response.data.map((item: Item) => item.id))) } catch (error) { console.error('Error loading items:', error) } finally { setLoading(false) } } const toggleItem = (itemId: number) => { const newSelected = new Set(selectedItems) if (newSelected.has(itemId)) { newSelected.delete(itemId) } else { newSelected.add(itemId) } setSelectedItems(newSelected) } const selectAll = () => { setSelectedItems(new Set(items.map((item) => item.id))) } const deselectAll = () => { setSelectedItems(new Set()) } const handlePrint = () => { if (selectedItems.size === 0) { alert('Por favor, seleccione al menos un artículo para imprimir') return } const printWindow = window.open('', '_blank') if (!printWindow) return const selectedItemsData = items.filter((item) => selectedItems.has(item.id)) printWindow.document.write(` Etiquetas de Códigos de Barras ${selectedItemsData .map( (item) => `
SISTEMA DE INVENTARIO
${item.name}
${item.category ? `
Categoría: ${item.category}
` : ''}
SKU: ${item.sku}
${item.unit ? `
Unidad: ${item.unit}
` : ''}
`, ) .join('')} `) printWindow.document.close() // Wait for barcodes to render, then print setTimeout(() => { printWindow.print() }, 500) } const filteredItems = items.filter((item) => selectedItems.has(item.id)) return (
{/* Header */}

Etiquetas de Códigos de Barras

Genere e imprima etiquetas de códigos de barras para artículos

← Volver
{/* Filters */}
{/* Items List */}

Artículos {selectedCategory && `- ${selectedCategory}`}

{selectedItems.size} de {items.length} seleccionados
{loading ? (
Cargando artículos...
) : items.length === 0 ? (
No hay artículos {selectedCategory ? `en la categoría "${selectedCategory}"` : 'disponibles'}
) : (
{items.map((item) => ( ))}
)}
{/* Preview and Print */} {filteredItems.length > 0 && (

Vista Previa ({filteredItems.length} {filteredItems.length === 1 ? 'etiqueta' : 'etiquetas'})

{filteredItems.map((item) => ( ))}
)}
) }