npm - @fctc/sme-widget-ui - Versions diffs - 2.4.1 → 2.4.2 - Mend

@fctc/sme-widget-ui 2.4.1 → 2.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.js CHANGED Viewed

@@ -9984,7 +9984,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",
@@ -32003,54 +32003,229 @@ var FeeField = (props) => {
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-    value?.subtotals?.map((sub) => {
+    value?.subtotals?.map((sub, idx) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-              sub?.name,
-              ":"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
-          ] }),
+        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      sub?.name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)",
+                      fontWeight: 600
+                    },
+                    children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
+                  }
+                )
+              ]
+            }
+          ),
           sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
             "div",
             {
-              className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto",
+                marginTop: "8px"
+              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-                  group?.group_name,
-                  ":"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      group?.group_name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)"
+                    },
+                    children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
+                  }
+                )
               ]
             },
             `tax_groups_${group?.id}`
           ))
-        ] });
+        ] }, `subtotal_${idx}`);
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("total"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("paid_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("remanining_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("total"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "20px",
+                lineHeight: "21px",
+                fontWeight: "bold",
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: totalAmount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px",
+          borderTop: "1px solid #c4c4c4ee"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("paid_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: paid_amount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("remanining_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: remaining_amount
+            }
+          )
+        ]
+      }
+    )
   ] });
 };

package/dist/index.mjs CHANGED Viewed

@@ -9857,7 +9857,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",
@@ -31876,54 +31876,229 @@ var FeeField = (props) => {
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
   return /* @__PURE__ */ jsxs60(Fragment25, { children: [
-    value?.subtotals?.map((sub) => {
+    value?.subtotals?.map((sub, idx) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs60(Fragment25, { children: [
-          /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-              sub?.name,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
-          ] }),
+        return /* @__PURE__ */ jsxs60("div", { children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto"
+              },
+              children: [
+                /* @__PURE__ */ jsxs60(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      sub?.name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx92(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)",
+                      fontWeight: 600
+                    },
+                    children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
+                  }
+                )
+              ]
+            }
+          ),
           sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs60(
             "div",
             {
-              className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto",
+                marginTop: "8px"
+              },
               children: [
-                /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-                  group?.group_name,
-                  ":"
-                ] }),
-                /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ jsxs60(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      group?.group_name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx92(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)"
+                    },
+                    children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
+                  }
+                )
               ]
             },
             `tax_groups_${group?.id}`
           ))
-        ] });
+        ] }, `subtotal_${idx}`);
       }
     }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("total"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
-    ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("paid_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
-    ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("remanining_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
-    ] })
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("total"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "20px",
+                lineHeight: "21px",
+                fontWeight: "bold",
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: totalAmount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px",
+          borderTop: "1px solid #c4c4c4ee"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("paid_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: paid_amount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("remanining_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: remaining_amount
+            }
+          )
+        ]
+      }
+    )
   ] });
 };

package/dist/utils.js CHANGED Viewed

@@ -6853,7 +6853,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",

package/dist/utils.mjs CHANGED Viewed

@@ -6830,7 +6830,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",

package/dist/widgets.js CHANGED Viewed

@@ -7777,7 +7777,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",
@@ -31252,54 +31252,229 @@ var FeeField = (props) => {
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-    value?.subtotals?.map((sub) => {
+    value?.subtotals?.map((sub, idx) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-              sub?.name,
-              ":"
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
-          ] }),
+        return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto"
+              },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      sub?.name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)",
+                      fontWeight: 600
+                    },
+                    children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
+                  }
+                )
+              ]
+            }
+          ),
           sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
             "div",
             {
-              className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto",
+                marginTop: "8px"
+              },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-                  group?.group_name,
-                  ":"
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      group?.group_name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)"
+                    },
+                    children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
+                  }
+                )
               ]
             },
             `tax_groups_${group?.id}`
           ))
-        ] });
+        ] }, `subtotal_${idx}`);
       }
     }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("total"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("paid_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("remanining_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
-    ] })
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("total"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "20px",
+                lineHeight: "21px",
+                fontWeight: "bold",
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: totalAmount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px",
+          borderTop: "1px solid #c4c4c4ee"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("paid_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: paid_amount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("remanining_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: remaining_amount
+            }
+          )
+        ]
+      }
+    )
   ] });
 };

package/dist/widgets.mjs CHANGED Viewed

@@ -7714,7 +7714,7 @@ var vi_default = {
   invalid_number: "\u0110\u1ECBnh d\u1EA1ng s\u1ED1 kh\xF4ng h\u1EE3p l\u1EC7",
   upload_file_placeholder: "T\u1EA3i t\u1EC7p c\u1EE7a b\u1EA1n",
   "no-available": "Kh\xF4ng c\xF3 l\u1EF1a ch\u1ECDn n\xE0o",
-  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 \u0111\xF3ng",
+  paid_amount: "S\u1ED1 ti\u1EC1n \u0111\xE3 tr\u1EA3",
   remanining_amount: "S\u1ED1 ti\u1EC1n c\xF2n l\u1EA1i",
   only_image_accept: "Ch\u1EC9 \u0111\u01B0\u1EE3c upload file h\xECnh \u1EA3nh",
   "text-only": "Ch\u1EC9 \u0111\u01B0\u1EE3c nh\u1EADp ch\u1EEF (kh\xF4ng ch\u1EE9a s\u1ED1 v\xE0 k\xFD t\u1EF1 \u0111\u1EB7c bi\u1EC7t)",
@@ -31189,54 +31189,229 @@ var FeeField = (props) => {
   ) + " VND";
   const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
   return /* @__PURE__ */ jsxs60(Fragment25, { children: [
-    value?.subtotals?.map((sub) => {
+    value?.subtotals?.map((sub, idx) => {
       if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
-        return /* @__PURE__ */ jsxs60(Fragment25, { children: [
-          /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
-            /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-              sub?.name,
-              ":"
-            ] }),
-            /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right font-semibold", children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND" })
-          ] }),
+        return /* @__PURE__ */ jsxs60("div", { children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto"
+              },
+              children: [
+                /* @__PURE__ */ jsxs60(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      sub?.name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx92(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)",
+                      fontWeight: 600
+                    },
+                    children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
+                  }
+                )
+              ]
+            }
+          ),
           sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs60(
             "div",
             {
-              className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "8px 16px",
+                minWidth: "300px",
+                maxWidth: "fit-content",
+                marginLeft: "auto",
+                marginTop: "8px"
+              },
               children: [
-                /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-                  group?.group_name,
-                  ":"
-                ] }),
-                /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
+                /* @__PURE__ */ jsxs60(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right"
+                    },
+                    children: [
+                      group?.group_name,
+                      ":"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx92(
+                  "div",
+                  {
+                    style: {
+                      fontSize: "14px",
+                      lineHeight: "21px",
+                      textAlign: "right",
+                      color: "rgb(73,80,87)"
+                    },
+                    children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
+                  }
+                )
               ]
             },
             `tax_groups_${group?.id}`
           ))
-        ] });
+        ] }, `subtotal_${idx}`);
       }
     }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("total"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
-    ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 pt-2 lg:mt-5 lg:pt-5 border-t border-[#c4c4c4ee]", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("paid_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
-    ] }),
-    /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2 lg:mt-3", children: [
-      /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
-        t3("remanining_amount"),
-        ":"
-      ] }),
-      /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
-    ] })
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("total"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "20px",
+                lineHeight: "21px",
+                fontWeight: "bold",
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: totalAmount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px",
+          paddingTop: "8px",
+          borderTop: "1px solid #c4c4c4ee"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("paid_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: paid_amount
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs60(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: "8px 16px",
+          minWidth: "300px",
+          maxWidth: "fit-content",
+          marginLeft: "auto",
+          marginTop: "8px"
+        },
+        children: [
+          /* @__PURE__ */ jsxs60(
+            "div",
+            {
+              style: {
+                fontSize: "14px",
+                lineHeight: "21px",
+                textAlign: "right"
+              },
+              children: [
+                t3("remanining_amount"),
+                ":"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx92(
+            "div",
+            {
+              style: {
+                fontSize: "18px",
+                lineHeight: "21px",
+                fontWeight: 600,
+                color: "rgb(73,80,87)",
+                textAlign: "right"
+              },
+              children: remaining_amount
+            }
+          )
+        ]
+      }
+    )
   ] });
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fctc/sme-widget-ui",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",