@fctc/sme-widget-ui 2.4.0 → 2.4.2

package/dist/widgets.js

@@ -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)",
@@ -12106,64 +12106,70 @@ var TableHead = (props) => {
               "data-type-co": col?.field?.type_co,
               "data-rtc-resizable": col?.name,
               className: `column whitespace-nowrap text-left p-3 text-sm font-semibold capitalize text-[#060606]`,
-              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "cursor-pointer flex items-center gap-[4px] w-full group relative", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
-                col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-                  (0, import_react_dom.createPortal)(
-                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                      M,
-                      {
-                        style: {
-                          padding: "6px 12px",
-                          fontSize: "12px",
-                          borderRadius: "4px",
-                          maxWidth: "200px",
-                          whiteSpace: "wrap",
-                          fontWeight: 400,
-                          textTransform: "none",
-                          zIndex: "9999"
-                        },
-                        id: `field-help-${col?.field?.name}`,
-                        content: col?.field?.help,
-                        place: "top"
-                      }
-                    ),
-                    document.body
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                    "span",
-                    {
-                      style: {
-                        width: "12px",
-                        height: "12px",
-                        minWidth: "12px",
-                        maxHeight: "12px",
-                        fontSize: "8px"
-                      },
-                      "data-tooltip-id": `field-help-${col?.field?.name}`,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                        "svg",
+              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+                "div",
+                {
+                  className: `cursor-pointer flex items-center gap-[4px] w-full group relative ${col?.field?.type === "monetary" && "justify-end"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "truncate line-clamp-1 w-fit", children: col.title }),
+                    col?.field?.help && /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
+                      (0, import_react_dom.createPortal)(
+                        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                          M,
+                          {
+                            style: {
+                              padding: "6px 12px",
+                              fontSize: "12px",
+                              borderRadius: "4px",
+                              maxWidth: "200px",
+                              whiteSpace: "wrap",
+                              fontWeight: 400,
+                              textTransform: "none",
+                              zIndex: "9999"
+                            },
+                            id: `field-help-${col?.field?.name}`,
+                            content: col?.field?.help,
+                            place: "top"
+                          }
+                        ),
+                        document.body
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                        "span",
                         {
-                          xmlns: "http://www.w3.org/2000/svg",
-                          width: "13",
-                          height: "13",
-                          viewBox: "0 0 13 13",
-                          fill: "none",
+                          style: {
+                            width: "12px",
+                            height: "12px",
+                            minWidth: "12px",
+                            maxHeight: "12px",
+                            fontSize: "8px"
+                          },
+                          "data-tooltip-id": `field-help-${col?.field?.name}`,
                           children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
-                            "path",
+                            "svg",
                             {
-                              fillRule: "evenodd",
-                              clipRule: "evenodd",
-                              d: "M6.25 12.5C9.70178 12.5 12.5 9.70178 12.5 6.25C12.5 2.79822 9.70178 0 6.25 0C2.79822 0 0 2.79822 0 6.25C0 9.70178 2.79822 12.5 6.25 12.5ZM7.36584 9.45858L7.46565 9.0506C7.41399 9.07486 7.3307 9.10258 7.21649 9.13414C7.10197 9.1657 6.9989 9.18177 6.90831 9.18177C6.71536 9.18177 6.57952 9.15014 6.50065 9.08657C6.42236 9.023 6.38331 8.90342 6.38331 8.72827C6.38331 8.65887 6.39509 8.55542 6.41973 8.42003C6.44361 8.28373 6.47108 8.16261 6.50161 8.05666L6.87419 6.73759C6.91068 6.61653 6.93571 6.48344 6.94916 6.33818C6.96292 6.19325 6.96932 6.09185 6.96932 6.03429C6.96932 5.75614 6.87182 5.53041 6.67676 5.35629C6.4817 5.18229 6.20393 5.09529 5.84396 5.09529C5.64365 5.09529 5.43188 5.13088 5.20776 5.202C4.98363 5.27294 4.74933 5.3584 4.50421 5.4582L4.40415 5.8665C4.47719 5.83949 4.56419 5.81043 4.66598 5.78034C4.76732 5.75038 4.86674 5.73489 4.96347 5.73489C5.16096 5.73489 5.29399 5.76856 5.3637 5.83488C5.43342 5.90139 5.46844 6.0197 5.46844 6.18883C5.46844 6.28236 5.45736 6.38626 5.43438 6.49919C5.41172 6.61282 5.38342 6.73298 5.35013 6.8598L4.97595 8.18419C4.94266 8.32336 4.91834 8.44787 4.90304 8.55843C4.88786 8.66886 4.88057 8.77724 4.88057 8.88262C4.88057 9.15482 4.98114 9.3792 5.18222 9.55627C5.38329 9.73264 5.66523 9.82143 6.02769 9.82143C6.26372 9.82143 6.47088 9.79057 6.64917 9.72854C6.82727 9.6667 7.06644 9.57675 7.36584 9.45858ZM7.29946 4.1002C7.47352 3.93882 7.56014 3.74254 7.56014 3.51272C7.56014 3.28341 7.47365 3.08675 7.29946 2.92331C7.12584 2.76032 6.91657 2.67857 6.6719 2.67857C6.42646 2.67857 6.21635 2.76013 6.04107 2.92331C5.86579 3.08675 5.77796 3.28334 5.77796 3.51272C5.77796 3.74254 5.86579 3.93875 6.04107 4.1002C6.21667 4.26217 6.42639 4.34321 6.6719 4.34321C6.91664 4.34321 7.12584 4.26217 7.29946 4.1002Z",
-                              fill: "#C3C3C3"
+                              xmlns: "http://www.w3.org/2000/svg",
+                              width: "13",
+                              height: "13",
+                              viewBox: "0 0 13 13",
+                              fill: "none",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+                                "path",
+                                {
+                                  fillRule: "evenodd",
+                                  clipRule: "evenodd",
+                                  d: "M6.25 12.5C9.70178 12.5 12.5 9.70178 12.5 6.25C12.5 2.79822 9.70178 0 6.25 0C2.79822 0 0 2.79822 0 6.25C0 9.70178 2.79822 12.5 6.25 12.5ZM7.36584 9.45858L7.46565 9.0506C7.41399 9.07486 7.3307 9.10258 7.21649 9.13414C7.10197 9.1657 6.9989 9.18177 6.90831 9.18177C6.71536 9.18177 6.57952 9.15014 6.50065 9.08657C6.42236 9.023 6.38331 8.90342 6.38331 8.72827C6.38331 8.65887 6.39509 8.55542 6.41973 8.42003C6.44361 8.28373 6.47108 8.16261 6.50161 8.05666L6.87419 6.73759C6.91068 6.61653 6.93571 6.48344 6.94916 6.33818C6.96292 6.19325 6.96932 6.09185 6.96932 6.03429C6.96932 5.75614 6.87182 5.53041 6.67676 5.35629C6.4817 5.18229 6.20393 5.09529 5.84396 5.09529C5.64365 5.09529 5.43188 5.13088 5.20776 5.202C4.98363 5.27294 4.74933 5.3584 4.50421 5.4582L4.40415 5.8665C4.47719 5.83949 4.56419 5.81043 4.66598 5.78034C4.76732 5.75038 4.86674 5.73489 4.96347 5.73489C5.16096 5.73489 5.29399 5.76856 5.3637 5.83488C5.43342 5.90139 5.46844 6.0197 5.46844 6.18883C5.46844 6.28236 5.45736 6.38626 5.43438 6.49919C5.41172 6.61282 5.38342 6.73298 5.35013 6.8598L4.97595 8.18419C4.94266 8.32336 4.91834 8.44787 4.90304 8.55843C4.88786 8.66886 4.88057 8.77724 4.88057 8.88262C4.88057 9.15482 4.98114 9.3792 5.18222 9.55627C5.38329 9.73264 5.66523 9.82143 6.02769 9.82143C6.26372 9.82143 6.47088 9.79057 6.64917 9.72854C6.82727 9.6667 7.06644 9.57675 7.36584 9.45858ZM7.29946 4.1002C7.47352 3.93882 7.56014 3.74254 7.56014 3.51272C7.56014 3.28341 7.47365 3.08675 7.29946 2.92331C7.12584 2.76032 6.91657 2.67857 6.6719 2.67857C6.42646 2.67857 6.21635 2.76013 6.04107 2.92331C5.86579 3.08675 5.77796 3.28334 5.77796 3.51272C5.77796 3.74254 5.86579 3.93875 6.04107 4.1002C6.21667 4.26217 6.42639 4.34321 6.6719 4.34321C6.91664 4.34321 7.12584 4.26217 7.29946 4.1002Z",
+                                  fill: "#C3C3C3"
+                                }
+                              )
                             }
                           )
                         }
                       )
-                    }
-                  )
-                ] })
-              ] })
+                    ] })
+                  ]
+                }
+              )
             },
             "table-head-" + index4
           );
@@ -31246,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
+            }
+          )
+        ]
+      }
+    )
   ] });
 };