esvn-react-barcode-print 1.0.2 → 1.0.4

package/dist/index.js

@@ -184,7 +184,10 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
     labelList = [sampleItem];
   } else {
     items.forEach((item) => {
-      const qty = Math.max(1, Number(item.printQuantity || item.quantity || 1));
+      var _a2, _b;
+      const rawQty = (_b = (_a2 = item.printQuantity) != null ? _a2 : item.quantity) != null ? _b : 1;
+      const parsedQty = typeof rawQty === "number" ? rawQty : parseInt(String(rawQty), 10);
+      const qty = Math.max(1, isNaN(parsedQty) ? 1 : parsedQty);
       for (let i = 0; i < qty; i++) {
         labelList.push({ ...item, companyName: orgName });
       }
@@ -196,6 +199,7 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
   if (labelList.length === 0) {
     return { html: "", totalStamps: 0, paperLabel, uniqueProducts: items.length };
   }
+  const enabledFieldsCount = (settings.fields || []).filter((f) => f.enabled).length || 4;
   let cols = 3;
   let pageSizeCss = "105mm auto";
   let pageMargin = "0";
@@ -203,9 +207,9 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
   let labelHeight = "22mm";
   let labelGap = "1.5mm";
   let bodyPadding = "1mm";
-  let stampPadding = "2px 4px";
-  let dynamicFontSize = "8px";
-  let barcodeHeight = 16;
+  let stampPadding = enabledFieldsCount >= 5 ? "1px 2px" : "1.5px 3px";
+  let dynamicFontSize = enabledFieldsCount >= 5 ? "6.8px" : enabledFieldsCount >= 4 ? "7.2px" : "7.8px";
+  let barcodeHeight = enabledFieldsCount >= 5 ? 12 : enabledFieldsCount >= 4 ? 14 : 16;
   let sheetWidth = "105mm";
   let sheetMinHeight = "60mm";
   let sheetPadding = "2mm 1mm";
@@ -235,9 +239,9 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
         labelHeight = "22mm";
         labelGap = "2mm";
         bodyPadding = "1mm";
-        stampPadding = "2px 4px";
-        dynamicFontSize = "8px";
-        barcodeHeight = 18;
+        stampPadding = enabledFieldsCount >= 5 ? "1px 2px" : "1.5px 3px";
+        dynamicFontSize = enabledFieldsCount >= 5 ? "7px" : enabledFieldsCount >= 4 ? "7.5px" : "8px";
+        barcodeHeight = enabledFieldsCount >= 5 ? 13 : enabledFieldsCount >= 4 ? 15 : 18;
         sheetWidth = "80mm";
         sheetMinHeight = "60mm";
         sheetPadding = "2mm 1mm";
@@ -251,9 +255,9 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
         labelHeight = "22mm";
         labelGap = "1.5mm";
         bodyPadding = "1mm";
-        stampPadding = "1px 3px";
-        dynamicFontSize = "7.5px";
-        barcodeHeight = 16;
+        stampPadding = enabledFieldsCount >= 5 ? "1px 2px" : "1px 3px";
+        dynamicFontSize = enabledFieldsCount >= 5 ? "6.8px" : enabledFieldsCount >= 4 ? "7.2px" : "7.6px";
+        barcodeHeight = enabledFieldsCount >= 5 ? 12 : enabledFieldsCount >= 4 ? 14 : 16;
         sheetWidth = "105mm";
         sheetMinHeight = "60mm";
         sheetPadding = "2mm 1mm";
@@ -404,6 +408,7 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
               width: 100%;
               min-height: ${isTest ? "48mm" : labelHeight === "auto" ? "22mm" : labelHeight};
               height: ${labelHeight === "auto" ? "auto" : labelHeight};
+              max-height: ${isTest ? "none" : labelHeight === "auto" ? "none" : labelHeight};
               padding: ${stampPadding};
               display: flex;
               flex-direction: column;
@@ -433,17 +438,21 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
             }
             .lbl-dynamic, .lbl-company, .lbl-code, .lbl-name, .lbl-price {
               font-size: ${dynamicFontSize};
-              line-height: 1.2;
+              line-height: 1.15;
               word-break: break-word;
-              white-space: normal;
-              margin-bottom: 2px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: ${enabledFieldsCount >= 5 ? 1 : 2};
+              margin-bottom: ${enabledFieldsCount >= 5 ? "1px" : "1.5px"};
             }
             .code-wrapper {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-              margin: 2px 0;
+              margin: ${enabledFieldsCount >= 5 ? "1px 0" : "1.5px 0"};
               width: 100%;
             }
             .barcode-svg-box {
@@ -507,6 +516,8 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
             .stamp-item {
               width: 100%;
               min-height: ${isTest ? "48mm" : labelHeight === "auto" ? "22mm" : labelHeight};
+              height: ${isTest ? "auto" : labelHeight === "auto" ? "auto" : labelHeight};
+              max-height: ${isTest ? "none" : labelHeight === "auto" ? "none" : labelHeight};
               padding: ${stampPadding};
               display: flex;
               flex-direction: column;
@@ -517,6 +528,7 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
               border: 1px solid #d8d6de;
               border-radius: 4px;
               background: #fff;
+              box-sizing: border-box;
             }
             .text-left {
               text-align: left;
@@ -528,17 +540,21 @@ var generatePrintDocument = (settings, items, isTest = false, isPreview = false)
             }
             .lbl-dynamic, .lbl-company, .lbl-code, .lbl-name, .lbl-price {
               font-size: ${dynamicFontSize};
-              line-height: 1.2;
+              line-height: 1.15;
               word-break: break-word;
-              white-space: normal;
-              margin-bottom: 2px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: ${enabledFieldsCount >= 5 ? 1 : 2};
+              margin-bottom: ${enabledFieldsCount >= 5 ? "1px" : "1.5px"};
             }
             .code-wrapper {
               display: flex;
               flex-direction: column;
               justify-content: center;
               align-items: center;
-              margin: 2px 0;
+              margin: ${enabledFieldsCount >= 5 ? "1px 0" : "1.5px 0"};
               width: 100%;
             }
             .barcode-svg-box {
@@ -605,7 +621,7 @@ 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 PreviewPrint = ({ watch, setValue, sampleData }) => {
   var _a, _b;
   const printType = Number((_a = watch("printType")) != null ? _a : 0);
   const fields = (_b = watch("fields")) != null ? _b : [];
@@ -620,21 +636,23 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
       return "T\xEAn c\xF4ng ty";
     }
   };
-  const sampleData = sampleItem || {
+  const effectiveSampleData = {
+    ...sampleData || {},
     companyName: getOrgName(),
-    code: "SP-001",
-    productCode: "SP-001",
-    name: "S\u1EA3n ph\u1EA9m m\u1EABu",
-    productName: "S\u1EA3n ph\u1EA9m m\u1EABu",
+    code: "SOMI",
+    productCode: "SOMI",
+    name: "\xC1o s\u01A1 mi nam",
+    productName: "\xC1o s\u01A1 mi nam",
     price: "250.000",
     unitPrice: "250.000",
     unitName: "C\xE1i",
     origin: "Vi\u1EC7t Nam",
-    categoryRootName: "Danh m\u1EE5c m\u1EABu",
+    categoryRootName: "Th\u1EDDi trang nam",
+    groupProductName: "Th\u1EDDi trang nam",
     lotSerial: "LOT-2026",
     specificationCode: "SIZE-L"
   };
-  const barcodeValue = sampleData.code || "SP-001";
+  const barcodeValue = "Hang-01";
   const hinge = watch("hinge");
   const alignStyle = {
     display: "flex",
@@ -661,10 +679,12 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
       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;
-      });
+      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 = () => {
@@ -761,8 +781,8 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
   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" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.codeText, ...alignStyle }, children: "SOMI" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.normalText, ...alignStyle }, children: "\xC1o s\u01A1 mi nam" }),
         renderCode(),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...styles.price, ...alignStyle }, children: "Gi\xE1: 250.000" })
       ] });
@@ -771,7 +791,7 @@ var PreviewPrint = ({ watch, setValue, sampleItem }) => {
       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 rawVal = field.type === "custom" ? field.customValue || field.label : effectiveSampleData[field.key] || effectiveSampleData[field.id] || field.label;
       const prefix = field.prefix || "";
       const suffix = field.suffix || "";
       const displayVal = `${prefix}${rawVal}${suffix}`;
@@ -856,23 +876,28 @@ var styles = {
   dynamicText: {
     fontSize: 13,
     color: "#111",
-    lineHeight: 1.25,
+    lineHeight: 1.2,
     marginBottom: 2,
     wordBreak: "break-word",
-    whiteSpace: "normal"
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: "-webkit-box",
+    WebkitBoxOrient: "vertical",
+    WebkitLineClamp: 2
   }
 };
+var preview_print_default = PreviewPrint;
 
 // src/components/setting-print.tsx
-var Icon = __toESM(require("becoxy-icons"));
+var import_becoxy_icons = 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 = [
+var AVAILABLE_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: "categoryRootName", key: "categoryRootName", label: "Nh\xF3m s\u1EA3n ph\u1EA9m", 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" }
@@ -885,7 +910,8 @@ var COLOR_PRESETS = [
   { label: "X\xE1m", value: "#6c757d" }
 ];
 var SettingPrint = (props) => {
-  const { control, watch, setValue, availableExtraFields = DEFAULT_EXTRA_FIELDS, t = (s) => s } = props;
+  const t = props.t || ((key) => key);
+  const { control, watch, setValue, availableExtraFields, sampleData } = 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);
@@ -926,71 +952,81 @@ var SettingPrint = (props) => {
     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]);
+      return;
+    }
+    const newId = fieldTemplate.id === "customText" ? `custom_${Date.now()}` : fieldTemplate.id;
+    const newField = {
+      id: newId,
+      key: fieldTemplate.key,
+      label: fieldTemplate.label,
+      type: fieldTemplate.type,
+      enabled: true,
+      bold: false,
+      italic: false,
+      underline: false,
+      color: "#000000",
+      fontSize: 13,
+      offsetX: 0,
+      prefix: fieldTemplate.prefix,
+      customValue: fieldTemplate.customValue || "N\u1ED9i dung t\xF9y ch\u1EC9nh"
+    };
+    setValue("fields", [...fields, newField], { shouldDirty: true, shouldTouch: true });
+    if (fieldTemplate.type === "custom") {
+      setExpandedFieldId(newId);
     }
   };
-  const updateFieldProperty = (index, propName, value) => {
+  const updateFieldStyle = (index, patch) => {
     const newFields = [...fields];
-    newFields[index] = { ...newFields[index], [propName]: value };
-    setValue("fields", newFields);
+    newFields[index] = { ...newFields[index], ...patch };
+    setValue("fields", newFields, { shouldDirty: true, shouldTouch: true });
   };
   const handleDragStart = (index) => {
     setDraggedIndex(index);
   };
-  const handleDragOver = (e, index) => {
+  const handleDragOver = (e) => {
     e.preventDefault();
-    if (draggedIndex === null || draggedIndex === index) {
+  };
+  const handleDrop = (dropIndex) => {
+    if (draggedIndex === null || draggedIndex === dropIndex) {
+      setDraggedIndex(null);
       return;
     }
     const newFields = [...fields];
-    const item = newFields.splice(draggedIndex, 1)[0];
-    newFields.splice(index, 0, item);
-    setDraggedIndex(index);
+    const draggedItem = newFields[draggedIndex];
+    newFields.splice(draggedIndex, 1);
+    newFields.splice(dropIndex, 0, draggedItem);
     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") }),
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-1 setting-print-container", style: { fontSize: "13px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "mb-2", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center mb-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "fw-bolder text-dark me-2", children: t("Lo\u1EA1i tem 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: [
+          render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", 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",
+                  name: "printType",
                   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.jsx)("span", { children: t("M\xE3 v\u1EA1ch") })
             ] }),
             /* @__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",
+                  name: "printType",
                   checked: Number(value) === 1,
                   onChange: () => onChange(1)
                 }
@@ -1000,16 +1036,16 @@ var SettingPrint = (props) => {
           ] })
         }
       )
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
-          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          className: "d-flex align-items-center cursor-pointer fw-bolder text-dark mb-1",
           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 })
+            openPaperSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Ch\u1ECDn kh\u1ED5 gi\u1EA5y") })
           ]
         }
       ),
@@ -1097,138 +1133,221 @@ var SettingPrint = (props) => {
                         type: "number",
                         min: 1,
                         max: 10,
-                        className: "form-control-sm text-center",
+                        className: "form-control-sm me-50 text-center",
                         style: { width: "60px" },
                         value: stampVal != null ? stampVal : 3,
-                        onChange: (e) => onStampChange(Math.max(1, Number(e.target.value) || 1))
+                        onChange: (e) => onStampChange(Number(e.target.value))
                       }
                     )
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "ms-50 small text-muted", children: t("tem/h\xE0ng") })
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted", style: { fontSize: "12px" }, children: t("tem/d\xF2ng") })
               ] })
             ] })
           ] })
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "div",
         {
-          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          className: "d-flex align-items-center justify-content-between cursor-pointer fw-bolder text-dark mb-1",
           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 })
-            ] })
-          ]
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+            openInfoSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("Th\xF4ng tin hi\u1EC3n th\u1ECB & \u0110\u1ECBnh d\u1EA1ng") })
+          ] })
         }
       ),
-      /* @__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) => {
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: openInfoSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "ps-1 pe-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex flex-column mb-1", style: { gap: "6px" }, children: fields.map((field, idx) => {
           const isExpanded = expandedFieldId === field.id;
-          const isDragging = draggedIndex === index;
+          const isBold = field.bold !== false;
+          const isItalic = !!field.italic;
+          const isUnderline = !!field.underline;
+          const currentColor = field.color || "#000000";
+          const currentFontSize = field.fontSize || 13;
+          const currentOffset = field.offsetX || 0;
           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",
+              className: "border rounded overflow-hidden",
               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"
+                background: field.enabled ? "#f8f9fa" : "#ffffff",
+                borderColor: isExpanded ? "#7367f0" : field.enabled ? "#d8d6de" : "#ebe9f1"
               },
               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.jsxs)(
+                  "div",
+                  {
+                    draggable: true,
+                    onDragStart: () => handleDragStart(idx),
+                    onDragOver: handleDragOver,
+                    onDrop: () => handleDrop(idx),
+                    className: "d-flex align-items-center justify-content-between p-50",
+                    style: {
+                      cursor: "grab",
+                      userSelect: "none",
+                      opacity: draggedIndex === idx ? 0.5 : 1
+                    },
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "8px" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Menu, { fontSize: 14, className: "text-muted", style: { cursor: "grab" } }),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Input,
+                          {
+                            type: "checkbox",
+                            checked: field.enabled,
+                            onChange: () => handleToggleField(idx),
+                            className: "mt-0"
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "span",
+                          {
+                            style: {
+                              fontWeight: isBold ? 700 : 400,
+                              fontStyle: isItalic ? "italic" : "normal",
+                              textDecoration: isUnderline ? "underline" : "none",
+                              color: field.enabled ? currentColor : "#888"
+                            },
+                            children: field.type === "custom" && field.customValue ? `T\xF9y ch\u1EC9nh: "${field.customValue}"` : t(field.label)
+                          }
+                        ),
+                        currentOffset > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "badge bg-light-primary text-primary", style: { fontSize: "10px", padding: "2px 4px" }, children: [
+                          "+",
+                          currentOffset,
+                          "px"
+                        ] })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "6px" }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            size: "sm",
+                            color: "flat-primary",
+                            className: "p-0 btn-icon",
+                            style: {
+                              width: "26px",
+                              height: "26px",
+                              display: "inline-flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              borderRadius: "6px",
+                              background: isExpanded ? "#7367f0" : "#f0f0f5",
+                              color: isExpanded ? "#ffffff" : "#5e5873",
+                              border: "none",
+                              boxShadow: isExpanded ? "0 2px 6px rgba(115, 103, 240, 0.4)" : "none",
+                              transition: "all 0.15s ease"
+                            },
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              setExpandedFieldId(isExpanded ? null : field.id);
+                            },
+                            title: t("T\xF9y ch\u1EC9nh \u0111\u1ECBnh d\u1EA1ng & L\xF9i l\u1EC1"),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Settings, { fontSize: 13 })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            size: "sm",
+                            color: "flat-secondary",
+                            className: "p-0 btn-icon",
+                            style: {
+                              width: "26px",
+                              height: "26px",
+                              display: "inline-flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              borderRadius: "6px",
+                              background: "#f0f0f5",
+                              border: "none"
+                            },
+                            disabled: idx === 0,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleMoveUp(idx);
+                            },
+                            title: t("Di chuy\u1EC3n l\xEAn"),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ArrowUp, { fontSize: 13 })
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            size: "sm",
+                            color: "flat-secondary",
+                            className: "p-0 btn-icon",
+                            style: {
+                              width: "26px",
+                              height: "26px",
+                              display: "inline-flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              borderRadius: "6px",
+                              background: "#f0f0f5",
+                              border: "none"
+                            },
+                            disabled: idx === fields.length - 1,
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleMoveDown(idx);
+                            },
+                            title: t("Di chuy\u1EC3n xu\u1ED1ng"),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ArrowDown, { fontSize: 13 })
+                          }
+                        ),
+                        field.type === "custom" || !["companyName", "productCode", "productName", "barcode", "unitPrice"].includes(field.id) ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Button,
+                          {
+                            size: "sm",
+                            color: "flat-danger",
+                            className: "p-0 btn-icon",
+                            style: {
+                              width: "26px",
+                              height: "26px",
+                              display: "inline-flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              borderRadius: "6px",
+                              background: "#fce8e6",
+                              color: "#ea5455",
+                              border: "none"
+                            },
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDeleteField(idx);
+                            },
+                            title: t("X\xF3a tr\u01B0\u1EDDng"),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Trash2, { fontSize: 13 })
+                          }
+                        ) : null
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_reactstrap.Collapse, { isOpen: isExpanded, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "p-1 border-top bg-white", style: { fontSize: "12px" }, children: [
+                  field.type === "custom" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted d-block mb-25 fw-bolder", children: [
+                      t("N\u1ED9i dung v\u0103n b\u1EA3n"),
+                      ":"
+                    ] }),
                     /* @__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
+                        type: "text",
+                        className: "form-control-sm",
+                        placeholder: t("Nh\u1EADp n\u1ED9i dung (vd: Hotline: 1900..., H\xE0ng ch\xEDnh h\xE3ng, v.v.)"),
+                        value: field.customValue || "",
+                        onChange: (e) => updateFieldStyle(idx, { customValue: e.target.value })
                       }
                     )
                   ] }),
-                  /* @__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: [
+                  field.type !== "barcode" && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
                         t("Ki\u1EC3u ch\u1EEF"),
                         ":"
                       ] }),
@@ -1236,189 +1355,191 @@ var SettingPrint = (props) => {
                         /* @__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" })
+                            color: isBold ? "primary" : "outline-secondary",
+                            className: "px-50 py-25 fw-bolder",
+                            onClick: () => updateFieldStyle(idx, { bold: !isBold }),
+                            title: t("In \u0111\u1EADm"),
+                            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" })
+                            color: isItalic ? "primary" : "outline-secondary",
+                            className: "px-50 py-25 fst-italic",
+                            onClick: () => updateFieldStyle(idx, { italic: !isItalic }),
+                            title: t("In nghi\xEAng"),
+                            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" })
+                            color: isUnderline ? "primary" : "outline-secondary",
+                            className: "px-50 py-25 text-decoration-underline",
+                            onClick: () => updateFieldStyle(idx, { underline: !isUnderline }),
+                            title: t("G\u1EA1ch ch\xE2n"),
+                            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 justify-content-between mb-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
+                        t("C\u1EE1 ch\u1EEF"),
                         ":"
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "4px" }, children: [
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           import_reactstrap.Button,
                           {
+                            size: "sm",
                             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 })
+                            className: "p-0 px-25 btn-icon",
+                            onClick: () => updateFieldStyle(idx, { fontSize: Math.max(8, currentFontSize - 1) }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Minus, { fontSize: 12 })
                           }
                         ),
-                        /* @__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.jsxs)("span", { className: "fw-bolder px-50 text-center", style: { minWidth: "35px" }, children: [
+                          currentFontSize,
+                          "px"
+                        ] }),
                         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                           import_reactstrap.Button,
                           {
+                            size: "sm",
                             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 })
+                            className: "p-0 px-25 btn-icon",
+                            onClick: () => updateFieldStyle(idx, { fontSize: Math.min(24, currentFontSize + 1) }),
+                            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Plus, { fontSize: 12 })
                           }
                         )
                       ] })
                     ] }),
-                    /* @__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: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-1", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "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"
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "6px" }, children: [
+                        COLOR_PRESETS.map((c) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          "div",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              updateFieldStyle(idx, { color: c.value });
+                            },
+                            style: {
+                              width: "18px",
+                              height: "18px",
+                              borderRadius: "50%",
+                              background: c.value,
+                              cursor: "pointer",
+                              border: currentColor === c.value ? "2px solid #7367f0" : "1px solid #ccc",
+                              boxShadow: currentColor === c.value ? "0 0 4px #7367f0" : "none"
+                            },
+                            title: c.label
+                          },
+                          c.value
+                        )),
+                        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                          import_reactstrap.Input,
+                          {
+                            type: "color",
+                            value: currentColor,
+                            onChange: (e) => updateFieldStyle(idx, { color: e.target.value }),
+                            style: { width: "24px", height: "22px", padding: 0, border: "none", cursor: "pointer" },
+                            title: t("M\xE0u t\u1EF1 ch\u1ECDn")
                           }
-                        },
-                        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.jsxs)("div", { className: "d-flex flex-column mt-50", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center justify-content-between mb-25", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "text-muted", children: [
+                        t("L\xF9i v\xE0o l\u1EC1 tr\xE1i (Th\u1EE5t l\u1EC1)"),
                         ":"
                       ] }),
-                      /* @__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: "
-                        }
-                      )
+                      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "fw-bolder text-primary", children: [
+                        currentOffset,
+                        "px"
+                      ] })
                     ] }),
-                    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.jsxs)("div", { className: "d-flex align-items-center", style: { gap: "8px" }, children: [
                       /* @__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 })
+                          type: "range",
+                          min: 0,
+                          max: 120,
+                          step: 2,
+                          value: currentOffset,
+                          onChange: (e) => updateFieldStyle(idx, { offsetX: Number(e.target.value) }),
+                          className: "form-range flex-grow-1"
                         }
                       ),
-                      /* @__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)(
+                      currentOffset > 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 })
+                          size: "sm",
+                          color: "flat-secondary",
+                          className: "p-0 px-25 text-muted",
+                          style: { fontSize: "11px" },
+                          onClick: () => updateFieldStyle(idx, { offsetX: 0 }),
+                          title: t("\u0110\u1EB7t l\u1EA1i v\u1EC1 0"),
+                          children: t("Reset")
                         }
                       )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("small", { className: "text-muted", style: { fontSize: "11px" }, children: [
+                      "\u{1F4A1} ",
+                      t("B\u1EA1n c\u0169ng c\xF3 th\u1EC3 click & k\xE9o chu\u1ED9t tr\u1EF1c ti\u1EBFp tr\xEAn khung xem tr\u01B0\u1EDBc b\xEAn d\u01B0\u1EDBi.")
                     ] })
                   ] })
-                ] })
+                ] }) })
               ]
             },
             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)("div", { className: "d-flex justify-content-start mb-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.UncontrolledDropdown, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_reactstrap.DropdownToggle, { color: "primary", outline: true, size: "sm", className: "d-flex align-items-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.Plus, { fontSize: 14, className: "me-50" }),
+            t("Th\xEAm tr\u01B0\u1EDDng th\xF4ng tin")
           ] }),
-          /* @__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.jsx)(import_reactstrap.DropdownMenu, { children: (availableExtraFields || AVAILABLE_EXTRA_FIELDS).map((item) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_reactstrap.DropdownItem,
+            {
+              onClick: () => handleAddField(item),
+              children: t(item.label)
+            },
+            item.id
+          )) })
         ] }) })
       ] }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "border-bottom pb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
         "div",
         {
-          className: "d-flex align-items-center justify-content-between cursor-pointer mb-75",
+          className: "d-flex align-items-center cursor-pointer fw-bolder text-dark mb-1",
           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 })
+            openCustomSection ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronDown, { fontSize: 16, className: "me-50" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_becoxy_icons.ChevronRight, { fontSize: 16, className: "me-50" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: t("T\xF9y ch\u1EC9nh gi\u1EA5y in") })
           ]
         }
       ),
-      /* @__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_reactstrap.Collapse, { isOpen: openCustomSection, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "ps-1", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mb-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "text-muted d-block mb-50", style: { fontSize: "12px" }, children: t("C\u0103n l\u1EC1 n\u1ED9i dung tem") }),
         /* @__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: [
+            render: ({ field: { value, onChange } }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "d-flex align-items-center", 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,
                   {
@@ -1431,7 +1552,7 @@ var SettingPrint = (props) => {
                 ),
                 /* @__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.jsxs)(import_reactstrap.Label, { className: "d-flex align-items-center mb-0 cursor-pointer", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   import_reactstrap.Input,
                   {
@@ -1454,13 +1575,13 @@ var SettingPrint = (props) => {
         /* @__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 }) })
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "d-flex justify-content-center", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(preview_print_default, { watch, setValue, sampleData }) })
     ] })
   ] }) });
 };
 
 // src/components/modal-preview-print.tsx
-var Icon2 = __toESM(require("becoxy-icons"));
+var Icon = __toESM(require("becoxy-icons"));
 var import_react3 = require("react");
 var import_reactstrap2 = require("reactstrap");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -1515,10 +1636,10 @@ var ModalPreviewPrint = ({
       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)(Icon.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.jsx)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.X, { fontSize: 20 }) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
           "div",
@@ -1588,7 +1709,7 @@ var ModalPreviewPrint = ({
                       style: { width: "22px", height: "22px" },
                       onClick: handleZoomOut,
                       title: t("Thu nh\u1ECF"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Minus, { fontSize: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Minus, { fontSize: 14 })
                     }
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -1612,7 +1733,7 @@ var ModalPreviewPrint = ({
                       style: { width: "22px", height: "22px" },
                       onClick: handleZoomIn,
                       title: t("Ph\xF3ng to"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Plus, { fontSize: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Plus, { fontSize: 14 })
                     }
                   )
                 ] })
@@ -1643,7 +1764,7 @@ var ModalPreviewPrint = ({
               onClick: onPrint,
               className: "d-flex align-items-center",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon2.Printer, { fontSize: 14, className: "me-50" }),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon.Printer, { fontSize: 14, className: "me-50" }),
                 t("In")
               ]
             }
@@ -1656,7 +1777,7 @@ var ModalPreviewPrint = ({
 };
 
 // src/components/modal-barcode-print.tsx
-var Icon3 = __toESM(require("becoxy-icons"));
+var Icon2 = __toESM(require("becoxy-icons"));
 var import_react4 = require("react");
 var import_react_hook_form2 = require("react-hook-form");
 var import_reactstrap3 = require("reactstrap");
@@ -1678,8 +1799,10 @@ var ModalBarcodePrint = ({
   dataSelected,
   setDataSelected,
   dataItem,
+  initialFields,
   defaultFields = DEFAULT_PRINT_FIELDS,
   availableExtraFields,
+  sampleData,
   renderTable,
   children,
   windowSize,
@@ -1688,6 +1811,7 @@ var ModalBarcodePrint = ({
   notifyError = (msg) => alert(msg),
   notifySuccess = (msg) => console.log(msg)
 }) => {
+  const effectiveDefaultFields = initialFields || defaultFields;
   const defaultValues = {
     printType: 0,
     paperSize: 2,
@@ -1699,13 +1823,18 @@ var ModalBarcodePrint = ({
     unitPrice: true,
     printSample: 3,
     hinge: false,
-    fields: defaultFields
+    fields: effectiveDefaultFields
   };
   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
   });
+  (0, import_react4.useEffect)(() => {
+    if (initialFields && initialFields.length > 0) {
+      setValue("fields", initialFields);
+    }
+  }, [initialFields]);
   const handleTestPrint = () => {
     const settings = getValues();
     const targetItems = dataSelected.length > 0 ? dataSelected : dataItem ? [dataItem] : [];
@@ -1754,19 +1883,19 @@ var ModalBarcodePrint = ({
   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" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.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" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.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" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.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" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.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") })
@@ -1784,10 +1913,10 @@ var ModalBarcodePrint = ({
         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 flex-shrink-0", 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)(Icon2.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)("div", { className: "cursor-pointer", onClick: toggle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon2.X, { fontSize: 20 }) })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_reactstrap3.ModalBody, { className: "p-1 flex-grow-1 overflow-hidden", 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 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -1805,6 +1934,7 @@ var ModalBarcodePrint = ({
                       setValue,
                       errors,
                       availableExtraFields,
+                      sampleData,
                       t
                     }
                   ) })