${t?.shelfLabelTitle ?? 'بطاقة رف'}

'use client'; import { useEffect, useRef, useState } from 'react'; import { Button } from '@/components/ui/button'; import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog'; import { Printer } from 'lucide-react'; import type { Shelf, Warehouse } from '@/lib/types'; interface ShelfLabelPrintProps { shelf: Shelf; warehouse: Warehouse; t?: any; tGlobal?: any; /** When true renders only the icon button (no text) */ compact?: boolean; } export function ShelfLabelPrint({ shelf, warehouse, t, tGlobal, compact = false }: ShelfLabelPrintProps) { const [open, setOpen] = useState(false); const canvasRef = useRef(null); const [qrDataUrl, setQrDataUrl] = useState(''); // Generate QR code from shelf reference whenever dialog opens useEffect(() => { if (!open) return; let cancelled = false; const generate = async () => { try { const QRCode = (await import('qrcode')).default; const data = [ warehouse.warehouseNumber || warehouse.id, shelf.shelfNumber || shelf.id, shelf.name, ] .filter(Boolean) .join('|'); const url = await QRCode.toDataURL(data, { width: 220, margin: 1, color: { dark: '#000000', light: '#ffffff' }, }); if (!cancelled) setQrDataUrl(url); } catch { if (!cancelled) setQrDataUrl(''); } }; generate(); return () => { cancelled = true; }; }, [open, shelf.shelfNumber, shelf.id, shelf.name, warehouse.warehouseNumber, warehouse.id]); const handlePrint = () => { const printWindow = window.open('', '_blank', 'width=400,height=500'); if (!printWindow) return; const labelHtml = ` ${t?.shelfLabelTitle ?? 'بطاقة رف'}

${escapeHtml(warehouse.name)}

${escapeHtml(warehouse.warehouseNumber || warehouse.id)}

${warehouse.location ? `

${escapeHtml(warehouse.location)}

` : ''}

${escapeHtml(shelf.name)}

${escapeHtml(shelf.shelfNumber || shelf.id)}

${shelf.notes ? `

${escapeHtml(shelf.notes)}

` : ''} ${qrDataUrl ? `

${escapeHtml(shelf.shelfNumber || shelf.id)}

` : ''}