@fctc/sme-widget-ui 2.4.2 → 2.4.3

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 (5) hide show
  1. package/dist/index.js +37 -212
  2. package/dist/index.mjs +37 -212
  3. package/dist/widgets.js +37 -212
  4. package/dist/widgets.mjs +37 -212
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -32003,229 +32003,54 @@ var FeeField = (props) => {
32003
32003
  ) + " VND";
32004
32004
  const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
32005
32005
  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
32006
- value?.subtotals?.map((sub, idx) => {
32006
+ value?.subtotals?.map((sub) => {
32007
32007
  if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
32008
- return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { children: [
32009
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32010
- "div",
32011
- {
32012
- style: {
32013
- display: "grid",
32014
- gridTemplateColumns: "1fr 1fr",
32015
- gap: "8px 16px",
32016
- minWidth: "300px",
32017
- maxWidth: "fit-content",
32018
- marginLeft: "auto"
32019
- },
32020
- children: [
32021
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32022
- "div",
32023
- {
32024
- style: {
32025
- fontSize: "14px",
32026
- lineHeight: "21px",
32027
- textAlign: "right"
32028
- },
32029
- children: [
32030
- sub?.name,
32031
- ":"
32032
- ]
32033
- }
32034
- ),
32035
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
32036
- "div",
32037
- {
32038
- style: {
32039
- fontSize: "14px",
32040
- lineHeight: "21px",
32041
- textAlign: "right",
32042
- color: "rgb(73,80,87)",
32043
- fontWeight: 600
32044
- },
32045
- children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
32046
- }
32047
- )
32048
- ]
32049
- }
32050
- ),
32008
+ return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
32009
+ /* @__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: [
32010
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
32011
+ sub?.name,
32012
+ ":"
32013
+ ] }),
32014
+ /* @__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" })
32015
+ ] }),
32051
32016
  sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32052
32017
  "div",
32053
32018
  {
32054
- style: {
32055
- display: "grid",
32056
- gridTemplateColumns: "1fr 1fr",
32057
- gap: "8px 16px",
32058
- minWidth: "300px",
32059
- maxWidth: "fit-content",
32060
- marginLeft: "auto",
32061
- marginTop: "8px"
32062
- },
32019
+ className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
32063
32020
  children: [
32064
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32065
- "div",
32066
- {
32067
- style: {
32068
- fontSize: "14px",
32069
- lineHeight: "21px",
32070
- textAlign: "right"
32071
- },
32072
- children: [
32073
- group?.group_name,
32074
- ":"
32075
- ]
32076
- }
32077
- ),
32078
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
32079
- "div",
32080
- {
32081
- style: {
32082
- fontSize: "14px",
32083
- lineHeight: "21px",
32084
- textAlign: "right",
32085
- color: "rgb(73,80,87)"
32086
- },
32087
- children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
32088
- }
32089
- )
32021
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
32022
+ group?.group_name,
32023
+ ":"
32024
+ ] }),
32025
+ /* @__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" })
32090
32026
  ]
32091
32027
  },
32092
32028
  `tax_groups_${group?.id}`
32093
32029
  ))
32094
- ] }, `subtotal_${idx}`);
32030
+ ] });
32095
32031
  }
32096
32032
  }),
32097
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32098
- "div",
32099
- {
32100
- style: {
32101
- display: "grid",
32102
- gridTemplateColumns: "1fr 1fr",
32103
- gap: "8px 16px",
32104
- minWidth: "300px",
32105
- maxWidth: "fit-content",
32106
- marginLeft: "auto",
32107
- marginTop: "8px",
32108
- paddingTop: "8px"
32109
- },
32110
- children: [
32111
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32112
- "div",
32113
- {
32114
- style: {
32115
- fontSize: "14px",
32116
- lineHeight: "21px",
32117
- textAlign: "right"
32118
- },
32119
- children: [
32120
- t3("total"),
32121
- ":"
32122
- ]
32123
- }
32124
- ),
32125
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
32126
- "div",
32127
- {
32128
- style: {
32129
- fontSize: "20px",
32130
- lineHeight: "21px",
32131
- fontWeight: "bold",
32132
- color: "rgb(73,80,87)",
32133
- textAlign: "right"
32134
- },
32135
- children: totalAmount
32136
- }
32137
- )
32138
- ]
32139
- }
32140
- ),
32141
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32142
- "div",
32143
- {
32144
- style: {
32145
- display: "grid",
32146
- gridTemplateColumns: "1fr 1fr",
32147
- gap: "8px 16px",
32148
- minWidth: "300px",
32149
- maxWidth: "fit-content",
32150
- marginLeft: "auto",
32151
- marginTop: "8px",
32152
- paddingTop: "8px",
32153
- borderTop: "1px solid #c4c4c4ee"
32154
- },
32155
- children: [
32156
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32157
- "div",
32158
- {
32159
- style: {
32160
- fontSize: "14px",
32161
- lineHeight: "21px",
32162
- textAlign: "right"
32163
- },
32164
- children: [
32165
- t3("paid_amount"),
32166
- ":"
32167
- ]
32168
- }
32169
- ),
32170
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
32171
- "div",
32172
- {
32173
- style: {
32174
- fontSize: "18px",
32175
- lineHeight: "21px",
32176
- fontWeight: 600,
32177
- color: "rgb(73,80,87)",
32178
- textAlign: "right"
32179
- },
32180
- children: paid_amount
32181
- }
32182
- )
32183
- ]
32184
- }
32185
- ),
32186
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32187
- "div",
32188
- {
32189
- style: {
32190
- display: "grid",
32191
- gridTemplateColumns: "1fr 1fr",
32192
- gap: "8px 16px",
32193
- minWidth: "300px",
32194
- maxWidth: "fit-content",
32195
- marginLeft: "auto",
32196
- marginTop: "8px"
32197
- },
32198
- children: [
32199
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
32200
- "div",
32201
- {
32202
- style: {
32203
- fontSize: "14px",
32204
- lineHeight: "21px",
32205
- textAlign: "right"
32206
- },
32207
- children: [
32208
- t3("remanining_amount"),
32209
- ":"
32210
- ]
32211
- }
32212
- ),
32213
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
32214
- "div",
32215
- {
32216
- style: {
32217
- fontSize: "18px",
32218
- lineHeight: "21px",
32219
- fontWeight: 600,
32220
- color: "rgb(73,80,87)",
32221
- textAlign: "right"
32222
- },
32223
- children: remaining_amount
32224
- }
32225
- )
32226
- ]
32227
- }
32228
- )
32033
+ /* @__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: [
32034
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
32035
+ t3("total"),
32036
+ ":"
32037
+ ] }),
32038
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
32039
+ ] }),
32040
+ /* @__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: [
32041
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
32042
+ t3("paid_amount"),
32043
+ ":"
32044
+ ] }),
32045
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
32046
+ ] }),
32047
+ /* @__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: [
32048
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
32049
+ t3("remanining_amount"),
32050
+ ":"
32051
+ ] }),
32052
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
32053
+ ] })
32229
32054
  ] });
32230
32055
  };
32231
32056
 
package/dist/index.mjs CHANGED
@@ -31876,229 +31876,54 @@ var FeeField = (props) => {
31876
31876
  ) + " VND";
31877
31877
  const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
31878
31878
  return /* @__PURE__ */ jsxs60(Fragment25, { children: [
31879
- value?.subtotals?.map((sub, idx) => {
31879
+ value?.subtotals?.map((sub) => {
31880
31880
  if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
31881
- return /* @__PURE__ */ jsxs60("div", { children: [
31882
- /* @__PURE__ */ jsxs60(
31883
- "div",
31884
- {
31885
- style: {
31886
- display: "grid",
31887
- gridTemplateColumns: "1fr 1fr",
31888
- gap: "8px 16px",
31889
- minWidth: "300px",
31890
- maxWidth: "fit-content",
31891
- marginLeft: "auto"
31892
- },
31893
- children: [
31894
- /* @__PURE__ */ jsxs60(
31895
- "div",
31896
- {
31897
- style: {
31898
- fontSize: "14px",
31899
- lineHeight: "21px",
31900
- textAlign: "right"
31901
- },
31902
- children: [
31903
- sub?.name,
31904
- ":"
31905
- ]
31906
- }
31907
- ),
31908
- /* @__PURE__ */ jsx92(
31909
- "div",
31910
- {
31911
- style: {
31912
- fontSize: "14px",
31913
- lineHeight: "21px",
31914
- textAlign: "right",
31915
- color: "rgb(73,80,87)",
31916
- fontWeight: 600
31917
- },
31918
- children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
31919
- }
31920
- )
31921
- ]
31922
- }
31923
- ),
31881
+ return /* @__PURE__ */ jsxs60(Fragment25, { children: [
31882
+ /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
31883
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31884
+ sub?.name,
31885
+ ":"
31886
+ ] }),
31887
+ /* @__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" })
31888
+ ] }),
31924
31889
  sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs60(
31925
31890
  "div",
31926
31891
  {
31927
- style: {
31928
- display: "grid",
31929
- gridTemplateColumns: "1fr 1fr",
31930
- gap: "8px 16px",
31931
- minWidth: "300px",
31932
- maxWidth: "fit-content",
31933
- marginLeft: "auto",
31934
- marginTop: "8px"
31935
- },
31892
+ className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
31936
31893
  children: [
31937
- /* @__PURE__ */ jsxs60(
31938
- "div",
31939
- {
31940
- style: {
31941
- fontSize: "14px",
31942
- lineHeight: "21px",
31943
- textAlign: "right"
31944
- },
31945
- children: [
31946
- group?.group_name,
31947
- ":"
31948
- ]
31949
- }
31950
- ),
31951
- /* @__PURE__ */ jsx92(
31952
- "div",
31953
- {
31954
- style: {
31955
- fontSize: "14px",
31956
- lineHeight: "21px",
31957
- textAlign: "right",
31958
- color: "rgb(73,80,87)"
31959
- },
31960
- children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
31961
- }
31962
- )
31894
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31895
+ group?.group_name,
31896
+ ":"
31897
+ ] }),
31898
+ /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
31963
31899
  ]
31964
31900
  },
31965
31901
  `tax_groups_${group?.id}`
31966
31902
  ))
31967
- ] }, `subtotal_${idx}`);
31903
+ ] });
31968
31904
  }
31969
31905
  }),
31970
- /* @__PURE__ */ jsxs60(
31971
- "div",
31972
- {
31973
- style: {
31974
- display: "grid",
31975
- gridTemplateColumns: "1fr 1fr",
31976
- gap: "8px 16px",
31977
- minWidth: "300px",
31978
- maxWidth: "fit-content",
31979
- marginLeft: "auto",
31980
- marginTop: "8px",
31981
- paddingTop: "8px"
31982
- },
31983
- children: [
31984
- /* @__PURE__ */ jsxs60(
31985
- "div",
31986
- {
31987
- style: {
31988
- fontSize: "14px",
31989
- lineHeight: "21px",
31990
- textAlign: "right"
31991
- },
31992
- children: [
31993
- t3("total"),
31994
- ":"
31995
- ]
31996
- }
31997
- ),
31998
- /* @__PURE__ */ jsx92(
31999
- "div",
32000
- {
32001
- style: {
32002
- fontSize: "20px",
32003
- lineHeight: "21px",
32004
- fontWeight: "bold",
32005
- color: "rgb(73,80,87)",
32006
- textAlign: "right"
32007
- },
32008
- children: totalAmount
32009
- }
32010
- )
32011
- ]
32012
- }
32013
- ),
32014
- /* @__PURE__ */ jsxs60(
32015
- "div",
32016
- {
32017
- style: {
32018
- display: "grid",
32019
- gridTemplateColumns: "1fr 1fr",
32020
- gap: "8px 16px",
32021
- minWidth: "300px",
32022
- maxWidth: "fit-content",
32023
- marginLeft: "auto",
32024
- marginTop: "8px",
32025
- paddingTop: "8px",
32026
- borderTop: "1px solid #c4c4c4ee"
32027
- },
32028
- children: [
32029
- /* @__PURE__ */ jsxs60(
32030
- "div",
32031
- {
32032
- style: {
32033
- fontSize: "14px",
32034
- lineHeight: "21px",
32035
- textAlign: "right"
32036
- },
32037
- children: [
32038
- t3("paid_amount"),
32039
- ":"
32040
- ]
32041
- }
32042
- ),
32043
- /* @__PURE__ */ jsx92(
32044
- "div",
32045
- {
32046
- style: {
32047
- fontSize: "18px",
32048
- lineHeight: "21px",
32049
- fontWeight: 600,
32050
- color: "rgb(73,80,87)",
32051
- textAlign: "right"
32052
- },
32053
- children: paid_amount
32054
- }
32055
- )
32056
- ]
32057
- }
32058
- ),
32059
- /* @__PURE__ */ jsxs60(
32060
- "div",
32061
- {
32062
- style: {
32063
- display: "grid",
32064
- gridTemplateColumns: "1fr 1fr",
32065
- gap: "8px 16px",
32066
- minWidth: "300px",
32067
- maxWidth: "fit-content",
32068
- marginLeft: "auto",
32069
- marginTop: "8px"
32070
- },
32071
- children: [
32072
- /* @__PURE__ */ jsxs60(
32073
- "div",
32074
- {
32075
- style: {
32076
- fontSize: "14px",
32077
- lineHeight: "21px",
32078
- textAlign: "right"
32079
- },
32080
- children: [
32081
- t3("remanining_amount"),
32082
- ":"
32083
- ]
32084
- }
32085
- ),
32086
- /* @__PURE__ */ jsx92(
32087
- "div",
32088
- {
32089
- style: {
32090
- fontSize: "18px",
32091
- lineHeight: "21px",
32092
- fontWeight: 600,
32093
- color: "rgb(73,80,87)",
32094
- textAlign: "right"
32095
- },
32096
- children: remaining_amount
32097
- }
32098
- )
32099
- ]
32100
- }
32101
- )
31906
+ /* @__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: [
31907
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31908
+ t3("total"),
31909
+ ":"
31910
+ ] }),
31911
+ /* @__PURE__ */ jsx92("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
31912
+ ] }),
31913
+ /* @__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: [
31914
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31915
+ t3("paid_amount"),
31916
+ ":"
31917
+ ] }),
31918
+ /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
31919
+ ] }),
31920
+ /* @__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: [
31921
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31922
+ t3("remanining_amount"),
31923
+ ":"
31924
+ ] }),
31925
+ /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
31926
+ ] })
32102
31927
  ] });
32103
31928
  };
32104
31929
 
package/dist/widgets.js CHANGED
@@ -31252,229 +31252,54 @@ var FeeField = (props) => {
31252
31252
  ) + " VND";
31253
31253
  const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
31254
31254
  return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
31255
- value?.subtotals?.map((sub, idx) => {
31255
+ value?.subtotals?.map((sub) => {
31256
31256
  if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
31257
- return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { children: [
31258
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31259
- "div",
31260
- {
31261
- style: {
31262
- display: "grid",
31263
- gridTemplateColumns: "1fr 1fr",
31264
- gap: "8px 16px",
31265
- minWidth: "300px",
31266
- maxWidth: "fit-content",
31267
- marginLeft: "auto"
31268
- },
31269
- children: [
31270
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31271
- "div",
31272
- {
31273
- style: {
31274
- fontSize: "14px",
31275
- lineHeight: "21px",
31276
- textAlign: "right"
31277
- },
31278
- children: [
31279
- sub?.name,
31280
- ":"
31281
- ]
31282
- }
31283
- ),
31284
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
31285
- "div",
31286
- {
31287
- style: {
31288
- fontSize: "14px",
31289
- lineHeight: "21px",
31290
- textAlign: "right",
31291
- color: "rgb(73,80,87)",
31292
- fontWeight: 600
31293
- },
31294
- children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
31295
- }
31296
- )
31297
- ]
31298
- }
31299
- ),
31257
+ return /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(import_jsx_runtime90.Fragment, { children: [
31258
+ /* @__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: [
31259
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
31260
+ sub?.name,
31261
+ ":"
31262
+ ] }),
31263
+ /* @__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" })
31264
+ ] }),
31300
31265
  sub?.tax_groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31301
31266
  "div",
31302
31267
  {
31303
- style: {
31304
- display: "grid",
31305
- gridTemplateColumns: "1fr 1fr",
31306
- gap: "8px 16px",
31307
- minWidth: "300px",
31308
- maxWidth: "fit-content",
31309
- marginLeft: "auto",
31310
- marginTop: "8px"
31311
- },
31268
+ className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
31312
31269
  children: [
31313
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31314
- "div",
31315
- {
31316
- style: {
31317
- fontSize: "14px",
31318
- lineHeight: "21px",
31319
- textAlign: "right"
31320
- },
31321
- children: [
31322
- group?.group_name,
31323
- ":"
31324
- ]
31325
- }
31326
- ),
31327
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
31328
- "div",
31329
- {
31330
- style: {
31331
- fontSize: "14px",
31332
- lineHeight: "21px",
31333
- textAlign: "right",
31334
- color: "rgb(73,80,87)"
31335
- },
31336
- children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
31337
- }
31338
- )
31270
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
31271
+ group?.group_name,
31272
+ ":"
31273
+ ] }),
31274
+ /* @__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" })
31339
31275
  ]
31340
31276
  },
31341
31277
  `tax_groups_${group?.id}`
31342
31278
  ))
31343
- ] }, `subtotal_${idx}`);
31279
+ ] });
31344
31280
  }
31345
31281
  }),
31346
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31347
- "div",
31348
- {
31349
- style: {
31350
- display: "grid",
31351
- gridTemplateColumns: "1fr 1fr",
31352
- gap: "8px 16px",
31353
- minWidth: "300px",
31354
- maxWidth: "fit-content",
31355
- marginLeft: "auto",
31356
- marginTop: "8px",
31357
- paddingTop: "8px"
31358
- },
31359
- children: [
31360
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31361
- "div",
31362
- {
31363
- style: {
31364
- fontSize: "14px",
31365
- lineHeight: "21px",
31366
- textAlign: "right"
31367
- },
31368
- children: [
31369
- t3("total"),
31370
- ":"
31371
- ]
31372
- }
31373
- ),
31374
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
31375
- "div",
31376
- {
31377
- style: {
31378
- fontSize: "20px",
31379
- lineHeight: "21px",
31380
- fontWeight: "bold",
31381
- color: "rgb(73,80,87)",
31382
- textAlign: "right"
31383
- },
31384
- children: totalAmount
31385
- }
31386
- )
31387
- ]
31388
- }
31389
- ),
31390
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31391
- "div",
31392
- {
31393
- style: {
31394
- display: "grid",
31395
- gridTemplateColumns: "1fr 1fr",
31396
- gap: "8px 16px",
31397
- minWidth: "300px",
31398
- maxWidth: "fit-content",
31399
- marginLeft: "auto",
31400
- marginTop: "8px",
31401
- paddingTop: "8px",
31402
- borderTop: "1px solid #c4c4c4ee"
31403
- },
31404
- children: [
31405
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31406
- "div",
31407
- {
31408
- style: {
31409
- fontSize: "14px",
31410
- lineHeight: "21px",
31411
- textAlign: "right"
31412
- },
31413
- children: [
31414
- t3("paid_amount"),
31415
- ":"
31416
- ]
31417
- }
31418
- ),
31419
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
31420
- "div",
31421
- {
31422
- style: {
31423
- fontSize: "18px",
31424
- lineHeight: "21px",
31425
- fontWeight: 600,
31426
- color: "rgb(73,80,87)",
31427
- textAlign: "right"
31428
- },
31429
- children: paid_amount
31430
- }
31431
- )
31432
- ]
31433
- }
31434
- ),
31435
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31436
- "div",
31437
- {
31438
- style: {
31439
- display: "grid",
31440
- gridTemplateColumns: "1fr 1fr",
31441
- gap: "8px 16px",
31442
- minWidth: "300px",
31443
- maxWidth: "fit-content",
31444
- marginLeft: "auto",
31445
- marginTop: "8px"
31446
- },
31447
- children: [
31448
- /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(
31449
- "div",
31450
- {
31451
- style: {
31452
- fontSize: "14px",
31453
- lineHeight: "21px",
31454
- textAlign: "right"
31455
- },
31456
- children: [
31457
- t3("remanining_amount"),
31458
- ":"
31459
- ]
31460
- }
31461
- ),
31462
- /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
31463
- "div",
31464
- {
31465
- style: {
31466
- fontSize: "18px",
31467
- lineHeight: "21px",
31468
- fontWeight: 600,
31469
- color: "rgb(73,80,87)",
31470
- textAlign: "right"
31471
- },
31472
- children: remaining_amount
31473
- }
31474
- )
31475
- ]
31476
- }
31477
- )
31282
+ /* @__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: [
31283
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
31284
+ t3("total"),
31285
+ ":"
31286
+ ] }),
31287
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
31288
+ ] }),
31289
+ /* @__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: [
31290
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
31291
+ t3("paid_amount"),
31292
+ ":"
31293
+ ] }),
31294
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
31295
+ ] }),
31296
+ /* @__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: [
31297
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "text-[14px] leading-[21px] text-right", children: [
31298
+ t3("remanining_amount"),
31299
+ ":"
31300
+ ] }),
31301
+ /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
31302
+ ] })
31478
31303
  ] });
31479
31304
  };
31480
31305
 
package/dist/widgets.mjs CHANGED
@@ -31189,229 +31189,54 @@ var FeeField = (props) => {
31189
31189
  ) + " VND";
31190
31190
  const remaining_amount = formatNumberOnly(parseFloat(formValues?.amount_residual ?? 0)) + " VND";
31191
31191
  return /* @__PURE__ */ jsxs60(Fragment25, { children: [
31192
- value?.subtotals?.map((sub, idx) => {
31192
+ value?.subtotals?.map((sub) => {
31193
31193
  if (sub?.tax_amount > 0 && sub?.tax_groups?.length > 0) {
31194
- return /* @__PURE__ */ jsxs60("div", { children: [
31195
- /* @__PURE__ */ jsxs60(
31196
- "div",
31197
- {
31198
- style: {
31199
- display: "grid",
31200
- gridTemplateColumns: "1fr 1fr",
31201
- gap: "8px 16px",
31202
- minWidth: "300px",
31203
- maxWidth: "fit-content",
31204
- marginLeft: "auto"
31205
- },
31206
- children: [
31207
- /* @__PURE__ */ jsxs60(
31208
- "div",
31209
- {
31210
- style: {
31211
- fontSize: "14px",
31212
- lineHeight: "21px",
31213
- textAlign: "right"
31214
- },
31215
- children: [
31216
- sub?.name,
31217
- ":"
31218
- ]
31219
- }
31220
- ),
31221
- /* @__PURE__ */ jsx92(
31222
- "div",
31223
- {
31224
- style: {
31225
- fontSize: "14px",
31226
- lineHeight: "21px",
31227
- textAlign: "right",
31228
- color: "rgb(73,80,87)",
31229
- fontWeight: 600
31230
- },
31231
- children: formatNumberOnly(parseFloat(sub?.base_amount ?? 0)) + " VND"
31232
- }
31233
- )
31234
- ]
31235
- }
31236
- ),
31194
+ return /* @__PURE__ */ jsxs60(Fragment25, { children: [
31195
+ /* @__PURE__ */ jsxs60("div", { className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto", children: [
31196
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31197
+ sub?.name,
31198
+ ":"
31199
+ ] }),
31200
+ /* @__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" })
31201
+ ] }),
31237
31202
  sub?.tax_groups.map((group) => /* @__PURE__ */ jsxs60(
31238
31203
  "div",
31239
31204
  {
31240
- style: {
31241
- display: "grid",
31242
- gridTemplateColumns: "1fr 1fr",
31243
- gap: "8px 16px",
31244
- minWidth: "300px",
31245
- maxWidth: "fit-content",
31246
- marginLeft: "auto",
31247
- marginTop: "8px"
31248
- },
31205
+ className: "grid grid-cols-2 gap-x-4 gap-y-2 min-w-[300px] max-w-fit ml-auto mt-2",
31249
31206
  children: [
31250
- /* @__PURE__ */ jsxs60(
31251
- "div",
31252
- {
31253
- style: {
31254
- fontSize: "14px",
31255
- lineHeight: "21px",
31256
- textAlign: "right"
31257
- },
31258
- children: [
31259
- group?.group_name,
31260
- ":"
31261
- ]
31262
- }
31263
- ),
31264
- /* @__PURE__ */ jsx92(
31265
- "div",
31266
- {
31267
- style: {
31268
- fontSize: "14px",
31269
- lineHeight: "21px",
31270
- textAlign: "right",
31271
- color: "rgb(73,80,87)"
31272
- },
31273
- children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND"
31274
- }
31275
- )
31207
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31208
+ group?.group_name,
31209
+ ":"
31210
+ ] }),
31211
+ /* @__PURE__ */ jsx92("div", { className: "text-[14px] leading-[21px] text-[rgb(73,80,87)] text-right", children: formatNumberOnly(parseFloat(group?.tax_amount ?? 0)) + " VND" })
31276
31212
  ]
31277
31213
  },
31278
31214
  `tax_groups_${group?.id}`
31279
31215
  ))
31280
- ] }, `subtotal_${idx}`);
31216
+ ] });
31281
31217
  }
31282
31218
  }),
31283
- /* @__PURE__ */ jsxs60(
31284
- "div",
31285
- {
31286
- style: {
31287
- display: "grid",
31288
- gridTemplateColumns: "1fr 1fr",
31289
- gap: "8px 16px",
31290
- minWidth: "300px",
31291
- maxWidth: "fit-content",
31292
- marginLeft: "auto",
31293
- marginTop: "8px",
31294
- paddingTop: "8px"
31295
- },
31296
- children: [
31297
- /* @__PURE__ */ jsxs60(
31298
- "div",
31299
- {
31300
- style: {
31301
- fontSize: "14px",
31302
- lineHeight: "21px",
31303
- textAlign: "right"
31304
- },
31305
- children: [
31306
- t3("total"),
31307
- ":"
31308
- ]
31309
- }
31310
- ),
31311
- /* @__PURE__ */ jsx92(
31312
- "div",
31313
- {
31314
- style: {
31315
- fontSize: "20px",
31316
- lineHeight: "21px",
31317
- fontWeight: "bold",
31318
- color: "rgb(73,80,87)",
31319
- textAlign: "right"
31320
- },
31321
- children: totalAmount
31322
- }
31323
- )
31324
- ]
31325
- }
31326
- ),
31327
- /* @__PURE__ */ jsxs60(
31328
- "div",
31329
- {
31330
- style: {
31331
- display: "grid",
31332
- gridTemplateColumns: "1fr 1fr",
31333
- gap: "8px 16px",
31334
- minWidth: "300px",
31335
- maxWidth: "fit-content",
31336
- marginLeft: "auto",
31337
- marginTop: "8px",
31338
- paddingTop: "8px",
31339
- borderTop: "1px solid #c4c4c4ee"
31340
- },
31341
- children: [
31342
- /* @__PURE__ */ jsxs60(
31343
- "div",
31344
- {
31345
- style: {
31346
- fontSize: "14px",
31347
- lineHeight: "21px",
31348
- textAlign: "right"
31349
- },
31350
- children: [
31351
- t3("paid_amount"),
31352
- ":"
31353
- ]
31354
- }
31355
- ),
31356
- /* @__PURE__ */ jsx92(
31357
- "div",
31358
- {
31359
- style: {
31360
- fontSize: "18px",
31361
- lineHeight: "21px",
31362
- fontWeight: 600,
31363
- color: "rgb(73,80,87)",
31364
- textAlign: "right"
31365
- },
31366
- children: paid_amount
31367
- }
31368
- )
31369
- ]
31370
- }
31371
- ),
31372
- /* @__PURE__ */ jsxs60(
31373
- "div",
31374
- {
31375
- style: {
31376
- display: "grid",
31377
- gridTemplateColumns: "1fr 1fr",
31378
- gap: "8px 16px",
31379
- minWidth: "300px",
31380
- maxWidth: "fit-content",
31381
- marginLeft: "auto",
31382
- marginTop: "8px"
31383
- },
31384
- children: [
31385
- /* @__PURE__ */ jsxs60(
31386
- "div",
31387
- {
31388
- style: {
31389
- fontSize: "14px",
31390
- lineHeight: "21px",
31391
- textAlign: "right"
31392
- },
31393
- children: [
31394
- t3("remanining_amount"),
31395
- ":"
31396
- ]
31397
- }
31398
- ),
31399
- /* @__PURE__ */ jsx92(
31400
- "div",
31401
- {
31402
- style: {
31403
- fontSize: "18px",
31404
- lineHeight: "21px",
31405
- fontWeight: 600,
31406
- color: "rgb(73,80,87)",
31407
- textAlign: "right"
31408
- },
31409
- children: remaining_amount
31410
- }
31411
- )
31412
- ]
31413
- }
31414
- )
31219
+ /* @__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: [
31220
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31221
+ t3("total"),
31222
+ ":"
31223
+ ] }),
31224
+ /* @__PURE__ */ jsx92("div", { className: "text-xl leading-[21px] font-bold text-[rgb(73,80,87)] text-right ", children: totalAmount })
31225
+ ] }),
31226
+ /* @__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: [
31227
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31228
+ t3("paid_amount"),
31229
+ ":"
31230
+ ] }),
31231
+ /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: paid_amount })
31232
+ ] }),
31233
+ /* @__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: [
31234
+ /* @__PURE__ */ jsxs60("div", { className: "text-[14px] leading-[21px] text-right", children: [
31235
+ t3("remanining_amount"),
31236
+ ":"
31237
+ ] }),
31238
+ /* @__PURE__ */ jsx92("div", { className: "text-lg leading-[21px] font-semibold text-[rgb(73,80,87)] text-right ", children: remaining_amount })
31239
+ ] })
31415
31240
  ] });
31416
31241
  };
31417
31242
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fctc/sme-widget-ui",
3
- "version": "2.4.2",
3
+ "version": "2.4.3",
4
4
  "main": "dist/index.cjs",
5
5
  "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",