esvn-react-barcode-print 1.0.0

package/dist/index.js

@@ -0,0 +1,1865 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  ModalBarcodePrint: () => ModalBarcodePrint,
+  ModalPreviewPrint: () => ModalPreviewPrint,
+  PreviewPrint: () => PreviewPrint,
+  SettingPrint: () => SettingPrint,
+  executePrint: () => executePrint,
+  generateBarcodeHtml: () => generateBarcodeHtml,
+  generatePrintDocument: () => generatePrintDocument,
+  getOrganizationName: () => getOrganizationName,
+  getPaperSizeLabel: () => getPaperSizeLabel,
+  renderSingleLabelHtml: () => renderSingleLabelHtml
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/helpers/print-helper.ts
+var import_jsbarcode = __toESM(require("jsbarcode"));
+var import_qrcode_generator = __toESM(require("qrcode-generator"));
+var getOrganizationName = () => {
+  try {
+    const dataLocal = localStorage.getItem("organization");
+    const organization = JSON.parse(dataLocal && dataLocal !== "undefined" ? dataLocal : "null");
+    return (organization == null ? void 0 : organization.text) || (organization == null ? void 0 : organization.label) || (organization == null ? void 0 : organization.name) || "";
+  } catch (e) {
+    return "";
+  }
+};
+var generateBarcodeHtml = (value, printType, height = 24) => {
+  if (!value) {
+    value = "000000";
+  }
+  if (printType === 1) {
+    try {
+      const qr = (0, import_qrcode_generator.default)(0, "M");
+      qr.addData(value);
+      qr.make();
+      return `<div class="code-wrapper qr-wrapper">${qr.createSvgTag({ cellSize: 2, margin: 0, scalable: true })}</div>`;
+    } catch (e) {
+      return `<div style="font-size: 10px; text-align: center; word-break: break-word;">${value}</div>`;
+    }
+  }
+  try {
+    const len = value.length;
+    let barWidth = 1.3;
+    if (len <= 6) {
+      barWidth = 2.2;
+    } else if (len <= 10) {
+      barWidth = 1.7;
+    } else if (len <= 15) {
+      barWidth = 1.3;
+    } else if (len <= 20) {
+      barWidth = 1.05;
+    } else {
+      barWidth = 0.85;
+    }
+    const svgNode = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    (0, import_jsbarcode.default)(svgNode, value, {
+      format: "CODE128",
+      width: barWidth,
+      height,
+      displayValue: false,
+      margin: 0
+    });
+    svgNode.setAttribute("preserveAspectRatio", "none");
+    return `
+      <div class="code-wrapper barcode-wrapper">
+        <div class="barcode-svg-box">
+          ${svgNode.outerHTML}
+        </div>
+      </div>
+    `;
+  } catch (e) {
+    return `<div style="font-size: 10px; text-align: center; word-break: break-word;">${value}</div>`;
+  }
+};
+var renderSingleLabelHtml = (item, settings, companyNameDefault, barcodeHeight = 22) => {
+  const {
+    printType = 0,
+    hinge = false,
+    fields = []
+  } = settings;
+  const alignClass = hinge ? "text-right" : "text-left";
+  const currentOrgName = item.companyName || companyNameDefault || getOrganizationName();
+  if (fields && fields.length > 0) {
+    const renderedFields = fields.filter((f) => f.enabled).map((field) => {
+      if (field.type === "barcode") {
+        const barcodeContent = generateBarcodeHtml(item.code || "", printType, barcodeHeight);
+        if (field.offsetX && field.offsetX > 0) {
+          return `<div style="padding-left: ${field.offsetX}px !important;">${barcodeContent}</div>`;
+        }
+        return barcodeContent;
+      }
+      let rawVal = "";
+      if (field.type === "custom") {
+        rawVal = field.customValue || field.label || "";
+      } else if (field.key === "companyName" || field.id === "companyName") {
+        rawVal = currentOrgName;
+      } else if (field.key === "price" || field.id === "unitPrice") {
+        rawVal = item.price !== void 0 ? Number(item.price).toLocaleString("vi-VN") : "0";
+      } else {
+        rawVal = item[field.key] || item[field.id] || "";
+      }
+      if (!rawVal && field.type !== "custom") {
+        return "";
+      }
+      const prefix = field.prefix || "";
+      const suffix = field.suffix || "";
+      const displayVal = `${prefix}${rawVal}${suffix}`;
+      const isBold = field.bold !== false;
+      const isItalic = !!field.italic;
+      const isUnderline = !!field.underline;
+      const textColor = field.color || "#000000";
+      const customFontSize = field.fontSize ? `${field.fontSize}px` : void 0;
+      const offsetLeft = field.offsetX && field.offsetX > 0 ? `${field.offsetX}px` : void 0;
+      const styleRules = [
+        `font-weight: ${isBold ? 700 : 400} !important`,
+        isItalic ? "font-style: italic !important" : "",
+        isUnderline ? "text-decoration: underline !important" : "",
+        `color: ${textColor} !important`,
+        customFontSize ? `font-size: ${customFontSize} !important` : "",
+        offsetLeft ? `padding-left: ${offsetLeft} !important` : ""
+      ].filter(Boolean).join("; ");
+      return `<div class="lbl-dynamic ${alignClass}" style="${styleRules};">${displayVal}</div>`;
+    }).join("");
+    return `<div class="stamp-item">${renderedFields}</div>`;
+  }
+  const companyHtml = settings.companyName && currentOrgName ? `<div class="lbl-company ${alignClass}">${currentOrgName}</div>` : "";
+  const codeHtml = settings.productCode ? `<div class="lbl-code ${alignClass}">${item.code || ""}</div>` : "";
+  const nameHtml = settings.productName ? `<div class="lbl-name ${alignClass}">${item.name || ""}</div>` : "";
+  const barcodeHtml = generateBarcodeHtml(item.code || "", printType, barcodeHeight);
+  const priceHtml = settings.unitPrice ? `<div class="lbl-price ${alignClass}">Gi\xE1: ${item.price !== void 0 ? Number(item.price).toLocaleString("vi-VN") : "0"}</div>` : "";
+  return `<div class="stamp-item">${companyHtml}${codeHtml}${nameHtml}${barcodeHtml}${priceHtml}</div>`;
+};
+var getPaperSizeLabel = (paperSize, stampNumber) => {
+  switch (Number(paperSize)) {
+    case 1:
+      return "Kh\u1ED5 gi\u1EA5y 2 tem (80x22mm)";
+    case 2:
+      return "Kh\u1ED5 gi\u1EA5y 3 tem (105x22mm)";
+    case 3:
+      return "Kh\u1ED5 gi\u1EA5y A5 (40 tem - Tomy 108)";
+    case 4:
+      return "Kh\u1ED5 gi\u1EA5y A4 (65 tem - Tomy 145)";
+    case 0:
+    default:
+      return `Kh\u1ED5 gi\u1EA5y t\xF9y ch\u1ECDn (${stampNumber || 3} tem/h\xE0ng)`;
+  }
+};
+var generatePrintDocument = (settings, items, isTest = false, isPreview = false) => {
+  var _a;
+  let labelList = [];
+  const orgName = getOrganizationName();
+  if (isTest) {
+    const sampleItem = items.length > 0 ? { ...items[0], companyName: orgName } : { code: "SP-001", name: "S\u1EA3n ph\u1EA9m m\u1EABu", price: 1e5, companyName: orgName };
+    labelList = [sampleItem];
+  } else {
+    items.forEach((item) => {
+      const qty = Math.max(1, Number(item.printQuantity || item.quantity || 1));
+      for (let i = 0; i < qty; i++) {
+        labelList.push({ ...item, companyName: orgName });
+      }
+    });
+  }
+  const paperSize = Number((_a = settings.paperSize) != null ? _a : 2);
+  const stampNumber = Math.max(1, Number(settings.stampNumber || 3));
+  const paperLabel = getPaperSizeLabel(paperSize, stampNumber);
+  if (labelList.length === 0) {
+    return { html: "", totalStamps: 0, paperLabel, uniqueProducts: items.length };
+  }
+  let cols = 3;
+  let pageSizeCss = "105mm auto";
+  let pageMargin = "0";
+  let labelWidth = "33mm";
+  let labelHeight = "22mm";
+  let labelGap = "1.5mm";
+  let bodyPadding = "1mm";
+  let stampPadding = "2px 4px";
+  let dynamicFontSize = "8px";
+  let barcodeHeight = 16;
+  let sheetWidth = "105mm";
+  let sheetMinHeight = "60mm";
+  let sheetPadding = "2mm 1mm";
+  let stampsPerPage = 999999;
+  if (isTest) {
+    cols = 1;
+    pageSizeCss = "auto";
+    pageMargin = "10mm";
+    labelWidth = "75mm";
+    labelHeight = "auto";
+    labelGap = "0";
+    bodyPadding = "0";
+    stampPadding = "10px 14px";
+    dynamicFontSize = "12.5px";
+    barcodeHeight = 42;
+    sheetWidth = "90mm";
+    sheetMinHeight = "60mm";
+    sheetPadding = "6mm";
+    stampsPerPage = 1;
+  } else {
+    switch (paperSize) {
+      case 1:
+        cols = 2;
+        pageSizeCss = "80mm auto";
+        pageMargin = "0";
+        labelWidth = "38mm";
+        labelHeight = "22mm";
+        labelGap = "2mm";
+        bodyPadding = "1mm";
+        stampPadding = "2px 4px";
+        dynamicFontSize = "8px";
+        barcodeHeight = 18;
+        sheetWidth = "80mm";
+        sheetMinHeight = "60mm";
+        sheetPadding = "2mm 1mm";
+        stampsPerPage = 999999;
+        break;
+      case 2:
+        cols = 3;
+        pageSizeCss = "105mm auto";
+        pageMargin = "0";
+        labelWidth = "33mm";
+        labelHeight = "22mm";
+        labelGap = "1.5mm";
+        bodyPadding = "1mm";
+        stampPadding = "1px 3px";
+        dynamicFontSize = "7.5px";
+        barcodeHeight = 16;
+        sheetWidth = "105mm";
+        sheetMinHeight = "60mm";
+        sheetPadding = "2mm 1mm";
+        stampsPerPage = 999999;
+        break;
+      case 3:
+        cols = 5;
+        pageSizeCss = "A5 portrait";
+        pageMargin = "6mm 4mm";
+        labelWidth = "27mm";
+        labelHeight = "22mm";
+        labelGap = "1.5mm";
+        bodyPadding = "0";
+        stampPadding = "2px 3px";
+        dynamicFontSize = "7.5px";
+        barcodeHeight = 16;
+        sheetWidth = "148mm";
+        sheetMinHeight = "210mm";
+        sheetPadding = "6mm 4mm";
+        stampsPerPage = 40;
+        break;
+      case 4:
+        cols = 5;
+        pageSizeCss = "A4 portrait";
+        pageMargin = "8mm 5mm";
+        labelWidth = "38mm";
+        labelHeight = "20mm";
+        labelGap = "1.5mm";
+        bodyPadding = "0";
+        stampPadding = "2px 4px";
+        dynamicFontSize = "8px";
+        barcodeHeight = 18;
+        sheetWidth = "210mm";
+        sheetMinHeight = "297mm";
+        sheetPadding = "8mm 5mm";
+        stampsPerPage = 65;
+        break;
+      case 0:
+      // Tùy chọn
+      default:
+        cols = stampNumber;
+        pageSizeCss = "auto";
+        pageMargin = "5mm";
+        labelWidth = `${Math.floor(100 / cols)}%`;
+        labelHeight = "22mm";
+        labelGap = "3mm";
+        bodyPadding = "2mm";
+        stampPadding = "4px 6px";
+        dynamicFontSize = "9.5px";
+        barcodeHeight = 26;
+        sheetWidth = "210mm";
+        sheetMinHeight = "297mm";
+        sheetPadding = "8mm 6mm";
+        stampsPerPage = 999999;
+        break;
+    }
+  }
+  let printDocument = "";
+  if (isPreview) {
+    const pages = [];
+    if (stampsPerPage < 999999) {
+      for (let i = 0; i < labelList.length; i += stampsPerPage) {
+        const chunk = labelList.slice(i, i + stampsPerPage);
+        const emptyCount = stampsPerPage - chunk.length;
+        pages.push({ items: chunk, emptyCount });
+      }
+    } else {
+      pages.push({ items: labelList, emptyCount: 0 });
+    }
+    const pagesHtml = pages.map((page, pageIndex) => {
+      const pageLabelsHtml = page.items.map((item) => renderSingleLabelHtml(item, settings, orgName, barcodeHeight)).join("");
+      let emptySlotsHtml = "";
+      if (page.emptyCount > 0) {
+        emptySlotsHtml = Array(page.emptyCount).fill(0).map(() => '<div class="empty-slot" title="V\u1ECB tr\xED tem tr\u1ED1ng tr\xEAn decal"></div>').join("");
+      }
+      const pageIndicator = pages.length > 1 ? `<div class="page-indicator">Trang ${pageIndex + 1} / ${pages.length} (${page.items.length} tem)</div>` : "";
+      return `
+        <div class="page-wrapper">
+          ${pageIndicator}
+          <div class="preview-sheet-wrapper">
+            <div class="print-container">
+              ${pageLabelsHtml}
+              ${emptySlotsHtml}
+            </div>
+          </div>
+        </div>
+      `;
+    }).join("");
+    printDocument = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <title>Xem tr\u01B0\u1EDBc b\u1EA3n in</title>
+          <style>
+            * {
+              box-sizing: border-box;
+              margin: 0;
+              padding: 0;
+            }
+            body {
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+              background: #e9ecef;
+              color: #000;
+              padding: 24px 16px 40px 16px;
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              min-height: 100vh;
+              transform-origin: top center;
+            }
+            .page-wrapper {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              margin-bottom: 28px;
+            }
+            .page-indicator {
+              font-size: 12px;
+              font-weight: 600;
+              color: #495057;
+              margin-bottom: 8px;
+              background: #ffffff;
+              padding: 4px 14px;
+              border-radius: 20px;
+              box-shadow: 0 1px 4px rgba(0,0,0,0.08);
+              border: 1px solid #ced4da;
+            }
+            .preview-sheet-wrapper {
+              background: #ffffff;
+              box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
+              border: 1px solid #ced4da;
+              border-radius: 4px;
+              padding: ${sheetPadding};
+              width: ${sheetWidth};
+              min-height: ${sheetMinHeight};
+              box-sizing: border-box;
+              display: flex;
+              flex-direction: column;
+            }
+            .print-container {
+              display: grid;
+              grid-template-columns: repeat(${cols}, ${paperSize === 0 && !isTest ? "1fr" : labelWidth});
+              gap: ${labelGap};
+              justify-content: ${isTest ? "flex-start" : "center"};
+            }
+            .stamp-item {
+              width: 100%;
+              min-height: ${isTest ? "48mm" : labelHeight === "auto" ? "22mm" : labelHeight};
+              height: ${labelHeight === "auto" ? "auto" : labelHeight};
+              padding: ${stampPadding};
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              overflow: hidden;
+              border: 1px solid #d8d6de;
+              border-radius: 3px;
+              background: #fff;
+              box-sizing: border-box;
+            }
+            .empty-slot {
+              width: 100%;
+              min-height: ${labelHeight === "auto" ? "22mm" : labelHeight};
+              height: ${labelHeight === "auto" ? "22mm" : labelHeight};
+              border: 1px dashed #e2e5eb;
+              border-radius: 3px;
+              background: #fafbfc;
+              box-sizing: border-box;
+            }
+            .text-left {
+              text-align: left;
+              justify-content: flex-start;
+            }
+            .text-right {
+              text-align: right;
+              justify-content: flex-end;
+            }
+            .lbl-dynamic, .lbl-company, .lbl-code, .lbl-name, .lbl-price {
+              font-size: ${dynamicFontSize};
+              line-height: 1.2;
+              word-break: break-word;
+              white-space: normal;
+              margin-bottom: 2px;
+            }
+            .code-wrapper {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              margin: 2px 0;
+              width: 100%;
+            }
+            .barcode-svg-box {
+              width: 82%;
+              max-width: 82%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              overflow: hidden;
+            }
+            .barcode-svg-box svg {
+              width: 100%;
+              height: ${barcodeHeight}px;
+            }
+            .qr-wrapper svg {
+              width: ${barcodeHeight + 6}px;
+              height: ${barcodeHeight + 6}px;
+            }
+          </style>
+        </head>
+        <body>
+          ${pagesHtml}
+        </body>
+      </html>
+    `;
+  } else {
+    const labelsHtml = labelList.map((item) => renderSingleLabelHtml(item, settings, orgName, barcodeHeight)).join("");
+    printDocument = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <meta charset="utf-8" />
+          <title>In m\xE3 v\u1EA1ch</title>
+          <style>
+            @page {
+              size: ${pageSizeCss};
+              margin: ${pageMargin};
+            }
+            * {
+              box-sizing: border-box;
+              margin: 0;
+              padding: 0;
+              -webkit-print-color-adjust: exact !important;
+              print-color-adjust: exact !important;
+              color-adjust: exact !important;
+            }
+            body {
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+              background: #fff;
+              color: #000;
+              padding: ${bodyPadding};
+              -webkit-print-color-adjust: exact !important;
+              print-color-adjust: exact !important;
+            }
+            .print-container {
+              display: grid;
+              grid-template-columns: repeat(${cols}, ${paperSize === 0 && !isTest ? "1fr" : labelWidth});
+              gap: ${labelGap};
+              justify-content: ${isTest ? "flex-start" : "center"};
+            }
+            .stamp-item {
+              width: 100%;
+              min-height: ${isTest ? "48mm" : labelHeight === "auto" ? "22mm" : labelHeight};
+              padding: ${stampPadding};
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+              page-break-inside: avoid;
+              break-inside: avoid;
+              overflow: hidden;
+              border: 1px solid #d8d6de;
+              border-radius: 4px;
+              background: #fff;
+            }
+            .text-left {
+              text-align: left;
+              justify-content: flex-start;
+            }
+            .text-right {
+              text-align: right;
+              justify-content: flex-end;
+            }
+            .lbl-dynamic, .lbl-company, .lbl-code, .lbl-name, .lbl-price {
+              font-size: ${dynamicFontSize};
+              line-height: 1.2;
+              word-break: break-word;
+              white-space: normal;
+              margin-bottom: 2px;
+            }
+            .code-wrapper {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+              margin: 2px 0;
+              width: 100%;
+            }
+            .barcode-svg-box {
+              width: 82%;
+              max-width: 82%;
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              overflow: hidden;
+            }
+            .barcode-svg-box svg {
+              width: 100%;
+              height: ${barcodeHeight}px;
+            }
+            .qr-wrapper svg {
+              width: ${barcodeHeight + 6}px;
+              height: ${barcodeHeight + 6}px;
+            }
+          </style>
+        </head>
+        <body>
+          <div class="print-container">
+            ${labelsHtml}
+          </div>
+        </body>
+      </html>
+    `;
+  }
+  return { html: printDocument, totalStamps: labelList.length, paperLabel, uniqueProducts: items.length };
+};
+var executePrint = (settings, items, isTest = false) => {
+  var _a;
+  const { html, totalStamps } = generatePrintDocument(settings, items, isTest, false);
+  if (totalStamps === 0) {
+    return;
+  }
+  let iframe = document.getElementById("print-barcode-iframe");
+  if (!iframe) {
+    iframe = document.createElement("iframe");
+    iframe.id = "print-barcode-iframe";
+    iframe.style.position = "fixed";
+    iframe.style.right = "0";
+    iframe.style.bottom = "0";
+    iframe.style.width = "0";
+    iframe.style.height = "0";
+    iframe.style.border = "none";
+    document.body.appendChild(iframe);
+  }
+  const iframeDoc = iframe.contentDocument || ((_a = iframe.contentWindow) == null ? void 0 : _a.document);
+  if (iframeDoc) {
+    iframeDoc.open();
+    iframeDoc.write(html);
+    iframeDoc.close();
+    setTimeout(() => {
+      var _a2, _b;
+      (_a2 = iframe.contentWindow) == null ? void 0 : _a2.focus();
+      (_b = iframe.contentWindow) == null ? void 0 : _b.print();
+    }, 250);
+  }
+};
+
+// src/components/preview-print.tsx
+var import_qrcode = require("qrcode.react");
+var import_react = require("react");
+var import_react_barcode = __toESM(require("react-barcode"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var PreviewPrint = ({ watch, setValue, sampleItem }) => {
+  var _a, _b;
+  const printType = Number((_a = watch("printType")) != null ? _a : 0);
+  const fields = (_b = watch("fields")) != null ? _b : [];
+  const draggingRef = (0, import_react.useRef)(null);
+  const [activeDragId, setActiveDragId] = (0, import_react.useState)(null);
+  const getOrgName = () => {
+    try {
+      const dataLocal = localStorage.getItem("organization");
+      const organization = JSON.parse(dataLocal && dataLocal !== "undefined" ? dataLocal : "null");
+      return (organization == null ? void 0 : organization.text) || (organization == null ? void 0 : organization.label) || (organization == null ? void 0 : organization.name) || "T\xEAn c\xF4ng ty";
+    } catch (e) {
+      return "T\xEAn c\xF4ng ty";
+    }
+  };
+  const sampleData = sampleItem || {
+    companyName: getOrgName(),
+    code: "SP-001",
+    productCode: "SP-001",
+    name: "S\u1EA3n ph\u1EA9m m\u1EABu",
+    productName: "S\u1EA3n ph\u1EA9m m\u1EABu",
+    price: "250.000",
+    unitPrice: "250.000",
+    unitName: "C\xE1i",
+    origin: "Vi\u1EC7t Nam",
+    categoryRootName: "Danh m\u1EE5c m\u1EABu",
+    lotSerial: "LOT-2026",
+    specificationCode: "SIZE-L"
+  };
+  const barcodeValue = sampleData.code || "SP-001";
+  const hinge = watch("hinge");
+  const alignStyle = {
+    display: "flex",
+    justifyContent: hinge ? "flex-end" : "flex-start",
+    alignItems: "center",
+    textAlign: hinge ? "right" : "left"
+  };
+  const handleMouseDown = (e, field) => {
+    if (!setValue) {
+      return;
+    }
+    e.preventDefault();
+    e.stopPropagation();
+    draggingRef.current = {
+      fieldId: field.id,
+      startX: e.clientX,
+      initialOffset: field.offsetX || 0
+    };
+    setActiveDragId(field.id);
+    const handleMouseMove = (moveEvent) => {
+      if (!draggingRef.current) {
+        return;
+      }
+      const deltaX = moveEvent.clientX - draggingRef.current.startX;
+      const newOffset = Math.max(0, Math.min(180, Math.round(draggingRef.current.initialOffset + deltaX)));
+      const currentFields = watch("fields") || [];
+      const updatedFields = currentFields.map((f) => {
+        var _a2;
+        return f.id === ((_a2 = draggingRef.current) == null ? void 0 : _a2.fieldId) ? { ...f, offsetX: newOffset } : f;
+      });
+      setValue("fields", updatedFields);
+    };
+    const handleMouseUp = () => {
+      draggingRef.current = null;
+      setActiveDragId(null);
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+  const renderCode = (field) => {
+    const offsetX = (field == null ? void 0 : field.offsetX) || 0;
+    const containerStyle = {
+      ...alignStyle,
+      marginTop: 4,
+      marginBottom: 4,
+      width: "100%",
+      flexDirection: "column",
+      alignItems: hinge ? "flex-end" : "center",
+      paddingLeft: offsetX > 0 ? `${offsetX}px` : void 0,
+      cursor: setValue ? "ew-resize" : "default",
+      position: "relative"
+    };
+    if (printType === 0) {
+      const len = barcodeValue.length;
+      let barWidth = 1.3;
+      if (len <= 6) {
+        barWidth = 2.2;
+      } else if (len <= 10) {
+        barWidth = 1.7;
+      } else if (len <= 15) {
+        barWidth = 1.3;
+      } else if (len <= 20) {
+        barWidth = 1.05;
+      } else {
+        barWidth = 0.85;
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          onMouseDown: (e) => field && handleMouseDown(e, field),
+          title: setValue ? "K\xE9o chu\u1ED9t sang tr\xE1i/ph\u1EA3i \u0111\u1EC3 d\u1ECBch chuy\u1EC3n l\u1EC1" : void 0,
+          style: containerStyle,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                width: "82%",
+                maxWidth: "220px",
+                height: "42px",
+                display: "flex",
+                justifyContent: "center",
+                overflow: "hidden",
+                outline: activeDragId === (field == null ? void 0 : field.id) ? "1px dashed #7367f0" : "none"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_barcode.default,
+                {
+                  value: barcodeValue,
+                  format: "CODE128",
+                  displayValue: false,
+                  margin: 0,
+                  height: 40,
+                  width: barWidth
+                }
+              )
+            }
+          )
+        },
+        "barcode-item"
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        onMouseDown: (e) => field && handleMouseDown(e, field),
+        title: setValue ? "K\xE9o chu\u1ED9t sang tr\xE1i/ph\u1EA3i \u0111\u1EC3 d\u1ECBch chuy\u1EC3n l\u1EC1" : void 0,
+        style: {
+          ...alignStyle,
+          minHeight: 80,
+          marginTop: 4,
+          marginBottom: 4,
+          width: "100%",
+          justifyContent: hinge ? "flex-end" : "center",
+          paddingLeft: offsetX > 0 ? `${offsetX}px` : void 0,
+          cursor: setValue ? "ew-resize" : "default"
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_qrcode.QRCodeCanvas, { value: barcodeValue, size: 85 })
+      },
+      "barcode-item"
+    );
+  };
+  const renderDynamicFields = () => {
+    if (!fields || fields.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.codeText, ...alignStyle }, children: "SP-001" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.normalText, ...alignStyle }, children: "S\u1EA3n ph\u1EA9m m\u1EABu" }),
+        renderCode(),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.price, ...alignStyle }, children: "Gi\xE1: 250.000" })
+      ] });
+    }
+    return fields.filter((f) => f.enabled).map((field) => {
+      if (field.type === "barcode") {
+        return renderCode(field);
+      }
+      const rawVal = field.type === "custom" ? field.customValue || field.label : sampleData[field.key] || sampleData[field.id] || field.label;
+      const prefix = field.prefix || "";
+      const suffix = field.suffix || "";
+      const displayVal = `${prefix}${rawVal}${suffix}`;
+      const isBold = field.bold !== false;
+      const isItalic = !!field.italic;
+      const isUnderline = !!field.underline;
+      const textColor = field.color || "#111111";
+      const customFontSize = field.fontSize || 13;
+      const offsetX = field.offsetX || 0;
+      const fieldStyle = {
+        ...styles.dynamicText,
+        ...alignStyle,
+        fontWeight: isBold ? 700 : 400,
+        fontStyle: isItalic ? "italic" : "normal",
+        textDecoration: isUnderline ? "underline" : "none",
+        color: textColor,
+        fontSize: `${customFontSize}px`,
+        paddingLeft: offsetX > 0 ? `${offsetX}px` : void 0,
+        cursor: setValue ? "ew-resize" : "default",
+        userSelect: "none",
+        outline: activeDragId === field.id ? "1px dashed #7367f0" : "none",
+        borderRadius: "2px",
+        transition: activeDragId === field.id ? "none" : "padding-left 0.1s ease"
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          style: fieldStyle,
+          onMouseDown: (e) => handleMouseDown(e, field),
+          title: setValue ? "K\xE9o chu\u1ED9t sang tr\xE1i/ph\u1EA3i \u0111\u1EC3 d\u1ECBch chuy\u1EC3n l\u1EC1" : void 0,
+          children: displayVal
+        },
+        field.id
+      );
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: styles.previewBox, children: renderDynamicFields() }) });
+};
+var styles = {
+  previewBox: {
+    width: "100%",
+    maxWidth: 320,
+    minHeight: 180,
+    border: "1px solid #d8d6de",
+    borderRadius: "4px",
+    background: "#fff",
+    padding: "12px 16px",
+    boxSizing: "border-box",
+    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.06)",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    position: "relative"
+  },
+  codeText: {
+    fontSize: 14,
+    fontWeight: 700,
+    color: "#111",
+    marginBottom: 2,
+    lineHeight: 1.25,
+    wordBreak: "break-word",
+    whiteSpace: "normal"
+  },
+  normalText: {
+    fontSize: 13,
+    fontWeight: 500,
+    color: "#333",
+    lineHeight: 1.25,
+    marginBottom: 4,
+    wordBreak: "break-word",
+    whiteSpace: "normal"
+  },
+  price: {
+    fontSize: 13,
+    fontWeight: 700,
+    color: "#111",
+    lineHeight: 1.25,
+    marginTop: 4,
+    wordBreak: "break-word",
+    whiteSpace: "normal"
+  },
+  dynamicText: {
+    fontSize: 13,
+    color: "#111",
+    lineHeight: 1.25,
+    marginBottom: 2,
+    wordBreak: "break-word",
+    whiteSpace: "normal"
+  }
+};
+
+// src/components/setting-print.tsx
+var Icon = __toESM(require("becoxy-icons"));
+var import_react2 = require("react");
+var import_react_hook_form = require("react-hook-form");
+var import_reactstrap = require("reactstrap");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var DEFAULT_EXTRA_FIELDS = [
+  { id: "unitName", key: "unitName", label: "\u0110\u01A1n v\u1ECB t\xEDnh", type: "text", prefix: "\u0110VT: " },
+  { id: "origin", key: "origin", label: "Xu\u1EA5t x\u1EE9", type: "text", prefix: "Xu\u1EA5t x\u1EE9: " },
+  { id: "categoryRootName", key: "categoryRootName", label: "Nh\xF3m h\xE0ng / Danh m\u1EE5c", type: "text", prefix: "Nh\xF3m: " },
+  { id: "specificationCode", key: "specificationCode", label: "M\xE3 quy c\xE1ch", type: "text", prefix: "Quy c\xE1ch: " },
+  { id: "lotSerial", key: "lotSerial", label: "S\u1ED1 l\xF4 / Serial", type: "text", prefix: "L\xF4: " },
+  { id: "customText", key: "custom", label: "V\u0103n b\u1EA3n t\xF9y ch\u1EC9nh", type: "custom", customValue: "H\xE0ng ch\xEDnh h\xE3ng" }
+];
+var COLOR_PRESETS = [
+  { label: "\u0110en", value: "#000000" },
+  { label: "\u0110\u1ECF", value: "#dc3545" },
+  { label: "Xanh d\u01B0\u01A1ng", value: "#0d6efd" },
+  { label: "Xanh l\xE1", value: "#198754" },
+  { label: "X\xE1m", value: "#6c757d" }
+];
+var SettingPrint = (props) => {
+  const { control, watch, setValue, availableExtraFields = DEFAULT_EXTRA_FIELDS, t = (s) => s } = props;
+  const [openPaperSection, setOpenPaperSection] = (0, import_react2.useState)(true);
+  const [openInfoSection, setOpenInfoSection] = (0, import_react2.useState)(true);
+  const [openCustomSection, setOpenCustomSection] = (0, import_react2.useState)(false);
+  const [expandedFieldId, setExpandedFieldId] = (0, import_react2.useState)(null);
+  const [draggedIndex, setDraggedIndex] = (0, import_react2.useState)(null);
+  const fields = watch("fields") || [];
+  const handleToggleField = (index) => {
+    const newFields = [...fields];
+    newFields[index] = { ...newFields[index], enabled: !newFields[index].enabled };
+    setValue("fields", newFields);
+  };
+  const handleMoveUp = (index) => {
+    if (index <= 0) {
+      return;
+    }
+    const newFields = [...fields];
+    const temp = newFields[index];
+    newFields[index] = newFields[index - 1];
+    newFields[index - 1] = temp;
+    setValue("fields", newFields);
+  };
+  const handleMoveDown = (index) => {
+    if (index >= fields.length - 1) {
+      return;
+    }
+    const newFields = [...fields];
+    const temp = newFields[index];
+    newFields[index] = newFields[index + 1];
+    newFields[index + 1] = temp;
+    setValue("fields", newFields);
+  };
+  const handleDeleteField = (index) => {
+    const newFields = fields.filter((_, i) => i !== index);
+    setValue("fields", newFields);
+  };
+  const handleAddField = (fieldTemplate) => {
+    const exists = fields.find((f) => f.id === fieldTemplate.id);
+    if (exists) {
+      const newFields = fields.map((f) => f.id === fieldTemplate.id ? { ...f, enabled: true } : f);
+      setValue("fields", newFields);
+    } else {
+      const newField = {
+        id: fieldTemplate.id,
+        key: fieldTemplate.key,
+        label: fieldTemplate.label,
+        type: fieldTemplate.type,
+        enabled: true,
+        bold: false,
+        prefix: fieldTemplate.prefix || "",
+        customValue: fieldTemplate.customValue || ""
+      };
+      setValue("fields", [...fields, newField]);
+    }
+  };
+  const updateFieldProperty = (index, propName, value) => {
+    const newFields = [...fields];
+    newFields[index] = { ...newFields[index], [propName]: value };
+    setValue("fields", newFields);
+  };
+  const handleDragStart = (index) => {
+    setDraggedIndex(index);
+  };
+  const handleDragOver = (e, index) => {
+    e.preventDefault();
+    if (draggedIndex === null || draggedIndex === index) {
+      return;
+    }
+    const newFields = [...fields];
+    const item = newFields.splice(draggedIndex, 1)[0];
+    newFields.splice(index, 0, item);
+    setDraggedIndex(index);
+    setValue("fields", newFields);
+  };
+  const handleDragEnd = () => {
+    setDraggedIndex(null);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column h-100", style: { gap: "16px", overflowY: "auto", paddingRight: "4px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "fw-bolder text-dark mb-75", children: t("Lo\u1EA1i m\xE3 in") }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_hook_form.Controller,
+        {
+          name: "printType",
+          control,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex", style: { gap: "20px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "printType",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 0,
+                  onChange: () => onChange(0)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("M\xE3 v\u1EA1ch (Barcode)") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "printType",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 1,
+                  onChange: () => onChange(1)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("M\xE3 QR") })
+            ] })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          onClick: () => setOpenPaperSection(!openPaperSection),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("Kh\u1ED5 gi\u1EA5y in") }),
+            openPaperSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openPaperSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_react_hook_form.Controller,
+        {
+          name: "paperSize",
+          control,
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column ps-1", style: { gap: "8px" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "paperSize",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 1,
+                  onChange: () => onChange(1)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Kh\u1ED5 gi\u1EA5y 2 tem (80x22mm / 3.15x0.9 inch)") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "paperSize",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 2,
+                  onChange: () => onChange(2)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Kh\u1ED5 gi\u1EA5y 3 tem (105x22mm / 4.2x0.9 inch)") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "paperSize",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 3,
+                  onChange: () => onChange(3)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Kh\u1ED5 gi\u1EA5y A5 - T\u1ED5ng 40 tem (Tomy 108)") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                import_reactstrap.Input,
+                {
+                  type: "radio",
+                  name: "paperSize",
+                  className: "me-50 mt-0",
+                  checked: Number(value) === 4,
+                  onChange: () => onChange(4)
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Kh\u1ED5 gi\u1EA5y A4 - T\u1ED5ng 65 tem (Tomy 145)") })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer me-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_reactstrap.Input,
+                  {
+                    type: "radio",
+                    name: "paperSize",
+                    className: "me-50 mt-0",
+                    checked: Number(value) === 0,
+                    onChange: () => onChange(0)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Kh\u1ED5 gi\u1EA5y t\xF9y ch\u1ECDn") })
+              ] }),
+              Number(value) === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_react_hook_form.Controller,
+                  {
+                    name: "stampNumber",
+                    control,
+                    render: ({ field: { value: stampVal, onChange: onStampChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Input,
+                      {
+                        type: "number",
+                        min: 1,
+                        max: 10,
+                        className: "form-control-sm text-center",
+                        style: { width: "60px" },
+                        value: stampVal != null ? stampVal : 3,
+                        onChange: (e) => onStampChange(Math.max(1, Number(e.target.value) || 1))
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-50 small text-muted", children: t("tem/h\xE0ng") })
+              ] })
+            ] })
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          onClick: () => setOpenInfoSection(!openInfoSection),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("Th\xF4ng tin tr\xEAn tem") }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { className: "text-muted me-50", style: { fontSize: "11px" }, children: t("(K\xE9o th\u1EA3 \u0111\u1EC3 \u0111\u1ED5i v\u1ECB tr\xED)") }),
+              openInfoSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openInfoSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column", style: { gap: "6px" }, children: [
+        fields.map((field, index) => {
+          const isExpanded = expandedFieldId === field.id;
+          const isDragging = draggedIndex === index;
+          return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              draggable: true,
+              onDragStart: () => handleDragStart(index),
+              onDragOver: (e) => handleDragOver(e, index),
+              onDragEnd: handleDragEnd,
+              className: "border rounded p-50",
+              style: {
+                background: isDragging ? "#e8f0fe" : field.enabled ? "#fff" : "#f9f9f9",
+                opacity: isDragging ? 0.6 : 1,
+                transition: "background 0.2s",
+                boxShadow: isExpanded ? "0 2px 6px rgba(0,0,0,0.08)" : "none"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      "span",
+                      {
+                        className: "cursor-move text-muted me-50 d-flex align-items-center",
+                        title: t("K\xE9o \u0111\u1EC3 \u0111\u1ED5i th\u1EE9 t\u1EF1"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Menu, { fontSize: 13 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Input,
+                      {
+                        type: "checkbox",
+                        id: `chk-field-${field.id}`,
+                        className: "me-50 mt-0",
+                        checked: field.enabled,
+                        onChange: () => handleToggleField(index)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Label,
+                      {
+                        htmlFor: `chk-field-${field.id}`,
+                        className: `mb-0 cursor-pointer ${field.enabled ? "fw-bold text-dark" : "text-muted"}`,
+                        style: { fontSize: "13px" },
+                        children: field.label
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "3px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Button,
+                      {
+                        color: "flat-secondary",
+                        className: "btn-icon p-0",
+                        style: { width: "22px", height: "22px" },
+                        onClick: () => handleMoveUp(index),
+                        disabled: index === 0,
+                        title: t("Di chuy\u1EC3n l\xEAn"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ArrowUp, { fontSize: 12 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Button,
+                      {
+                        color: "flat-secondary",
+                        className: "btn-icon p-0",
+                        style: { width: "22px", height: "22px" },
+                        onClick: () => handleMoveDown(index),
+                        disabled: index === fields.length - 1,
+                        title: t("Di chuy\u1EC3n xu\u1ED1ng"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ArrowDown, { fontSize: 12 })
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Button,
+                      {
+                        color: "flat-secondary",
+                        className: "btn-icon p-0",
+                        style: { width: "22px", height: "22px" },
+                        onClick: () => setExpandedFieldId(isExpanded ? null : field.id),
+                        title: t("T\xF9y ch\u1EC9nh \u0111\u1ECBnh d\u1EA1ng"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Settings, { fontSize: 12, className: isExpanded ? "text-primary" : "" })
+                      }
+                    ),
+                    field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                      import_reactstrap.Button,
+                      {
+                        color: "flat-danger",
+                        className: "btn-icon p-0 text-danger",
+                        style: { width: "22px", height: "22px" },
+                        onClick: () => handleDeleteField(index),
+                        title: t("X\xF3a tr\u01B0\u1EDDng"),
+                        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Trash2, { fontSize: 12 })
+                      }
+                    )
+                  ] })
+                ] }),
+                isExpanded && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-50 pt-50 border-top ps-1 pe-50", children: [
+                  field.type !== "barcode" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex flex-column", style: { gap: "6px" }, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                        t("Ki\u1EC3u ch\u1EEF"),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.ButtonGroup, { size: "sm", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            color: field.bold !== false ? "primary" : "outline-secondary",
+                            className: "btn-icon py-0 px-50",
+                            onClick: () => updateFieldProperty(index, "bold", field.bold === false),
+                            title: "In \u0111\u1EADm (Bold)",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("strong", { children: "B" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            color: field.italic ? "primary" : "outline-secondary",
+                            className: "btn-icon py-0 px-50",
+                            onClick: () => updateFieldProperty(index, "italic", !field.italic),
+                            title: "In nghi\xEAng (Italic)",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("em", { children: "I" })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            color: field.underline ? "primary" : "outline-secondary",
+                            className: "btn-icon py-0 px-50",
+                            onClick: () => updateFieldProperty(index, "underline", !field.underline),
+                            title: "G\u1EA1ch ch\xE2n (Underline)",
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("u", { children: "U" })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                        t("C\u1EE1 ch\u1EEF (px)"),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            color: "outline-secondary",
+                            className: "btn-icon p-0",
+                            style: { width: "22px", height: "22px" },
+                            onClick: () => updateFieldProperty(index, "fontSize", Math.max(8, (field.fontSize || 13) - 1)),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Minus, { fontSize: 10 })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mx-50 small fw-bold", style: { minWidth: "24px", textAlign: "center" }, children: field.fontSize || 13 }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            color: "outline-secondary",
+                            className: "btn-icon p-0",
+                            style: { width: "22px", height: "22px" },
+                            onClick: () => updateFieldProperty(index, "fontSize", Math.min(24, (field.fontSize || 13) + 1)),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 10 })
+                          }
+                        )
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                        t("M\xE0u ch\u1EEF"),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex align-items-center", style: { gap: "4px" }, children: COLOR_PRESETS.map((colorItem) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        "div",
+                        {
+                          onClick: () => updateFieldProperty(index, "color", colorItem.value),
+                          title: colorItem.label,
+                          style: {
+                            width: "16px",
+                            height: "16px",
+                            borderRadius: "50%",
+                            backgroundColor: colorItem.value,
+                            cursor: "pointer",
+                            outline: (field.color || "#000000") === colorItem.value ? "2px solid #7367f0" : "none",
+                            outlineOffset: "1px"
+                          }
+                        },
+                        colorItem.value
+                      )) })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                        t("Ti\u1EC1n t\u1ED1"),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_reactstrap.Input,
+                        {
+                          type: "text",
+                          className: "form-control-sm",
+                          style: { width: "120px" },
+                          value: field.prefix || "",
+                          onChange: (e) => updateFieldProperty(index, "prefix", e.target.value),
+                          placeholder: "VD: Gi\xE1: "
+                        }
+                      )
+                    ] }),
+                    field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                        t("N\u1ED9i dung"),
+                        ":"
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_reactstrap.Input,
+                        {
+                          type: "text",
+                          className: "form-control-sm",
+                          style: { width: "140px" },
+                          value: field.customValue || "",
+                          onChange: (e) => updateFieldProperty(index, "customValue", e.target.value)
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mt-50", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-muted", children: [
+                      t("L\xF9i l\u1EC1 tr\xE1i (px)"),
+                      ":"
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_reactstrap.Button,
+                        {
+                          color: "outline-secondary",
+                          className: "btn-icon p-0",
+                          style: { width: "22px", height: "22px" },
+                          onClick: () => updateFieldProperty(index, "offsetX", Math.max(0, (field.offsetX || 0) - 2)),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Minus, { fontSize: 10 })
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "mx-50 small fw-bold", style: { minWidth: "24px", textAlign: "center" }, children: field.offsetX || 0 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                        import_reactstrap.Button,
+                        {
+                          color: "outline-secondary",
+                          className: "btn-icon p-0",
+                          style: { width: "22px", height: "22px" },
+                          onClick: () => updateFieldProperty(index, "offsetX", Math.min(180, (field.offsetX || 0) + 2)),
+                          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 10 })
+                        }
+                      )
+                    ] })
+                  ] })
+                ] })
+              ]
+            },
+            field.id
+          );
+        }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mt-50", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.UncontrolledDropdown, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.DropdownToggle, { color: "outline-primary", size: "sm", className: "w-100 d-flex align-items-center justify-content-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.Plus, { fontSize: 13, className: "me-50" }),
+            t("Th\xEAm tr\u01B0\u1EDDng th\xF4ng tin kh\xE1c")
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.DropdownMenu, { className: "w-100", children: availableExtraFields.map((extra) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.DropdownItem, { onClick: () => handleAddField(extra), children: extra.label }, extra.id)) })
+        ] }) })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+        "div",
+        {
+          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          onClick: () => setOpenCustomSection(!openCustomSection),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark", children: t("C\u0103n ch\u1EC9nh l\u1EC1") }),
+            openCustomSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronDown, { fontSize: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Icon.ChevronRight, { fontSize: 16 })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openCustomSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex flex-column ps-1", style: { gap: "8px" }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "small text-dark", children: [
+          t("C\u0103n l\u1EC1 ch\u1EEF"),
+          ":"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          import_react_hook_form.Controller,
+          {
+            name: "hinge",
+            control,
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex", style: { gap: "15px" }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer small", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_reactstrap.Input,
+                  {
+                    type: "radio",
+                    name: "hinge",
+                    className: "me-50 mt-0",
+                    checked: !value,
+                    onChange: () => onChange(false)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("C\u0103n tr\xE1i") })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer small", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  import_reactstrap.Input,
+                  {
+                    type: "radio",
+                    name: "hinge",
+                    className: "me-50 mt-0",
+                    checked: !!value,
+                    onChange: () => onChange(true)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("C\u0103n ph\u1EA3i") })
+              ] })
+            ] })
+          }
+        )
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "fw-bolder text-dark mb-1 d-flex align-items-center justify-content-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Xem tr\u01B0\u1EDBc m\u1EABu in") }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("small", { className: "text-muted fw-normal", style: { fontSize: "11px" }, children: t("(K\xE9o chu\u1ED9t tr\xEAn d\xF2ng \u0111\u1EC3 d\u1ECBch l\u1EC1)") })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PreviewPrint, { watch, setValue }) })
+    ] })
+  ] }) });
+};
+
+// src/components/modal-preview-print.tsx
+var Icon2 = __toESM(require("becoxy-icons"));
+var import_react3 = require("react");
+var import_reactstrap2 = require("reactstrap");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ModalPreviewPrint = ({
+  isOpen,
+  toggle,
+  settings,
+  items,
+  onPrint,
+  t = (s) => s
+}) => {
+  const iframeRef = (0, import_react3.useRef)(null);
+  const [zoom, setZoom] = (0, import_react3.useState)(100);
+  const [isSingleSample, setIsSingleSample] = (0, import_react3.useState)(false);
+  const { html, totalStamps, paperLabel, uniqueProducts } = generatePrintDocument(
+    settings,
+    items,
+    isSingleSample,
+    true
+  );
+  const updateIframeZoom = (zoomLevel) => {
+    var _a;
+    try {
+      const doc = (_a = iframeRef.current) == null ? void 0 : _a.contentDocument;
+      if (doc && doc.body) {
+        ;
+        doc.body.style.zoom = `${zoomLevel}%`;
+      }
+    } catch (e) {
+    }
+  };
+  (0, import_react3.useEffect)(() => {
+    updateIframeZoom(zoom);
+  }, [zoom, html]);
+  const handleZoomIn = () => {
+    setZoom((prev) => Math.min(200, prev + 10));
+  };
+  const handleZoomOut = () => {
+    setZoom((prev) => Math.max(40, prev - 10));
+  };
+  const handleZoomReset = () => {
+    setZoom(100);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    import_reactstrap2.Modal,
+    {
+      isOpen,
+      toggle,
+      className: "modal-dialog-centered modal-xl",
+      contentClassName: "p-0 overflow-hidden",
+      style: { maxWidth: "92vw", width: "92vw", margin: "auto" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between px-1_5 py-1 mb-0 border-bottom bg-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex align-items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Printer, { fontSize: 18, className: "text-primary me-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h5", { className: "modal-title m-0 fw-bolder text-dark", children: t("Xem tr\u01B0\u1EDBc b\u1EA3n in m\xE3 v\u1EA1ch") })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.X, { fontSize: 20 }) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          "div",
+          {
+            className: "d-flex flex-wrap align-items-center justify-content-between px-1_5 py-75 border-bottom",
+            style: { background: "#f8f9fa", gap: "8px" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex flex-wrap align-items-center", style: { gap: "8px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.Badge, { color: "light-primary", className: "d-flex align-items-center px-1 py-50", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fw-normal me-50", children: [
+                    t("Kh\u1ED5 gi\u1EA5y"),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "fw-bolder", children: paperLabel })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.Badge, { color: "light-success", className: "d-flex align-items-center px-1 py-50", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fw-normal me-50", children: [
+                    t("T\u1ED5ng s\u1ED1 tem"),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fw-bolder", children: [
+                    totalStamps,
+                    " tem"
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.Badge, { color: "light-secondary", className: "d-flex align-items-center px-1 py-50", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fw-normal me-50", children: [
+                    t("M\u1EB7t h\xE0ng"),
+                    ":"
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "fw-bolder", children: [
+                    uniqueProducts,
+                    " s\u1EA3n ph\u1EA9m"
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "10px" }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.ButtonGroup, { size: "sm", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    import_reactstrap2.Button,
+                    {
+                      color: !isSingleSample ? "primary" : "outline-secondary",
+                      onClick: () => setIsSingleSample(false),
+                      children: [
+                        t("T\u1EA5t c\u1EA3 tem"),
+                        " (",
+                        totalStamps,
+                        ")"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_reactstrap2.Button,
+                    {
+                      color: isSingleSample ? "primary" : "outline-secondary",
+                      onClick: () => setIsSingleSample(true),
+                      children: t("1 tem ph\xF3ng to")
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "d-flex align-items-center border rounded bg-white px-50", style: { height: "31px" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_reactstrap2.Button,
+                    {
+                      color: "flat-secondary",
+                      className: "btn-icon p-0 me-50",
+                      style: { width: "22px", height: "22px" },
+                      onClick: handleZoomOut,
+                      title: t("Thu nh\u1ECF"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Minus, { fontSize: 14 })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                    "span",
+                    {
+                      className: "fw-bold cursor-pointer text-center text-dark",
+                      style: { minWidth: "46px", fontSize: "12px" },
+                      onClick: handleZoomReset,
+                      title: t("\u0110\u1EB7t l\u1EA1i 100%"),
+                      children: [
+                        zoom,
+                        "%"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                    import_reactstrap2.Button,
+                    {
+                      color: "flat-secondary",
+                      className: "btn-icon p-0 ms-50",
+                      style: { width: "22px", height: "22px" },
+                      onClick: handleZoomIn,
+                      title: t("Ph\xF3ng to"),
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Plus, { fontSize: 14 })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.ModalBody, { className: "p-0 position-relative", style: { background: "#e9ecef" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { height: "74vh", minHeight: "540px", width: "100%", overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "iframe",
+          {
+            ref: iframeRef,
+            title: "barcode-print-preview",
+            srcDoc: html,
+            onLoad: () => updateIframeZoom(zoom),
+            style: {
+              width: "100%",
+              height: "100%",
+              border: "none",
+              display: "block"
+            }
+          }
+        ) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_reactstrap2.ModalFooter, { className: "d-flex justify-content-end align-items-center py-1 px-2 border-top bg-white", style: { gap: "10px" }, children: [
+          onPrint && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+            import_reactstrap2.Button,
+            {
+              color: "primary",
+              onClick: onPrint,
+              className: "d-flex align-items-center",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Printer, { fontSize: 14, className: "me-50" }),
+                t("In")
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_reactstrap2.Button, { color: "secondary", outline: true, onClick: toggle, children: t("Close") })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/modal-barcode-print.tsx
+var Icon3 = __toESM(require("becoxy-icons"));
+var import_react4 = require("react");
+var import_react_hook_form2 = require("react-hook-form");
+var import_reactstrap3 = require("reactstrap");
+var import_sweetalert2 = __toESM(require("sweetalert2"));
+var import_sweetalert2_react_content = __toESM(require("sweetalert2-react-content"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var MySwal = (0, import_sweetalert2_react_content.default)(import_sweetalert2.default);
+var DEFAULT_PRINT_FIELDS = [
+  { id: "companyName", key: "companyName", label: "T\xEAn c\xF4ng ty", type: "text", enabled: false, bold: true },
+  { id: "productCode", key: "code", label: "M\xE3 h\xE0ng", type: "text", enabled: true, bold: true },
+  { id: "productName", key: "name", label: "T\xEAn h\xE0ng", type: "text", enabled: true, bold: false },
+  { id: "barcode", key: "code", label: "M\xE3 v\u1EA1ch / M\xE3 QR", type: "barcode", enabled: true },
+  { id: "unitPrice", key: "price", label: "Gi\xE1 b\xE1n", type: "text", enabled: true, bold: true, prefix: "Gi\xE1: ", suffix: "" }
+];
+var ModalBarcodePrint = ({
+  isOpen,
+  toggle,
+  title = "In m\xE3 v\u1EA1ch / m\xE3 QR",
+  dataSelected,
+  setDataSelected,
+  dataItem,
+  defaultFields = DEFAULT_PRINT_FIELDS,
+  availableExtraFields,
+  renderTable,
+  children,
+  windowSize,
+  t = (s) => s,
+  onPrintSuccess,
+  notifyError = (msg) => alert(msg),
+  notifySuccess = (msg) => console.log(msg)
+}) => {
+  const defaultValues = {
+    printType: 0,
+    paperSize: 2,
+    // 3 tem (105x22mm)
+    stampNumber: 3,
+    productCode: true,
+    productName: true,
+    companyName: false,
+    unitPrice: true,
+    printSample: 3,
+    hinge: false,
+    fields: defaultFields
+  };
+  const [openPreviewModal, setOpenPreviewModal] = (0, import_react4.useState)(false);
+  const { control, watch, setValue, reset, getValues, formState: { errors } } = (0, import_react_hook_form2.useForm)({
+    mode: "onChange",
+    defaultValues
+  });
+  const handleTestPrint = () => {
+    const settings = getValues();
+    const targetItems = dataSelected.length > 0 ? dataSelected : dataItem ? [dataItem] : [];
+    executePrint(settings, targetItems, true);
+  };
+  const handleOpenPreview = () => {
+    const targetItems = dataSelected.length > 0 ? dataSelected : dataItem ? [dataItem] : [];
+    if (targetItems.length === 0) {
+      notifyError(t("Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t m\u1ED9t s\u1EA3n ph\u1EA9m c\u1EA7n xem tr\u01B0\u1EDBc!"));
+      return;
+    }
+    setOpenPreviewModal(true);
+  };
+  const handleRealPrint = () => {
+    if (dataSelected.length === 0 && !dataItem) {
+      notifyError(t("Vui l\xF2ng ch\u1ECDn \xEDt nh\u1EA5t m\u1ED9t s\u1EA3n ph\u1EA9m c\u1EA7n in m\xE3 v\u1EA1ch!"));
+      return;
+    }
+    const settings = getValues();
+    const itemsToPrint = dataSelected.length > 0 ? dataSelected : [dataItem];
+    executePrint(settings, itemsToPrint, false);
+    if (onPrintSuccess) {
+      onPrintSuccess();
+    }
+  };
+  const handleResetDefault = () => {
+    MySwal.fire({
+      title: t("X\xE1c nh\u1EADn"),
+      text: t("B\u1EA1n c\xF3 ch\u1EAFc ch\u1EAFn mu\u1ED1n thi\u1EBFt l\u1EADp l\u1EA1i c\u1EA5u h\xECnh in v\u1EC1 m\u1EB7c \u0111\u1ECBnh kh\xF4ng?"),
+      icon: "question",
+      showCancelButton: true,
+      confirmButtonText: t("X\xE1c nh\u1EADn"),
+      cancelButtonText: t("H\u1EE7y"),
+      customClass: {
+        confirmButton: "btn btn-primary",
+        cancelButton: "btn btn-secondary ms-1"
+      },
+      buttonsStyling: false
+    }).then((result) => {
+      if (result.isConfirmed || result.value) {
+        reset(defaultValues);
+        notifySuccess(t("\u0110\xE3 thi\u1EBFt l\u1EADp l\u1EA1i c\u1EA5u h\xECnh m\u1EB7c \u0111\u1ECBnh!"));
+      }
+    });
+  };
+  const renderFooterButtons = () => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "10px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "primary", onClick: handleResetDefault, className: "d-flex align-items-center text-white", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.OutlineReply, { fontSize: 14, className: "me-50" }),
+        t("Thi\u1EBFt l\u1EADp l\u1EA1i")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "info", outline: true, onClick: handleOpenPreview, className: "d-flex align-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Eye, { fontSize: 14, className: "me-50" }),
+        t("Xem tr\u01B0\u1EDBc")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "secondary", outline: true, onClick: handleTestPrint, className: "d-flex align-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 14, className: "me-50" }),
+        t("In th\u1EED")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Button, { color: "primary", onClick: handleRealPrint, className: "d-flex align-items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 14, className: "me-50" }),
+        t("In")
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.Button, { color: "secondary", onClick: toggle, outline: true, children: t("Close") })
+    ] });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      import_reactstrap3.Modal,
+      {
+        isOpen,
+        toggle,
+        className: "modal-dialog-centered modal-fullscreen",
+        contentClassName: "p-0",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "modal-header d-flex align-items-center justify-content-between p-1 mb-0 border-bottom bg-white", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "d-flex align-items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.Printer, { fontSize: 18, className: "text-primary me-50" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { className: "modal-title m-0 fw-bolder text-dark", children: t(title) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3.X, { fontSize: 20 }) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.ModalBody, { className: "p-1", style: { background: "#f8f9fa" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_reactstrap3.Row, { className: "g-1 h-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.Col, { lg: 4, md: 12, xs: 12, className: "h-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: "box d-flex flex-column h-100 p-1 border rounded",
+                style: { background: "#fff" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { className: "m-0 fw-bolder mb-1 pb-50 border-bottom", children: t("T\xF9y ch\u1EC9nh in") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    SettingPrint,
+                    {
+                      control,
+                      watch,
+                      setValue,
+                      errors,
+                      availableExtraFields,
+                      t
+                    }
+                  )
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.Col, { lg: 8, md: 12, xs: 12, className: "h-100", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: "box d-flex flex-column h-100 p-1 border rounded",
+                style: { background: "#fff" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h5", { className: "m-0 fw-bolder mb-1 pb-50 border-bottom", children: t("Danh s\xE1ch c\u1EA7n in m\xE3 v\u1EA1ch") }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "mt-50 flex-grow-1", children: renderTable ? renderTable({
+                    selectedItems: dataSelected,
+                    setSelectedItems: setDataSelected
+                  }) : children })
+                ]
+              }
+            ) })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "d-flex justify-content-end p-1 border-top",
+              style: { boxShadow: "0 4px 24px 0 rgb(34 41 47 / 10%)", background: "#fff" },
+              children: renderFooterButtons()
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      ModalPreviewPrint,
+      {
+        isOpen: openPreviewModal,
+        toggle: () => setOpenPreviewModal(false),
+        settings: getValues(),
+        items: dataSelected.length > 0 ? dataSelected : dataItem ? [dataItem] : [],
+        onPrint: handleRealPrint,
+        t
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ModalBarcodePrint,
+  ModalPreviewPrint,
+  PreviewPrint,
+  SettingPrint,
+  executePrint,
+  generateBarcodeHtml,
+  generatePrintDocument,
+  getOrganizationName,
+  getPaperSizeLabel,
+  renderSingleLabelHtml
+});
+//# sourceMappingURL=index.js.map