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