@asdp/ferryui 0.1.22-dev.10687 → 0.1.22-dev.10693

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.
package/dist/index.mjs CHANGED
@@ -12941,6 +12941,18 @@ var CardVehicleOwnerForm = ({
12941
12941
  const styles = useStyles27();
12942
12942
  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
12943
12943
  const formValues = watch();
12944
+ const [defaultOpenCargoItems, setOpenCargoItems] = React.useState(/* @__PURE__ */ new Set());
12945
+ useEffect(() => {
12946
+ const allOpenItems = /* @__PURE__ */ new Set();
12947
+ owners.forEach((owner) => {
12948
+ owner.cargoItems?.forEach((cargo) => {
12949
+ if (cargo._isAccordionOpen) {
12950
+ allOpenItems.add(`cargo-${cargo.id}`);
12951
+ }
12952
+ });
12953
+ });
12954
+ setOpenCargoItems(allOpenItems);
12955
+ }, [owners]);
12944
12956
  useEffect(() => {
12945
12957
  console.log("[CardVehicleOwnerForm] Form values changed:", formValues);
12946
12958
  }, [formValues]);
@@ -13437,9 +13449,18 @@ var CardVehicleOwnerForm = ({
13437
13449
  Accordion,
13438
13450
  {
13439
13451
  collapsible: true,
13440
- defaultOpenItems: owner.cargoItems?.map(
13441
- (cargo) => `cargo-${cargo.id}`
13442
- ) || [],
13452
+ defaultOpenItems: Array.from(defaultOpenCargoItems),
13453
+ onToggle: (e, data) => {
13454
+ const newOpenItems = new Set(data.openItems);
13455
+ setOpenCargoItems(newOpenItems);
13456
+ const updatedCargoItems = owner.cargoItems?.map((cargo) => ({
13457
+ ...cargo,
13458
+ _isAccordionOpen: newOpenItems.has(`cargo-${cargo.id}`)
13459
+ }));
13460
+ onUpdateOwner(owner.id, {
13461
+ cargoItems: updatedCargoItems
13462
+ });
13463
+ },
13443
13464
  multiple: true,
13444
13465
  children: owner.cargoItems?.map((cargo, cargoIndex) => {
13445
13466
  const watchCommodity = watch(
@@ -13485,19 +13506,65 @@ var CardVehicleOwnerForm = ({
13485
13506
  {
13486
13507
  className: styles.accordionHeader,
13487
13508
  expandIconPosition: "end",
13488
- children: /* @__PURE__ */ jsx(
13509
+ children: /* @__PURE__ */ jsxs(
13489
13510
  "div",
13490
13511
  {
13491
13512
  style: {
13492
13513
  display: "flex",
13493
- justifyContent: "space-between",
13494
- alignItems: "center",
13495
- width: "100%"
13514
+ flexDirection: "column",
13515
+ width: "100%",
13516
+ gap: "0.5rem"
13496
13517
  },
13497
- children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.cargoItemTitle.replace(
13498
- "{index}",
13499
- (cargoIndex + 1).toString()
13500
- ) })
13518
+ children: [
13519
+ /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.cargoItemTitle.replace(
13520
+ "{index}",
13521
+ (cargoIndex + 1).toString()
13522
+ ) }),
13523
+ _selectedLoadType && !cargo._isAccordionOpen && /* @__PURE__ */ jsxs(
13524
+ "div",
13525
+ {
13526
+ style: {
13527
+ display: "flex",
13528
+ justifyContent: "space-between",
13529
+ alignItems: "center",
13530
+ width: "100%"
13531
+ },
13532
+ children: [
13533
+ /* @__PURE__ */ jsxs(Body1Strong, { children: [
13534
+ _selectedLoadType.name,
13535
+ " \u2022",
13536
+ " ",
13537
+ watchQuantity,
13538
+ "x",
13539
+ " ",
13540
+ _selectedLoadType.unit?.name,
13541
+ " \u2022",
13542
+ " ",
13543
+ _selectedLoadType.formattedPrice
13544
+ ] }),
13545
+ /* @__PURE__ */ jsx(
13546
+ Body1Stronger,
13547
+ {
13548
+ style: {
13549
+ color: sharedColors["Shared_Secondary_Primary"]
13550
+ },
13551
+ children: new Intl.NumberFormat("id-ID", {
13552
+ style: "currency",
13553
+ currency: "IDR",
13554
+ minimumFractionDigits: 0
13555
+ }).format(
13556
+ Number(
13557
+ getValues(
13558
+ `owners.${index}.cargo.${cargoIndex}.quantity`
13559
+ ) || 0
13560
+ ) * (_selectedLoadType.price || 0)
13561
+ )
13562
+ }
13563
+ )
13564
+ ]
13565
+ }
13566
+ )
13567
+ ]
13501
13568
  }
13502
13569
  )
13503
13570
  }
@@ -13774,253 +13841,6 @@ var CardVehicleOwnerForm = ({
13774
13841
  }
13775
13842
  ) })
13776
13843
  ] }),
13777
- /* @__PURE__ */ jsxs(Row, { children: [
13778
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.estimatedLooseCargoQuantityLabel }) }),
13779
- /* @__PURE__ */ jsx(Col, { lg: 12, children: /* @__PURE__ */ jsxs(
13780
- "div",
13781
- {
13782
- style: {
13783
- display: "flex",
13784
- alignItems: "center",
13785
- border: `1px solid ${tokens.colorNeutralStroke1}`,
13786
- borderRadius: tokens.borderRadiusMedium,
13787
- height: "40px",
13788
- padding: "0 12px",
13789
- backgroundColor: tokens.colorNeutralBackground1
13790
- },
13791
- children: [
13792
- /* @__PURE__ */ jsx("div", { style: { flex: 0.5 } }),
13793
- /* @__PURE__ */ jsxs(
13794
- "div",
13795
- {
13796
- style: {
13797
- display: "flex",
13798
- alignItems: "center",
13799
- gap: "12px"
13800
- },
13801
- children: [
13802
- /* @__PURE__ */ jsx(
13803
- Button,
13804
- {
13805
- appearance: "transparent",
13806
- disabled,
13807
- icon: /* @__PURE__ */ jsx(
13808
- Icon,
13809
- {
13810
- icon: "fluent:subtract-circle-24-regular",
13811
- style: {
13812
- fontSize: "24px",
13813
- color: tokens.colorNeutralForeground4
13814
- }
13815
- }
13816
- ),
13817
- "aria-label": mergedLabels.decrementQuantityAriaLabel,
13818
- size: "small",
13819
- onClick: () => {
13820
- const currentVal = getValues(
13821
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
13822
- ) || 0;
13823
- const currentQty = Number(currentVal);
13824
- if (currentQty > 0) {
13825
- const newVal = currentQty - 1;
13826
- setValue(
13827
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
13828
- newVal
13829
- );
13830
- const updatedCargoItems = owner.cargoItems?.map(
13831
- (c, cIdx) => cIdx === cargoIndex ? {
13832
- ...c,
13833
- estimatedLooseCargoQuantity: newVal
13834
- } : c
13835
- );
13836
- onUpdateOwner(owner.id, {
13837
- cargoItems: updatedCargoItems
13838
- });
13839
- }
13840
- },
13841
- style: {
13842
- minWidth: "32px",
13843
- padding: "0"
13844
- }
13845
- }
13846
- ),
13847
- /* @__PURE__ */ jsx("div", { style: { width: "40px" }, children: /* @__PURE__ */ jsx(
13848
- Controller,
13849
- {
13850
- name: `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
13851
- control,
13852
- disabled,
13853
- render: ({ field }) => /* @__PURE__ */ jsx(
13854
- "input",
13855
- {
13856
- ...field,
13857
- min: 0,
13858
- step: "1",
13859
- type: "number",
13860
- style: {
13861
- border: "none",
13862
- width: "100%",
13863
- textAlign: "center",
13864
- outline: "none",
13865
- backgroundColor: "transparent",
13866
- color: tokens.colorNeutralForeground1,
13867
- fontSize: tokens.fontSizeBase400,
13868
- fontFamily: tokens.fontFamilyBase
13869
- },
13870
- onKeyDown: (e) => {
13871
- if ([
13872
- "e",
13873
- "E",
13874
- "+",
13875
- "-",
13876
- ".",
13877
- ","
13878
- ].includes(e.key)) {
13879
- e.preventDefault();
13880
- }
13881
- },
13882
- onPaste: (e) => {
13883
- const paste = e.clipboardData.getData(
13884
- "text"
13885
- );
13886
- if (!/^\d+$/.test(paste)) {
13887
- e.preventDefault();
13888
- }
13889
- },
13890
- onWheel: (e) => e.target.blur(),
13891
- onChange: (e) => {
13892
- const newVal = Number(
13893
- e.target.value
13894
- );
13895
- field.onChange(e);
13896
- const updatedCargoItems = owner.cargoItems?.map(
13897
- (c, cIdx) => cIdx === cargoIndex ? {
13898
- ...c,
13899
- estimatedLooseCargoQuantity: newVal
13900
- } : c
13901
- );
13902
- onUpdateOwner(owner.id, {
13903
- cargoItems: updatedCargoItems
13904
- });
13905
- }
13906
- }
13907
- ),
13908
- rules: {
13909
- validate: (val) => Number(val) >= 0
13910
- }
13911
- }
13912
- ) }),
13913
- /* @__PURE__ */ jsx(
13914
- Button,
13915
- {
13916
- appearance: "transparent",
13917
- disabled,
13918
- icon: /* @__PURE__ */ jsx(
13919
- Icon,
13920
- {
13921
- icon: "fluent:add-circle-24-regular",
13922
- style: {
13923
- fontSize: "24px",
13924
- color: tokens.colorBrandStroke1
13925
- }
13926
- }
13927
- ),
13928
- "aria-label": mergedLabels.incrementQuantityAriaLabel,
13929
- size: "small",
13930
- onClick: () => {
13931
- const currentVal = getValues(
13932
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
13933
- ) || 0;
13934
- const currentQty = Number(currentVal);
13935
- const newVal = currentQty + 1;
13936
- setValue(
13937
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`,
13938
- newVal
13939
- );
13940
- const updatedCargoItems = owner.cargoItems?.map(
13941
- (c, cIdx) => cIdx === cargoIndex ? {
13942
- ...c,
13943
- estimatedLooseCargoQuantity: newVal
13944
- } : c
13945
- );
13946
- onUpdateOwner(owner.id, {
13947
- cargoItems: updatedCargoItems
13948
- });
13949
- },
13950
- style: {
13951
- minWidth: "32px",
13952
- padding: "0"
13953
- }
13954
- }
13955
- )
13956
- ]
13957
- }
13958
- ),
13959
- /* @__PURE__ */ jsx(
13960
- "div",
13961
- {
13962
- style: {
13963
- flex: 1,
13964
- textAlign: "left",
13965
- color: tokens.colorNeutralForeground1,
13966
- fontSize: tokens.fontSizeBase300,
13967
- paddingRight: "8px"
13968
- },
13969
- children: mergedLabels.estimatedLooseCargoUnitLabel
13970
- }
13971
- )
13972
- ]
13973
- }
13974
- ) })
13975
- ] }),
13976
- /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { lg: 12, children: [
13977
- /* @__PURE__ */ jsx(Body1, { className: styles.label, children: mergedLabels.priceLabel }),
13978
- /* @__PURE__ */ jsx(
13979
- Body2,
13980
- {
13981
- style: { marginTop: "0.5rem" },
13982
- children: /* @__PURE__ */ jsxs(Row, { children: [
13983
- /* @__PURE__ */ jsx(Col, { xl: 6, children: /* @__PURE__ */ jsxs(Body1Strong, { children: [
13984
- watch(
13985
- `owners.${index}.cargo.${cargoIndex}.commodity`
13986
- ) || "Komoditas",
13987
- " ",
13988
- "\u2022 ",
13989
- watch(
13990
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
13991
- ) || 0,
13992
- "x",
13993
- " ",
13994
- mergedLabels.estimatedLooseCargoUnitLabel,
13995
- " ",
13996
- "\u2022 IDR. 15,000"
13997
- ] }) }),
13998
- /* @__PURE__ */ jsx(
13999
- Col,
14000
- {
14001
- xl: 6,
14002
- style: {
14003
- color: sharedColors["Shared_Secondary_Primary"],
14004
- textAlign: "right"
14005
- },
14006
- children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
14007
- "id-ID",
14008
- {
14009
- style: "currency",
14010
- currency: "IDR",
14011
- minimumFractionDigits: 0
14012
- }
14013
- ).format(
14014
- (watch(
14015
- `owners.${index}.cargo.${cargoIndex}.estimatedLooseCargoQuantity`
14016
- ) || 0) * 15e3
14017
- ) })
14018
- }
14019
- )
14020
- ] })
14021
- }
14022
- )
14023
- ] }) }),
14024
13844
  (() => {
14025
13845
  if (!_selectedLoadType) return null;
14026
13846
  return /* @__PURE__ */ jsxs(Row, { children: [
@@ -14245,7 +14065,10 @@ var CardVehicleOwnerForm = ({
14245
14065
  Col,
14246
14066
  {
14247
14067
  xl: 6,
14248
- style: { color: sharedColors["Shared_Secondary_Primary"], textAlign: "right" },
14068
+ style: {
14069
+ color: sharedColors["Shared_Secondary_Primary"],
14070
+ textAlign: "right"
14071
+ },
14249
14072
  children: /* @__PURE__ */ jsx(Body1Stronger, { children: new Intl.NumberFormat(
14250
14073
  "id-ID",
14251
14074
  {