@apptimate/ui 5.9.0 → 6.0.0

package/src/common-components/print/TransactionPrintSelector.tsx

@@ -0,0 +1,673 @@
+"use client";
+
+import { getTemplateLines, lookupPrintableTemplates, getItem } from "@apptimate/core-lib";
+import { Button, EmptyState, Modal, Input } from "../..";
+import { CheckCircle2, FileText, Printer, Share2 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import toast from "react-hot-toast";
+import { TemplateRenderer } from "./TemplateRenderer";
+
+interface Props {
+  isOpen: boolean;
+  onClose: () => void;
+  transactionType: string;
+  entityId: number | null;
+  stockContext?: any;
+  batchEntitiesData?: any[];
+  filterCode?: string;
+  autoPrintTemplateId?: number | null;
+}
+
+export default function TransactionPrintSelector({ isOpen, onClose, transactionType, entityId, stockContext, batchEntitiesData, filterCode, autoPrintTemplateId }: Props) {
+  const [templates, setTemplates] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [selectedTemplateId, setSelectedTemplateId] = useState<number | null>(null);
+  const [quantity, setQuantity] = useState(1);
+  const [entityData, setEntityData] = useState<any>(null);
+  const [isPrinting, setIsPrinting] = useState(false);
+  const [printLines, setPrintLines] = useState<any[]>([]);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const hiddenPrintRef = useRef<HTMLDivElement>(null);
+  const [autoPrintTriggered, setAutoPrintTriggered] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      // Reset state on close
+      setTemplates([]);
+      setEntityData(null);
+      setSelectedTemplateId(null);
+      setIsPrinting(false);
+      setAutoPrintTriggered(false);
+      return;
+    }
+    if (!entityId && !batchEntitiesData) return;
+
+    const loadData = async () => {
+      setIsLoading(true);
+      try {
+        // Fetch templates directly
+        const tplRes = await lookupPrintableTemplates(transactionType);
+        let tpls: any[] = [];
+        if (tplRes.is_success) {
+          // map to format expected below, or just set it
+          let results = tplRes.result?.data || tplRes.result || [];
+          if (filterCode) {
+            const originalTemplate = results.find((t: any) => t.code === filterCode);
+            const originalId = originalTemplate?.id;
+            
+            results = results.filter((t: any) => 
+              t.code === filterCode || 
+              t.code.startsWith(`${filterCode}_copy`) ||
+              (originalId && t.parent_id === originalId)
+            );
+          }
+          tpls = results.map((t: any) => ({
+            id: t.id,
+            printable_template_id: t.id,
+            is_primary: t.is_default || false,
+            transaction_type: transactionType,
+            printable_template: t
+          }));
+        }
+
+        setTemplates(tpls);
+
+        if (tpls.length > 0) {
+          // Auto-select primary or first
+          const primary = tpls.find((t: any) => t.is_primary) || tpls[0];
+          setSelectedTemplateId(primary.printable_template_id);
+          // Default to template grid size (e.g. 2 for 2-column roll) to fill the row
+          setQuantity(Number(primary.printable_template?.grid) || 1);
+        }
+
+        if (batchEntitiesData && batchEntitiesData.length > 0) {
+          setEntityData(batchEntitiesData);
+          return;
+        }
+
+        let entRes;
+        switch (transactionType) {
+          case 'item':
+          case 'barcode_label':
+            entRes = await getItem(entityId as number);
+            break;
+          // Add other inventory types here in the future
+          default:
+            entRes = await getItem(entityId as number);
+        }
+
+        if (entRes && entRes.is_success) {
+          let data = entRes.result;
+
+          // Alias generic price field if missing
+          data.price = data.price || data.selling_price || data.retail_price || data.cost_price || "";
+
+          if (stockContext) {
+            const unit = stockContext.stock_unit || {};
+            const batch = unit.batch || {};
+            data = {
+              ...data,
+              stock_unit_id: unit.id,
+              serial_number: unit.serial_number,
+              batch_number: batch.batch_number,
+              code: unit.serial_number || batch.batch_number || data.code, // Override code so barcode prints correct badge
+              cost_price: unit.cost_price || batch.cost_per_unit,
+              price: unit.selling_price || unit.retail_price || unit.price || batch.cost_per_unit || data.price || "", // Badge specific price
+              stock_qty: stockContext.qty_on_hand,
+              stock_weight: stockContext.weight_on_hand,
+              warehouse: stockContext.warehouse,
+              purity: unit.purity_percentage ? `${unit.purity_percentage}%` : (unit.primary_purity?.purity_percentage ? `${unit.primary_purity.purity_percentage}%` : (data.purity_id ? `${data.purity_id}%` : "")),
+              ...unit
+            };
+          }
+          setEntityData(data);
+        }
+      } catch (err: any) {
+        toast.error("Failed to load print configuration");
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    loadData();
+  }, [isOpen, transactionType, entityId]);
+
+  useEffect(() => {
+    if (
+      autoPrintTemplateId &&
+      !autoPrintTriggered &&
+      !isLoading &&
+      entityData &&
+      templates.length > 0 &&
+      selectedTemplateId === autoPrintTemplateId
+    ) {
+      setAutoPrintTriggered(true);
+      handlePrint();
+    } else if (
+      autoPrintTemplateId &&
+      !autoPrintTriggered &&
+      !isLoading &&
+      entityData &&
+      templates.length > 0 &&
+      selectedTemplateId !== autoPrintTemplateId
+    ) {
+      const templateExists = templates.find(t => t.printable_template_id === autoPrintTemplateId);
+      if (templateExists) {
+        setSelectedTemplateId(autoPrintTemplateId);
+        setQuantity(Number(templateExists.printable_template?.grid) || 1);
+      } else {
+        toast.error("Assigned print template not found.");
+        onClose();
+      }
+    }
+  }, [autoPrintTemplateId, autoPrintTriggered, isLoading, entityData, templates, selectedTemplateId]);
+
+  const handlePrint = async () => {
+    if (!selectedTemplateId || !entityData) {
+      toast.error("Please select a template and ensure data is loaded.");
+      return;
+    }
+
+    setIsPrinting(true);
+
+    const template = templates.find(t => t.printable_template_id === selectedTemplateId)?.printable_template;
+    const templateName = template?.name || 'Document';
+
+    try {
+      // Fetch lines
+      const linesRes = await getTemplateLines(selectedTemplateId);
+      if (!linesRes.is_success) {
+        toast.error("Failed to load template layout");
+        setIsPrinting(false);
+        return;
+      }
+      const lines = linesRes.result || linesRes.result?.data || [];
+
+      setPrintLines(lines);
+
+      // Wait for React to render the hidden component and react-barcode to mount
+      setTimeout(() => {
+        if (!hiddenPrintRef.current) {
+          setIsPrinting(false);
+          return;
+        }
+
+        const reactHtml = hiddenPrintRef.current.innerHTML;
+
+        let generatedHtml = reactHtml;
+        const cfg = template.content_config || {};
+        const mTop = cfg.margins?.top !== undefined ? cfg.margins.top : (template.margin_mm !== undefined && template.margin_mm !== null && template.margin_mm !== "" ? template.margin_mm : 15);
+        const mBottom = cfg.margins?.bottom !== undefined ? cfg.margins.bottom : (template.margin_mm !== undefined && template.margin_mm !== null && template.margin_mm !== "" ? template.margin_mm : 15);
+        const mLeft = cfg.margins?.left !== undefined ? cfg.margins.left : (template.margin_mm !== undefined && template.margin_mm !== null && template.margin_mm !== "" ? template.margin_mm : 15);
+        const mRight = cfg.margins?.right !== undefined ? cfg.margins.right : (template.margin_mm !== undefined && template.margin_mm !== null && template.margin_mm !== "" ? template.margin_mm : 15);
+
+        const isReceipt = Number(template.width_mm) === 80 || Number(template.width_mm) === 58 || template.is_default === true || template.is_default === 1 || template.type === 'receipt' || template.type === 'barcode' || transactionType === 'barcode_label';
+        const pageWidth = template.width_mm || template.page_width_mm || 210;
+        const effHeight = parseFloat(template.height_mm || template.page_height_mm) || 0;
+        let pageHeight = effHeight > 0 ? effHeight : 297;
+
+        if (isReceipt && effHeight <= 0) {
+          try {
+            const tempDiv = document.createElement("div");
+            tempDiv.style.width = `${pageWidth}mm`;
+            tempDiv.style.padding = `${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm`;
+            tempDiv.style.boxSizing = "border-box";
+            tempDiv.style.position = "absolute";
+            tempDiv.style.visibility = "hidden";
+            tempDiv.style.top = "-9999px";
+            // Use a default styling context similar to the print iframe
+            tempDiv.style.fontFamily = "'Inter', sans-serif";
+            tempDiv.innerHTML = reactHtml;
+            document.body.appendChild(tempDiv);
+
+            const pxHeight = tempDiv.offsetHeight;
+            document.body.removeChild(tempDiv);
+
+            // Convert px to mm (approx 3.78 pixels per mm at 96 DPI)
+            // Add buffer for receipts, but no buffer for barcodes to avoid blank space
+            const bufferMm = (template.type === 'barcode' || transactionType === 'barcode_label') ? 0 : 5;
+            pageHeight = Math.ceil(pxHeight / 3.78) + bufferMm;
+          } catch (e) {
+            pageHeight = 297; // Fallback
+          }
+        }
+
+        let pageStyle = isReceipt
+          ? `@page { margin: 0mm; size: ${pageWidth}mm ${pageHeight}mm; } body { width: ${pageWidth}mm; margin: 0; padding: ${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm; box-sizing: border-box; }`
+          : `@page { size: ${pageWidth}mm ${pageHeight}mm; margin: 0mm; } body { margin: 0; }`;
+
+        const gridCols = Number(template.grid) || 1;
+        const gapX = template.label_gap_x_mm || 0;
+        const gapY = template.label_gap_y_mm || 0;
+        // width_mm = individual label width; compute total sheet width from it
+        const colWidth = template.width_mm || template.page_width_mm || 210;
+        const totalWidth = gridCols > 1 ? (colWidth * gridCols) + (gapX * (gridCols - 1)) : colWidth;
+
+        if (template.type === 'barcode' || transactionType === 'barcode_label' || gridCols > 1) {
+          let labelsHtml = "";
+          if (Array.isArray(entityData)) {
+            const batchItems = hiddenPrintRef.current.querySelectorAll('.batch-print-item');
+            batchItems.forEach((itemNode) => {
+              const qty = parseInt(itemNode.getAttribute('data-qty') || "1", 10);
+              const itemHtml = itemNode.innerHTML;
+              labelsHtml += Array(qty).fill(`<div style="width:100%;min-width:0;max-width:100%;height:${pageHeight}mm;box-sizing:border-box;overflow:hidden;page-break-inside:avoid;padding:${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm;">${itemHtml}</div>`).join("");
+            });
+          } else {
+            labelsHtml = Array(quantity).fill(`<div style="width:100%;min-width:0;max-width:100%;height:${pageHeight}mm;box-sizing:border-box;overflow:hidden;page-break-inside:avoid;padding:${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm;">${reactHtml}</div>`).join("");
+          }
+
+          generatedHtml = `
+          <div style="display: grid; grid-template-columns: repeat(${gridCols > 1 ? gridCols : 'auto-fill'}, ${colWidth}mm); gap: ${gapY}mm ${gapX}mm; justify-content: center; justify-items: center; align-content: start;">
+            ${labelsHtml}
+          </div>
+        `;
+          // For barcode rolls, set exact label size. For sheets, set full sheet size.
+          const finalPrintWidth = template.page_width_mm ? template.page_width_mm : totalWidth;
+          const finalPrintHeight = template.page_height_mm ? template.page_height_mm : pageHeight;
+          pageStyle = `@page { size: ${finalPrintWidth}mm ${finalPrintHeight}mm; margin: 0mm; } body { margin: 0; }`;
+        }
+
+        const finalHtmlContent = (isReceipt || template.type === 'barcode' || transactionType === 'barcode_label' || gridCols > 1) ? generatedHtml : `
+        <table style="width: 100%; border-collapse: collapse; border: none;">
+          <thead style="display: table-header-group;">
+            <tr><td style="height: ${mTop}mm; padding: 0; border: none;"></td></tr>
+          </thead>
+          <tfoot style="display: table-footer-group;">
+            <tr><td style="height: ${mBottom}mm; padding: 0; border: none;"></td></tr>
+          </tfoot>
+          <tbody>
+            <tr><td style="padding: 0 ${mRight}mm 0 ${mLeft}mm; border: none;">
+              ${generatedHtml}
+            </td></tr>
+          </tbody>
+        </table>
+      `;
+
+        const htmlContent = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <title>Print ${templateName}</title>
+          <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');
+            body { 
+              margin: 0; 
+              padding: 0; 
+              background: #fff;
+              -webkit-print-color-adjust: exact !important; 
+              print-color-adjust: exact !important; 
+            }
+            * { box-sizing: border-box; }
+            ${pageStyle}
+          </style>
+        </head>
+        <body>
+          ${finalHtmlContent}
+        </body>
+        </html>
+      `;
+
+        if (iframeRef.current) {
+          const iframeDoc = iframeRef.current.contentWindow?.document;
+          if (iframeDoc) {
+            iframeDoc.open();
+            iframeDoc.write(htmlContent);
+            iframeDoc.close();
+
+            setTimeout(() => {
+              iframeRef.current?.contentWindow?.focus();
+              iframeRef.current?.contentWindow?.print();
+              setIsPrinting(false);
+              setPrintLines([]);
+              onClose();
+            }, 800);
+          }
+        }
+      }, 100);
+    } catch (e: any) {
+      toast.error("Failed to print template");
+      setIsPrinting(false);
+      setPrintLines([]);
+    }
+  };
+
+  const handleShare = async () => {
+    if (!selectedTemplateId || !entityData) {
+      toast.error("Please select a template and ensure data is loaded.");
+      return;
+    }
+
+    const template = templates.find(t => t.printable_template_id === selectedTemplateId)?.printable_template;
+    if (!template) {
+      toast.error("Template not found.");
+      return;
+    }
+
+    let title = "";
+    switch (transactionType) {
+      case 'item':
+      case 'barcode_label':
+        title = `Item_${entityData.sku || entityData.name}`;
+        break;
+      default:
+        title = `Document_${entityId}`;
+    }
+
+    setIsPrinting(true);
+
+    try {
+      // Fetch template layout lines
+      const linesRes = await getTemplateLines(selectedTemplateId);
+      if (!linesRes.is_success) {
+        toast.error("Failed to load template layout");
+        setIsPrinting(false);
+        return;
+      }
+      const lines = linesRes.result || linesRes.result?.data || [];
+
+      setPrintLines(lines);
+
+      // Wait for React to render the hidden component and react-barcode to mount
+      setTimeout(async () => {
+        if (!hiddenPrintRef.current) {
+          setIsPrinting(false);
+          return;
+        }
+
+        const reactHtml = hiddenPrintRef.current.innerHTML;
+
+        try {
+          const marginMm = template.margin_mm !== undefined && template.margin_mm !== null && template.margin_mm !== "" ? template.margin_mm : 15;
+          const cfg = template.content_config || {};
+          const mTop = cfg.margins?.top !== undefined ? cfg.margins.top : marginMm;
+          const mBottom = cfg.margins?.bottom !== undefined ? cfg.margins.bottom : marginMm;
+          const mLeft = cfg.margins?.left !== undefined ? cfg.margins.left : marginMm;
+          const mRight = cfg.margins?.right !== undefined ? cfg.margins.right : marginMm;
+
+          const isReceipt = Number(template.width_mm) === 80 || Number(template.width_mm) === 58 || template.is_default == true || template.is_default === 1 || template.type === 'receipt' || template.type === 'barcode' || transactionType === 'barcode_label';
+          const pageWidth = template.width_mm || template.page_width_mm || 210;
+          const effHeight = parseFloat(template.height_mm || template.page_height_mm) || 0;
+          let pageHeight = effHeight > 0 ? effHeight : 297;
+
+          if (isReceipt && effHeight <= 0) {
+            try {
+              const tempDiv = document.createElement("div");
+              tempDiv.style.width = `${pageWidth}mm`;
+              tempDiv.style.padding = `${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm`;
+              tempDiv.style.boxSizing = "border-box";
+              tempDiv.style.position = "absolute";
+              tempDiv.style.visibility = "hidden";
+              tempDiv.style.top = "-9999px";
+              tempDiv.style.fontFamily = "'Inter', sans-serif";
+              tempDiv.innerHTML = reactHtml;
+              document.body.appendChild(tempDiv);
+
+              const pxHeight = tempDiv.offsetHeight;
+              document.body.removeChild(tempDiv);
+
+              const bufferMm = (template.type === 'barcode' || transactionType === 'barcode_label') ? 0 : 5;
+              pageHeight = Math.ceil(pxHeight / 3.78) + bufferMm;
+            } catch (e) {
+              pageHeight = 297;
+            }
+          }
+
+          let generatedHtml = reactHtml;
+          const gridCols = Number(template.grid) || 1;
+          const gapX = template.label_gap_x_mm || 0;
+          const gapY = template.label_gap_y_mm || 0;
+          // width_mm = individual label width; compute total sheet width from it
+          const colWidth = template.width_mm || template.page_width_mm || 210;
+          const totalPageWidth = gridCols > 1 ? (colWidth * gridCols) + (gapX * (gridCols - 1)) : colWidth;
+
+          if (template.type === 'barcode' || transactionType === 'barcode_label' || gridCols > 1) {
+            const labelsHtml = Array(quantity).fill(`<div style="width:100%;min-width:0;max-width:100%;height:${pageHeight}mm;box-sizing:border-box;overflow:hidden;page-break-inside:avoid;padding:${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm;">${reactHtml}</div>`).join("");
+            generatedHtml = `
+              <div style="display: grid; grid-template-columns: repeat(${gridCols > 1 ? gridCols : 'auto-fill'}, ${colWidth}mm); gap: ${gapY}mm ${gapX}mm; justify-content: center; justify-items: center; align-content: start;">
+                ${labelsHtml}
+              </div>
+            `;
+          }
+          const marginStr = (template.type === 'barcode' || transactionType === 'barcode_label' || gridCols > 1) ? '0' : `${mTop}mm ${mRight}mm ${mBottom}mm ${mLeft}mm`;
+
+          const finalHtmlContent = `
+        <div style="
+          width: ${totalPageWidth}mm; 
+          padding: ${marginStr}; 
+          background: #fff; 
+          box-sizing: border-box;
+          font-family: 'Inter', sans-serif;
+        ">
+          ${generatedHtml}
+        </div>
+      `;
+
+          const fullHtmlString = `
+        <!DOCTYPE html>
+        <html>
+        <head>
+          <style>
+            @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+            body { margin: 0; padding: 0; background: #fff; font-family: 'Inter', sans-serif; }
+            * { box-sizing: border-box; }
+          </style>
+        </head>
+        <body>
+          <div style="width: ${totalPageWidth}mm; padding: ${marginStr}; background: #fff; box-sizing: border-box;">
+            ${generatedHtml}
+          </div>
+        </body>
+        </html>
+      `;
+
+          // Dynamically import html2pdf to avoid SSR issues
+          const html2pdf = (await import('html2pdf.js')).default;
+
+          const finalPrintWidth = template.page_width_mm ? template.page_width_mm : totalPageWidth;
+          const finalPrintHeight = template.page_height_mm ? template.page_height_mm : pageHeight;
+
+          const opt = {
+            margin: 0,
+            filename: `${title}.pdf`,
+            image: { type: 'jpeg' as const, quality: 0.98 },
+            html2canvas: {
+              scale: 2,
+              useCORS: true,
+              scrollY: 0,
+              scrollX: 0,
+              backgroundColor: '#ffffff'
+            },
+            jsPDF: { unit: 'mm', format: [finalPrintWidth, finalPrintHeight] as [number, number], orientation: 'portrait' as const }
+          };
+
+          const pdfBlob = await html2pdf().set(opt).from(fullHtmlString).output('blob');
+
+          const file = new File([pdfBlob], `${title}.pdf`, { type: 'application/pdf' });
+
+          if (navigator.share) {
+            if (navigator.canShare && navigator.canShare({ files: [file] })) {
+              await navigator.share({
+                title: title,
+                text: `Please find the attached document for ${title}.`,
+                files: [file]
+              });
+              toast.success("Shared successfully");
+            } else {
+              // Fallback if device doesn't support file sharing
+              await navigator.share({
+                title: title,
+                text: `Sharing document details: ${title}. (Note: File sharing not supported on this device)`
+              });
+              toast.success("Shared successfully (without file)");
+            }
+          } else {
+            // Fallback: download the file if Share API is completely unavailable
+            const url = URL.createObjectURL(pdfBlob);
+            const a = document.createElement('a');
+            a.href = url;
+            a.download = `${title}.pdf`;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            setTimeout(() => URL.revokeObjectURL(url), 2000);
+            toast.success("Downloaded successfully (Share API not supported)");
+          }
+        } catch (err) {
+          console.error(err);
+          toast.error("Failed to generate and share document");
+        } finally {
+          setIsPrinting(false);
+          setPrintLines([]);
+          onClose();
+        }
+      }, 100);
+    } catch (err) {
+      console.error(err);
+      toast.error("Failed to initialize share");
+      setIsPrinting(false);
+      setPrintLines([]);
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} title="Print Document" size="md" zIndex={9999}>
+      <div className="flex flex-col gap-5 p-2">
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12">
+            <div className="w-6 h-6 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
+          </div>
+        ) : autoPrintTemplateId ? (
+          <div className="flex flex-col items-center justify-center py-10 gap-3">
+            <div className="w-8 h-8 border-2 border-primary-500 border-t-transparent rounded-full animate-spin" />
+            <p className="text-sm font-medium text-gray-500">Preparing to print...</p>
+          </div>
+        ) : templates.length === 0 ? (
+          <div className="flex flex-col items-center justify-center gap-3">
+            <EmptyState message="No print templates configured." />
+            <Button color="primary" variant="flat" onClick={() => window.location.href = '/jewelry/billing-templates'}>Configure Templates</Button>
+          </div>
+        ) : (
+          <>
+            <div>
+              <p className="text-[13px] text-gray-500 mb-4">
+                Select a template to print this {transactionType.replace('_', ' ')}.
+              </p>
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                {templates.map(tpl => {
+                  const isSelected = selectedTemplateId === tpl.printable_template_id;
+                  const templateInfo = tpl.printable_template || {};
+
+                  return (
+                    <div
+                      key={tpl.printable_template_id || tpl.id}
+                      onClick={() => {
+                        setSelectedTemplateId(tpl.printable_template_id);
+                        // Default to template grid size
+                        setQuantity(Number(templateInfo.grid) || 1);
+                      }}
+                      className={`relative cursor-pointer flex flex-col items-start gap-2 p-4 rounded-xl border-2 text-left transition-all hover:shadow-md ${isSelected
+                        ? "border-primary-500 bg-primary-50/60 shadow-sm"
+                        : "border-gray-200 bg-white hover:border-primary-300"
+                        }`}
+                    >
+                      {isSelected && (
+                        <div className="absolute top-3 right-3 text-primary-600">
+                          <CheckCircle2 size={16} className="fill-primary-100" />
+                        </div>
+                      )}
+                      <div className="flex items-center gap-3 w-full min-w-0">
+                        <div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${isSelected ? 'bg-primary-100 text-primary-600' : 'bg-gray-50 text-gray-400'}`}>
+                          <FileText size={18} />
+                        </div>
+                        <div className="flex-1 min-w-0 pr-6">
+                          <p className="text-[13px] font-bold text-gray-900 truncate">{templateInfo.name || 'Template'}</p>
+                          <p className="text-[11px] font-mono text-gray-500 truncate mt-0.5">{templateInfo.code || tpl.transaction_type}</p>
+                        </div>
+                      </div>
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+
+            {/* Quantity Input for Barcodes */}
+            {!Array.isArray(entityData) && (
+              <div className="pt-2">
+                <Input
+                  label="Number of Labels to Print"
+                  type="number"
+                  min={1}
+                  value={quantity.toString()}
+                  onChange={(e) => {
+                    const val = parseInt(e.target.value, 10);
+                    if (!isNaN(val) && val >= 1) {
+                      setQuantity(val);
+                    } else if (e.target.value === "") {
+                      setQuantity(1);
+                    }
+                  }}
+                  className="w-full"
+                />
+              </div>
+            )}
+
+            <div className="flex items-center justify-between pt-4 border-t border-gray-100 mt-2">
+              <Button
+                color="default"
+                variant="flat"
+                onClick={handleShare}
+                icon={<Share2 size={16} />}
+                isDisabled={!entityData}
+              >
+                Share
+              </Button>
+              <div className="flex gap-2">
+                <Button color="secondary" variant="flat" onClick={onClose}>Cancel</Button>
+                <Button
+                  color="primary"
+                  onClick={handlePrint}
+                  isDisabled={!selectedTemplateId || isPrinting || !entityData}
+                  icon={<Printer size={16} />}
+                >
+                  {isPrinting ? "Printing..." : "Print"}
+                </Button>
+              </div>
+            </div>
+          </>
+        )}
+      </div>
+
+      {/* Hidden iframe for printing */}
+      <iframe ref={iframeRef} className="hidden" title="print-frame" />
+
+      {/* Hidden container for rendering react-barcode and other DOM-dependent components */}
+      <div className="hidden">
+        <div ref={hiddenPrintRef}>
+          {isPrinting && printLines.length > 0 && entityData && (
+            Array.isArray(entityData) ? (
+              entityData.map((data: any, idx: number) => (
+                <div key={idx} className="batch-print-item" data-qty={data._print_qty || quantity}>
+                  <TemplateRenderer
+                    template={templates.find(t => t.printable_template_id === selectedTemplateId)?.printable_template}
+                    lines={printLines}
+                    entityData={data}
+                    noPadding={true}
+                  />
+                </div>
+              ))
+            ) : (
+              <TemplateRenderer
+                template={templates.find(t => t.printable_template_id === selectedTemplateId)?.printable_template}
+                lines={printLines}
+                entityData={entityData}
+                noPadding={true}
+              />
+            )
+          )}
+        </div>
+      </div>
+    </Modal>
+  );
+}

package/src/index.tsx

@@ -76,3 +76,5 @@ export { default as AttendanceTimesheets } from './common-components/attendance-
 export * from './common-components/attendance-shifts/AttendanceTimesheets';
 
 export * from "./base-components/ChartOfAccountPicker";
+export * from './common-components/print/TemplateRenderer';
+export { default as TransactionPrintSelector } from './common-components/print/TransactionPrintSelector';