@asdp/ferryui 0.1.22-dev.9339 → 0.1.22-dev.9415

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Subtitle1, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
 import { ArrowDownloadRegular, Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
@@ -3707,8 +3707,14 @@ var InputDynamic = ({
               if (isMultiSelect) {
                 const values = selectedOption ? selectedOption.map((opt) => opt.value) : [];
                 field.onChange(values);
+                if (onChange) {
+                  onChange(values);
+                }
               } else {
                 field.onChange(selectedOption ? selectedOption.value : "");
+                if (onChange) {
+                  onChange(selectedOption ? selectedOption.value : "");
+                }
               }
             },
             getOptionLabel: (option) => option.label,
@@ -5406,7 +5412,9 @@ var DEFAULT_LABELS10 = {
     harborNotFound: "Pelabuhan tidak ditemukan",
     closeAriaLabel: "Tutup",
     popularHarborHeader: "Pelabuhan Populer",
-    favoriteHeader: "Favorit"
+    favoriteHeader: "Favorit",
+    emptyContent: "Pelabuhan",
+    travelPlanHeader: "Rencana Perjalanan"
   },
   en: {
     title: "Select Harbor",
@@ -5418,10 +5426,113 @@ var DEFAULT_LABELS10 = {
     harborNotFound: "Harbor not found",
     closeAriaLabel: "Close",
     popularHarborHeader: "Popular Harbor",
-    favoriteHeader: "Favorite"
+    favoriteHeader: "Favorite",
+    emptyContent: "Harbor",
+    travelPlanHeader: "Travel Plan"
+  }
+};
+
+// src/components/EmptyContent/EmptyContent.constants.ts
+var DEFAULT_LABELS11 = {
+  id: {
+    defaultImageAlt: "Tidak ada konten",
+    defaultTitle: "Data {konten} belum bisa dimuat",
+    defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
+    defaultButtonText: "Muat Ulang"
+  },
+  en: {
+    defaultImageAlt: "No content available",
+    defaultTitle: "Data {content} could not be loaded",
+    defaultMessage: "Please try reloading this page or check back in a few moments.",
+    defaultButtonText: "Reload"
+  }
+};
+var getFormattedDefaultTitle = (template, content) => {
+  if (content) {
+    return template.replace(/\{(konten|content)\}/g, content);
   }
+  return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
 };
 var useStyles11 = makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: tokens.spacingVerticalL,
+    textAlign: "center",
+    paddingTop: tokens.spacingVerticalXXL,
+    paddingBottom: tokens.spacingVerticalXXL,
+    paddingLeft: tokens.spacingHorizontalXL,
+    paddingRight: tokens.spacingHorizontalXL,
+    width: "100%"
+  },
+  image: {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  textContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: tokens.spacingVerticalS,
+    maxWidth: "400px"
+  },
+  title: {
+    fontWeight: "600"
+  },
+  message: {
+    color: tokens.colorNeutralForeground3,
+    textAlign: "center"
+  }
+});
+var EmptyContent = ({
+  title,
+  content,
+  message,
+  imageSrc = "/assets/images/illustrations/no-content.svg",
+  imageAlt,
+  imageWidth = 240,
+  imageHeight = 180,
+  actionButton,
+  language = "id",
+  labels,
+  className
+}) => {
+  const styles = useStyles11();
+  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
+  const displayMessage = message ?? mergedLabels.defaultMessage;
+  const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
+  return /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.root, className), children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: displayImageAlt,
+        width: imageWidth,
+        height: imageHeight,
+        className: styles.image
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: styles.textContainer, children: [
+      /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }),
+      typeof displayMessage === "string" ? /* @__PURE__ */ jsx(Body1, { className: styles.message, children: displayMessage }) : displayMessage
+    ] }),
+    actionButton && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        appearance: actionButton.appearance || "primary",
+        onClick: actionButton.onClick,
+        shape: "circular",
+        style: { width: "100%" },
+        children: actionButton.text
+      }
+    )
+  ] });
+};
+var useStyles12 = makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -5559,7 +5670,7 @@ var HarborListItem = ({
   showDivider,
   containerClassName
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: containerClassName, children: [
       /* @__PURE__ */ jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
@@ -5582,6 +5693,57 @@ var HarborListItem = ({
     showDivider && /* @__PURE__ */ jsx(Divider, {})
   ] });
 };
+var HarborListSkeleton = ({
+  count = 5,
+  showFavoriteIcon = false
+}) => {
+  const styles = useStyles12();
+  return /* @__PURE__ */ jsx("div", { className: styles.harborList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
+    /* @__PURE__ */ jsxs(
+      Skeleton,
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          width: "70%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "100%",
+                height: "20px",
+                borderRadius: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    showFavoriteIcon && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+      SkeletonItem,
+      {
+        style: {
+          width: "24px",
+          height: "24px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalSearchHarbor = ({
   language = "id",
   labels,
@@ -5592,7 +5754,8 @@ var ModalSearchHarbor = ({
   harbors,
   favoriteHarbors,
   lastSearchedHarbors,
-  isLoading = false,
+  isLoadingPort = false,
+  isLoadingTravelPlan = false,
   searchQuery,
   onSearchChange,
   onSelectHarbor,
@@ -5601,11 +5764,18 @@ var ModalSearchHarbor = ({
   onRemoveLastSearched,
   onClearLastSearched,
   onClearFavorite,
+  reloadButtonPort,
+  reloadButtonTravelPlan,
+  reloadButtonAll,
   popularHarbors,
-  showButtonFavorite = true
+  showButtonFavorite = true,
+  emptyImageSrc = "",
+  isErrorTravelPlan = false,
+  isErrorPort = false
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
+  const isError = isErrorTravelPlan && isErrorPort;
   const handleSelect = (harbor) => {
     onAddLastSearched(harbor);
     onSelectHarbor(harbor);
@@ -5641,7 +5811,15 @@ var ModalSearchHarbor = ({
             children: title || mergedLabels.title
           }
         ),
-        /* @__PURE__ */ jsxs(DialogContent, { className: styles.content, children: [
+        /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isError ? /* @__PURE__ */ jsx(
+          EmptyContent,
+          {
+            content: mergedLabels.emptyContent,
+            language,
+            actionButton: reloadButtonAll,
+            imageSrc: emptyImageSrc
+          }
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
             Input,
             {
@@ -5660,177 +5838,154 @@ var ModalSearchHarbor = ({
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: styles.resultList, children: [
-            favoriteHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.favoriteHeader }),
-                /* @__PURE__ */ jsx(
-                  Caption1,
+            isErrorTravelPlan ? /* @__PURE__ */ jsx(Fragment, {}) : isLoadingTravelPlan ? /* @__PURE__ */ jsx(HarborListSkeleton, { count: 3, showFavoriteIcon: false }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              favoriteHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.favoriteHeader }),
+                  /* @__PURE__ */ jsx(
+                    Caption1,
+                    {
+                      className: mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearFavorite,
+                      children: mergedLabels.clearAllButton
+                    }
+                  )
+                ] }),
+                favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxs(
+                  Button,
                   {
-                    className: mergeClasses(
-                      styles.dangerText,
-                      styles.cursorPointer
+                    onClick: () => handleSelect(harbor),
+                    size: "medium",
+                    appearance: "subtle",
+                    iconPosition: "before",
+                    className: styles.circularButton,
+                    icon: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        icon: "fluent:vehicle-ship-20-regular",
+                        fontSize: 20,
+                        color: tokens.colorBrandBackground
+                      }
                     ),
-                    onClick: onClearFavorite,
-                    children: mergedLabels.clearAllButton
-                  }
-                )
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: styles.buttonContent, children: [
+                        /* @__PURE__ */ jsx(Body1, { children: harbor.portName }),
+                        /* @__PURE__ */ jsx(Caption1, { children: harbor.branchName })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Icon,
+                        {
+                          icon: "fluent:star-24-filled",
+                          fontSize: 20,
+                          color: tokens.colorBrandBackground,
+                          style: { marginLeft: 5 }
+                        }
+                      )
+                    ]
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              favoriteHarbors.length > 0 && /* @__PURE__ */ jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  onClick: () => handleSelect(harbor),
-                  size: "medium",
-                  appearance: "subtle",
-                  iconPosition: "before",
-                  className: styles.circularButton,
-                  icon: /* @__PURE__ */ jsx(
-                    Icon,
+              lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                  /* @__PURE__ */ jsx(
+                    Caption1,
                     {
-                      icon: "fluent:vehicle-ship-20-regular",
-                      fontSize: 20,
-                      color: tokens.colorBrandBackground
+                      className: mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearLastSearched,
+                      children: mergedLabels.clearAllButton
                     }
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: styles.buttonContent, children: [
-                      /* @__PURE__ */ jsx(Body1, { children: harbor.portName }),
-                      /* @__PURE__ */ jsx(Caption1, { children: harbor.branchName })
-                    ] }),
-                    /* @__PURE__ */ jsx(
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsx(
+                  HarborListItem,
+                  {
+                    harbor,
+                    onSelect: handleSelect,
+                    containerClassName: styles.historyItem,
+                    trailingIcon: /* @__PURE__ */ jsx(
                       Icon,
                       {
-                        icon: "fluent:star-24-filled",
+                        onClick: () => onRemoveLastSearched(harbor),
+                        icon: "fluent:dismiss-24-regular",
                         fontSize: 20,
-                        color: tokens.colorBrandBackground,
-                        style: { marginLeft: 5 }
+                        className: styles.cursorPointer
                       }
-                    )
-                  ]
-                },
-                harbor.portId
-              )) })
-            ] }),
-            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.lastSearchedHeader }),
-                /* @__PURE__ */ jsx(
-                  Caption1,
-                  {
-                    className: mergeClasses(
-                      styles.dangerText,
-                      styles.cursorPointer
                     ),
-                    onClick: onClearLastSearched,
-                    children: mergedLabels.clearAllButton
-                  }
-                )
+                    showDivider: true
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              /* @__PURE__ */ jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsx(
+              popularHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
+                /* @__PURE__ */ jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsx(
+                  HarborListItem,
+                  {
+                    harbor,
+                    onSelect: handleSelect,
+                    containerClassName: styles.historyItem,
+                    showDivider: true
+                  },
+                  harbor.portId
+                )) })
+              ] })
+            ] }),
+            isErrorPort ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsx(
+                EmptyContent,
+                {
+                  content: mergedLabels.emptyContent,
+                  language,
+                  actionButton: reloadButtonPort,
+                  imageSrc: emptyImageSrc
+                }
+              )
+            ] }) : isLoadingPort ? /* @__PURE__ */ jsx(
+              HarborListSkeleton,
+              {
+                count: 5,
+                showFavoriteIcon: showButtonFavorite
+              }
+            ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsx("div", { className: styles.harborList, children: harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsx(
                 HarborListItem,
                 {
                   harbor,
                   onSelect: handleSelect,
-                  containerClassName: styles.historyItem,
-                  trailingIcon: /* @__PURE__ */ jsx(
+                  containerClassName: styles.harborItem,
+                  trailingIcon: showButtonFavorite && /* @__PURE__ */ jsx(
                     Icon,
                     {
-                      onClick: () => onRemoveLastSearched(harbor),
-                      icon: "fluent:dismiss-24-regular",
-                      fontSize: 20,
-                      className: styles.cursorPointer
+                      icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
+                      color: tokens.colorBrandBackground,
+                      className: styles.cursorPointer,
+                      onClick: () => onToggleFavorite(harbor)
                     }
                   ),
-                  showDivider: true
-                },
-                harbor.portId
-              )) })
-            ] }),
-            popularHarbors.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsx(Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
-              /* @__PURE__ */ jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsx(
-                HarborListItem,
-                {
-                  harbor,
-                  onSelect: handleSelect,
-                  containerClassName: styles.historyItem,
-                  showDivider: true
+                  showDivider: index !== harbors.length - 1
                 },
-                harbor.portId
-              )) })
-            ] }),
-            /* @__PURE__ */ jsx(Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
-            /* @__PURE__ */ jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsx(Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxs("div", { className: styles.harborItem, children: [
-              /* @__PURE__ */ jsxs(
-                Skeleton,
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                    width: "70%"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      SkeletonItem,
-                      {
-                        style: {
-                          width: "24px",
-                          height: "24px",
-                          borderRadius: "4px"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      SkeletonItem,
-                      {
-                        style: {
-                          width: "100%",
-                          height: "20px",
-                          borderRadius: "4px"
-                        }
-                      }
-                    )
-                  ]
-                }
-              ),
-              showButtonFavorite && /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
-                SkeletonItem,
-                {
-                  style: {
-                    width: "24px",
-                    height: "24px",
-                    borderRadius: "4px"
-                  }
-                }
-              ) })
-            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsx(
-              HarborListItem,
-              {
-                harbor,
-                onSelect: handleSelect,
-                containerClassName: styles.harborItem,
-                trailingIcon: showButtonFavorite && /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
-                    color: tokens.colorBrandBackground,
-                    className: styles.cursorPointer,
-                    onClick: () => onToggleFavorite(harbor)
-                  }
-                ),
-                showDivider: index !== harbors.length - 1
-              },
-              harbor.portId || index
-            )) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+                harbor.portId || index
+              )) : /* @__PURE__ */ jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+            ] })
           ] })
-        ] })
+        ] }) })
       ] }) })
     }
   );
 };
 
 // src/components/ModalSelectDate/ModalSelectDate.constants.ts
-var DEFAULT_LABELS11 = {
+var DEFAULT_LABELS12 = {
   id: {
     title: "Pilih Tanggal",
     oneWay: "Sekali Jalan",
@@ -5844,7 +5999,7 @@ var DEFAULT_LABELS11 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles12 = makeStyles({
+var useStyles13 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5964,8 +6119,8 @@ var ModalSelectDate = ({
   dateFormat = "DD MMMM YYYY",
   showRoundtrip = true
 }) => {
-  const styles = useStyles12();
-  const mergedLabels = { ...DEFAULT_LABELS11[language], ...labels };
+  const styles = useStyles13();
+  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
   useEffect(() => {
     moment.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -6188,14 +6343,15 @@ var ModalSelectDate = ({
 };
 
 // src/components/ModalService/ModalService.constants.ts
-var DEFAULT_LABELS12 = {
+var DEFAULT_LABELS13 = {
   id: {
     title: "Pilih Kelas Layanan",
     loading: "Memuat...",
     error: "Gagal memuat layanan",
     selectAll: "Pilih Semua",
     saveButton: "Simpan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Kelas Layanan"
   },
   en: {
     title: "Select Service Class",
@@ -6203,10 +6359,11 @@ var DEFAULT_LABELS12 = {
     error: "Error loading services",
     selectAll: "Select All",
     saveButton: "Save",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Service Class"
   }
 };
-var useStyles13 = makeStyles({
+var useStyles14 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6279,6 +6436,66 @@ var useStyles13 = makeStyles({
     borderRadius: tokens.borderRadiusCircular
   }
 });
+var ServiceListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles14();
+  return /* @__PURE__ */ jsx("div", { className: styles.serviceList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxs("div", { className: styles.serviceItem, children: [
+    /* @__PURE__ */ jsx("div", { className: styles.serviceContent, children: /* @__PURE__ */ jsxs(
+      Skeleton,
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "80%"
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "120px",
+                height: "20px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "80px",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonItem,
+            {
+              style: {
+                width: "100%",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+      SkeletonItem,
+      {
+        style: {
+          width: "20px",
+          height: "20px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalService = ({
   language = "id",
   labels,
@@ -6289,10 +6506,12 @@ var ModalService = ({
   selectedServiceIds,
   onSave,
   isLoading = false,
-  isError = false
+  isError = false,
+  reloadButton,
+  emptyImageSrc = ""
 }) => {
-  const styles = useStyles13();
-  const mergedLabels = { ...DEFAULT_LABELS12[language], ...labels };
+  const styles = useStyles14();
+  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const [selectedServices, setSelectedServices] = useState(selectedServiceIds);
   useEffect(() => {
@@ -6347,7 +6566,15 @@ var ModalService = ({
         children: displayTitle
       }
     ),
-    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.loading }) : isError ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.error }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsx(ServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { className: styles.serviceList, children: [
         /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
           /* @__PURE__ */ jsx(Body1, { children: mergedLabels.selectAll }),
@@ -6397,23 +6624,25 @@ var ModalService = ({
 };
 
 // src/components/ModalTotalPassengers/ModalTotalPassengers.constants.ts
-var DEFAULT_LABELS13 = {
+var DEFAULT_LABELS14 = {
   id: {
     title: "Pilih Jumlah Penumpang",
     infoMessage: "Anda dapat menambahkan hingga {maxPassengers} penumpang pada golongan kendaraan ini.",
     loading: "Memuat...",
     saveButton: "Simpan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Kelas Penumpang"
   },
   en: {
     title: "Select Total Passengers",
     infoMessage: "You can add up to {maxPassengers} passengers in this vehicle category.",
     loading: "Loading...",
     saveButton: "Save",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Passengers Class"
   }
 };
-var useStyles14 = makeStyles({
+var useStyles15 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6480,6 +6709,62 @@ var useStyles14 = makeStyles({
     margin: 0
   }
 });
+var TotalPassengersListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles15();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxs("div", { className: styles.accordionHeader, style: { padding: "0 12px" }, children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                  SkeletonItem,
+                  {
+                    style: {
+                      width: "120px",
+                      height: "18px"
+                    }
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsx("div", { style: { height: "4px" } }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                  SkeletonItem,
+                  {
+                    style: {
+                      width: "48px",
+                      height: "14px"
+                    }
+                  }
+                ) })
+              }
+            )
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTotalPassengers = ({
   language = "id",
   labels,
@@ -6490,11 +6775,14 @@ var ModalTotalPassengers = ({
   selectedPassengers,
   onSave,
   isLoading = false,
+  isError = false,
+  reloadButton,
+  emptyImageSrc,
   maxPassengers = 10,
   infoMessage
 }) => {
-  const styles = useStyles14();
-  const mergedLabels = { ...DEFAULT_LABELS13[language], ...labels };
+  const styles = useStyles15();
+  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
   const [passengers, setPassengers] = useState([]);
   const [openItems, setOpenItems] = useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -6551,11 +6839,16 @@ var ModalTotalPassengers = ({
       (p) => p.passengerAgeCode === passengerAgeCode
     );
     if (!passenger) return 0;
-    const cls = passenger.classes.find(
-      (c) => c.classCode === classCode
-    );
+    const cls = passenger.classes.find((c) => c.classCode === classCode);
     return cls?.count ?? 0;
   };
+  const getTotalCountForType = (passengerAgeCode) => {
+    const passenger = passengers.find(
+      (p) => p.passengerAgeCode === passengerAgeCode
+    );
+    if (!passenger) return 0;
+    return passenger.classes.reduce((sum, cls) => sum + (cls.count ?? 0), 0);
+  };
   const getTotalForType = (passengerAgeCode) => {
     const passenger = passengers.find(
       (p) => p.passengerAgeCode === passengerAgeCode
@@ -6610,10 +6903,7 @@ var ModalTotalPassengers = ({
             classes: passenger.classes.map((cls) => {
               if (cls.classCode === classCode && (cls.count ?? 0) > 0) {
                 const newCount = (cls.count ?? 0) - 1;
-                const newPassengers = (cls.passengers || []).slice(
-                  0,
-                  newCount
-                );
+                const newPassengers = (cls.passengers || []).slice(0, newCount);
                 return {
                   ...cls,
                   count: newCount,
@@ -6651,131 +6941,134 @@ var ModalTotalPassengers = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { children: isLoading ? /* @__PURE__ */ jsx(TotalPassengersListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsx(MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
-      isLoading ? /* @__PURE__ */ jsx(Body1, { children: mergedLabels.loading }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          Accordion,
-          {
-            collapsible: true,
-            multiple: true,
-            openItems,
-            onToggle: (_, data) => setOpenItems(data.openItems),
-            className: styles.passengerSection,
-            children: passengerTypes.map((passengerType) => {
-              const classes = passengerType.classes || [];
-              return /* @__PURE__ */ jsxs(
-                AccordionItem,
-                {
-                  value: String(passengerType.id),
-                  className: styles.accordionItem,
-                  children: [
-                    /* @__PURE__ */ jsxs(
-                      AccordionHeader,
-                      {
-                        className: styles.accordionHeader,
-                        expandIconPosition: "end",
-                        children: [
-                          passengerType.passengerAgeName,
-                          " (",
-                          getTotalForType(passengerType.passengerAgeCode),
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs(
-                      "div",
-                      {
-                        className: styles.nestedRow,
-                        children: [
-                          /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
-                          /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleDecrement(
-                                    passengerType.passengerAgeCode,
-                                    cls.classCode
-                                  );
-                                },
-                                disabled: getServiceCount(
-                                  passengerType.passengerAgeCode,
-                                  cls.classCode
-                                ) === 0
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+      /* @__PURE__ */ jsx(
+        Accordion,
+        {
+          collapsible: true,
+          multiple: true,
+          openItems,
+          onToggle: (_, data) => setOpenItems(data.openItems),
+          className: styles.passengerSection,
+          children: passengerTypes.map((passengerType) => {
+            const classes = passengerType.classes || [];
+            return /* @__PURE__ */ jsxs(
+              AccordionItem,
+              {
+                value: String(passengerType.id),
+                className: styles.accordionItem,
+                children: [
+                  /* @__PURE__ */ jsxs(
+                    AccordionHeader,
+                    {
+                      className: styles.accordionHeader,
+                      expandIconPosition: "end",
+                      children: [
+                        passengerType.passengerAgeName,
+                        " (",
+                        getTotalForType(passengerType.passengerAgeCode),
+                        ")"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxs("div", { className: styles.nestedRow, children: [
+                    /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:subtract-12-regular" }),
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleDecrement(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            ) }),
-                            /* @__PURE__ */ jsx(
-                              Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
-                                disabled: getServiceCount(
-                                  passengerType.passengerAgeCode,
-                                  cls.classCode
-                                ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleIncrement(
-                                    passengerType.passengerAgeCode,
-                                    cls.classCode
-                                  );
-                                }
-                              }
-                            )
-                          ] })
-                        ]
-                      },
-                      cls.id
-                    )) }) })
-                  ]
-                },
-                passengerType.id
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            appearance: "primary",
-            size: "medium",
-            className: styles.submitButton,
-            onClick: handleSave,
-            children: mergedLabels.saveButton
-          }
-        )
-      ] })
-    ] })
+                            );
+                          },
+                          disabled: getServiceCount(
+                            passengerType.passengerAgeCode,
+                            cls.classCode
+                          ) === 0 || getTotalCountForType(
+                            passengerType.passengerAgeCode
+                          ) <= passengerType.minCapacity
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Body1, { className: styles.countText, children: getServiceCount(
+                        passengerType.passengerAgeCode,
+                        cls.classCode
+                      ) }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:add-12-regular" }),
+                          disabled: getServiceCount(
+                            passengerType.passengerAgeCode,
+                            cls.classCode
+                          ) >= cls.maxCapacity || totalPassengerCount >= maxPassengers,
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleIncrement(
+                              passengerType.passengerAgeCode,
+                              cls.classCode
+                            );
+                          }
+                        }
+                      )
+                    ] })
+                  ] }, cls.id)) }) })
+                ]
+              },
+              passengerType.id
+            );
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "primary",
+          size: "medium",
+          className: styles.submitButton,
+          onClick: handleSave,
+          children: mergedLabels.saveButton
+        }
+      )
+    ] }) })
   ] }) }) });
 };
 
 // src/components/ModalTypeOfService/ModalTypeOfService.constants.ts
-var DEFAULT_LABELS14 = {
+var DEFAULT_LABELS15 = {
   id: {
-    title: "Pilih Tipe Layanan",
+    title: "Pilih Jenis Layanan",
     cancelButton: "Batal",
     saveButton: "Simpan",
     vehiclesAlt: "kendaraan",
-    closeAriaLabel: "Tutup"
+    closeAriaLabel: "Tutup",
+    emptyContent: "Jenis Layanan"
   },
   en: {
     title: "Select Service Type",
     cancelButton: "Cancel",
     saveButton: "Save",
     vehiclesAlt: "vehicles",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Service Type"
   }
 };
 var DEFAULT_VEHICLE_ICONS = {
@@ -6790,7 +7083,7 @@ var DEFAULT_VEHICLE_ICONS = {
   bigTruck: "/assets/images/icons/big-truck.webp",
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
-var useStyles15 = makeStyles({
+var useStyles16 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6833,6 +7126,89 @@ var useStyles15 = makeStyles({
     justifyContent: "flex-end"
   }
 });
+var TypeOfServiceListSkeleton = ({ count = 3 }) => {
+  const styles = useStyles16();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxs("div", { className: styles.accordionHeader, children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+                    SkeletonItem,
+                    {
+                      style: {
+                        width: "74px",
+                        height: "74px",
+                        borderRadius: "8px"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx("div", { className: styles.accordionTitleAndInfo, style: { flex: 1 }, children: /* @__PURE__ */ jsxs(
+                    Skeleton,
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "4px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          SkeletonItem,
+                          {
+                            style: {
+                              width: "120px",
+                              height: "20px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          SkeletonItem,
+                          {
+                            style: {
+                              width: "150px",
+                              height: "16px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(Skeleton, { children: /* @__PURE__ */ jsx(
+              SkeletonItem,
+              {
+                style: {
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%"
+                }
+              }
+            ) })
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTypeOfService = ({
   language = "id",
   labels,
@@ -6842,10 +7218,14 @@ var ModalTypeOfService = ({
   serviceTypes,
   selectedService,
   onSave,
-  renderImage
+  renderImage,
+  isLoading = false,
+  isError = false,
+  reloadButton,
+  emptyImageSrc = ""
 }) => {
-  const styles = useStyles15();
-  const mergedLabels = { ...DEFAULT_LABELS14[language], ...labels };
+  const styles = useStyles16();
+  const mergedLabels = { ...DEFAULT_LABELS15[language], ...labels };
   const [selectedServiceId, setSelectedServiceId] = useState(
     selectedService?.id || 0
   );
@@ -6958,7 +7338,15 @@ var ModalTypeOfService = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxs(DialogContent, { children: [
+    /* @__PURE__ */ jsx(DialogContent, { children: isLoading ? /* @__PURE__ */ jsx(TypeOfServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         Accordion,
         {
@@ -7005,7 +7393,9 @@ var ModalTypeOfService = ({
                               styles.accordionHeader,
                               styles.accordionItem
                             ),
-                            style: { padding: tokens.spacingHorizontalXS },
+                            style: {
+                              padding: tokens.spacingHorizontalXS
+                            },
                             children: [
                               /* @__PURE__ */ jsx("div", { children: imageRenderer({
                                 src: childItem.image,
@@ -7013,10 +7403,16 @@ var ModalTypeOfService = ({
                                 width: 48,
                                 height: 48
                               }) }),
-                              /* @__PURE__ */ jsxs("div", { className: styles.accordionTitleAndInfo, children: [
-                                /* @__PURE__ */ jsx(Body1, { children: childItem.title }),
-                                /* @__PURE__ */ jsx(Caption1, { children: childItem.info })
-                              ] }),
+                              /* @__PURE__ */ jsxs(
+                                "div",
+                                {
+                                  className: styles.accordionTitleAndInfo,
+                                  children: [
+                                    /* @__PURE__ */ jsx(Body1, { children: childItem.title }),
+                                    /* @__PURE__ */ jsx(Caption1, { children: childItem.info })
+                                  ]
+                                }
+                              ),
                               /* @__PURE__ */ jsx(Radio, { value: String(childItem.id) })
                             ]
                           },
@@ -7066,7 +7462,15 @@ var ModalTypeOfService = ({
         }
       ),
       /* @__PURE__ */ jsxs("div", { className: styles.footer, children: [
-        /* @__PURE__ */ jsx(Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: mergedLabels.cancelButton }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "secondary",
+            shape: "circular",
+            onClick: onClose,
+            children: mergedLabels.cancelButton
+          }
+        ),
         /* @__PURE__ */ jsx(
           Button,
           {
@@ -7078,12 +7482,12 @@ var ModalTypeOfService = ({
           }
         )
       ] })
-    ] })
+    ] }) })
   ] }) }) });
 };
 
 // src/components/SortMenu/SortMenu.constants.ts
-var DEFAULT_LABELS15 = {
+var DEFAULT_LABELS16 = {
   id: {
     filterButtonText: "Filter",
     sortButtonText: "Urutkan Berdasarkan",
@@ -7125,7 +7529,7 @@ var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
   return option?.label || "Rekomendasi";
 };
-var useStyles16 = makeStyles({
+var useStyles17 = makeStyles({
   container: {
     display: "flex",
     width: "100%",
@@ -7161,10 +7565,10 @@ var SortMenu = ({
   sortButtonText: deprecatedSortButtonText,
   clearFiltersText: deprecatedClearFiltersText
 }) => {
-  const styles = useStyles16();
+  const styles = useStyles17();
   const labels = React.useMemo(
     () => ({
-      ...DEFAULT_LABELS15[language],
+      ...DEFAULT_LABELS16[language],
       ...customLabels,
       // Fallback to deprecated props if provided
       ...deprecatedFilterButtonText && {
@@ -7276,7 +7680,7 @@ var SortMenu = ({
 };
 
 // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
-var DEFAULT_LABELS16 = {
+var DEFAULT_LABELS17 = {
   id: {
     title: "Filter dengan",
     serviceTypeLabel: "Jenis Layanan",
@@ -7337,7 +7741,7 @@ var DEFAULT_DURATION_RANGE = {
   min: 0,
   max: 8
 };
-var useStyles17 = makeStyles({
+var useStyles18 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -7447,8 +7851,8 @@ var ModalFilterTicket = ({
   minDuration = DEFAULT_DURATION_RANGE.min,
   maxDuration = DEFAULT_DURATION_RANGE.max
 }) => {
-  const styles = useStyles17();
-  const mergedLabels = { ...DEFAULT_LABELS16[language], ...labels };
+  const styles = useStyles18();
+  const mergedLabels = { ...DEFAULT_LABELS17[language], ...labels };
   const [rangeReady, setRangeReady] = useState(false);
   useEffect(() => {
     if (open) {
@@ -7758,7 +8162,7 @@ var ModalFilterTicket = ({
 };
 
 // src/components/DateFilter/DateFilter.constants.ts
-var DEFAULT_LABELS17 = {
+var DEFAULT_LABELS18 = {
   id: {
     prevButtonAriaLabel: "Tanggal sebelumnya",
     nextButtonAriaLabel: "Tanggal berikutnya",
@@ -7771,7 +8175,7 @@ var DEFAULT_LABELS17 = {
   }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
-var useStyles18 = makeStyles({
+var useStyles19 = makeStyles({
   container: {
     display: "flex",
     alignItems: "stretch",
@@ -7854,10 +8258,10 @@ var DateFilter = ({
   labels,
   isLoading = false
 }) => {
-  const styles = useStyles18();
+  const styles = useStyles19();
   const scrollRef = useRef(null);
   const mergedLabels = {
-    ...DEFAULT_LABELS17[language],
+    ...DEFAULT_LABELS18[language],
     ...labels
   };
   const handlePrev = () => {
@@ -7920,7 +8324,7 @@ var DateFilter = ({
 };
 
 // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
-var DEFAULT_LABELS18 = {
+var DEFAULT_LABELS19 = {
   id: {
     title: "Cari Jadwal Lainnya",
     fromLabel: "Dari",
@@ -7980,7 +8384,7 @@ var DEFAULT_FORM_VALUES = {
   typeOfService: "",
   passenger: ""
 };
-var useStyles19 = makeStyles({
+var useStyles20 = makeStyles({
   dialogSurface: {
     maxWidth: "900px",
     width: "100%"
@@ -8082,8 +8486,8 @@ var ModalSearchTicket = ({
   showRoundTrip = true,
   ...props
 }) => {
-  const styles = useStyles19();
-  const mergedLabels = { ...DEFAULT_LABELS18[language], ...labels };
+  const styles = useStyles20();
+  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
   const { control, setValue, handleSubmit, watch } = useForm({
     defaultValues: {
       ...DEFAULT_FORM_VALUES,
@@ -8520,7 +8924,7 @@ var ModalSearchTicket = ({
 };
 
 // src/components/Stepper/Stepper.constants.ts
-var DEFAULT_LABELS19 = {
+var DEFAULT_LABELS20 = {
   id: {
     stepperBackgroundAlt: "Latar Belakang Stepper",
     ferryIconAlt: "Ikon Kapal"
@@ -8530,7 +8934,7 @@ var DEFAULT_LABELS19 = {
     ferryIconAlt: "Ferry Icon"
   }
 };
-var useStyles20 = makeStyles({
+var useStyles21 = makeStyles({
   stepperWrapper: {
     position: "relative",
     width: "100%",
@@ -8655,8 +9059,8 @@ var Stepper = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles20();
-  const mergedLabels = { ...DEFAULT_LABELS19[language], ...labels };
+  const styles = useStyles21();
+  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
   const currentStepIndex = useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
@@ -8712,7 +9116,7 @@ var Stepper = ({
 };
 
 // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
-var DEFAULT_LABELS20 = {
+var DEFAULT_LABELS21 = {
   id: {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
@@ -8726,7 +9130,7 @@ var DEFAULT_LABELS20 = {
     email: "Email"
   }
 };
-var useStyles21 = makeStyles({
+var useStyles22 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -8756,8 +9160,8 @@ var CardOrdererInfo = ({
   labels,
   className
 }) => {
-  const styles = useStyles21();
-  const mergedLabels = { ...DEFAULT_LABELS20[language], ...labels };
+  const styles = useStyles22();
+  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsx(Title3, { children: mergedLabels.title }),
     /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
@@ -8778,7 +9182,7 @@ var CardOrdererInfo = ({
 };
 
 // src/components/ModalListPassenger/ModalListPassenger.constants.ts
-var DEFAULT_LABELS21 = {
+var DEFAULT_LABELS22 = {
   id: {
     title: "Detail Penumpang",
     // sameAsOrderer: 'Sama Dengan Pemesan',
@@ -8808,7 +9212,7 @@ var DEFAULT_LABELS21 = {
     }
   }
 };
-var useStyles22 = makeStyles({
+var useStyles23 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8863,8 +9267,8 @@ var ModalListPassenger = ({
   // sameAsOrderer,
   // onSameAsOrdererChange,
 }) => {
-  const styles = useStyles22();
-  const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
+  const styles = useStyles23();
+  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   const handleClose = () => {
     onClose();
@@ -8995,7 +9399,7 @@ var ModalListPassenger = ({
 };
 
 // src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
-var DEFAULT_LABELS22 = {
+var DEFAULT_LABELS23 = {
   id: {
     title: "Detail Penumpang",
     titleLabel: "Title",
@@ -9146,7 +9550,7 @@ var calculateAge = (birthDate) => {
   }
   return { years: Math.max(0, years), months: Math.max(0, months) };
 };
-var useStyles23 = makeStyles({
+var useStyles24 = makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -9326,10 +9730,10 @@ var ModalPassengerForm = ({
   ticketClassOptions,
   onScanComplete
 }) => {
-  const styles = useStyles23();
-  const mergedLabels = { ...DEFAULT_LABELS22[language], ...labels };
+  const styles = useStyles24();
+  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
   const mergedErrors = {
-    ...DEFAULT_LABELS22[language].errors,
+    ...DEFAULT_LABELS23[language].errors,
     ...labels?.errors
   };
   const displayTitle = title || mergedLabels.title;
@@ -10061,7 +10465,7 @@ var ModalPassengerForm = ({
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts
-var DEFAULT_LABELS23 = {
+var DEFAULT_LABELS24 = {
   id: {
     defaultTitle: "Data Penumpang",
     passengerPrefix: "Penumpang"
@@ -10104,7 +10508,7 @@ var getBadgeConfig = (ticketClass) => {
       };
   }
 };
-var useStyles24 = makeStyles({
+var useStyles25 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10187,8 +10591,8 @@ var CardPassengerList = ({
   labels,
   className
 }) => {
-  const styles = useStyles24();
-  const mergedLabels = { ...DEFAULT_LABELS23[language], ...labels };
+  const styles = useStyles25();
+  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   return /* @__PURE__ */ jsxs(Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -10261,7 +10665,7 @@ var CardPassengerList = ({
 };
 
 // src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
-var DEFAULT_LABELS24 = {
+var DEFAULT_LABELS25 = {
   id: {
     title: "Detail Kendaraan",
     vehicleNumberLabel: "Nomor Kendaraan",
@@ -10279,7 +10683,7 @@ var DEFAULT_LABELS24 = {
     noLabel: "No"
   }
 };
-var useStyles25 = makeStyles({
+var useStyles26 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10319,8 +10723,8 @@ var CardVehicleDetail = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles25();
-  const mergedLabels = { ...DEFAULT_LABELS24[language], ...labels };
+  const styles = useStyles26();
+  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -10382,7 +10786,7 @@ var CardVehicleDetail = ({
 };
 
 // src/components/CardVehicleOwnerForm/CardVehicleOwnerForm.constants.ts
-var DEFAULT_LABELS25 = {
+var DEFAULT_LABELS26 = {
   id: {
     title: "Informasi Pemilik & Muatan",
     addOwnerButton: "Tambah Pemilik",
@@ -10490,7 +10894,7 @@ var DEFAULT_LABELS25 = {
     incrementQuantityAriaLabel: "Increase quantity"
   }
 };
-var useStyles26 = makeStyles({
+var useStyles27 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -10558,8 +10962,8 @@ var CardVehicleOwnerForm = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles26();
-  const mergedLabels = { ...DEFAULT_LABELS25[language], ...labels };
+  const styles = useStyles27();
+  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -11347,7 +11751,7 @@ var CardVehicleOwnerForm = ({
 };
 
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
-var DEFAULT_LABELS26 = {
+var DEFAULT_LABELS27 = {
   id: {
     bookingDetails: "Booking Details",
     routeTitle: "Rute Perjalanan",
@@ -11383,7 +11787,7 @@ var DEFAULT_LABELS26 = {
     cancelDialogDismiss: "Cancel"
   }
 };
-var useStyles27 = makeStyles({
+var useStyles28 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -11547,8 +11951,8 @@ var CardBookingTicket = ({
   onPrevious,
   className
 }) => {
-  const styles = useStyles27();
-  const mergedLabels = { ...DEFAULT_LABELS26[language], ...labels };
+  const styles = useStyles28();
+  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
   const [cancelDialogOpen, setCancelDialogOpen] = useState(false);
   return /* @__PURE__ */ jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxs(Card, { className: styles.bookingDetailTop, children: [
@@ -11750,7 +12154,7 @@ var CardBookingTicket = ({
 };
 
 // src/components/CardFAQ/CardFAQ.constants.ts
-var DEFAULT_LABELS27 = {
+var DEFAULT_LABELS28 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -11804,7 +12208,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles28 = makeStyles({
+var useStyles29 = makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -11828,8 +12232,8 @@ var CardFAQ = ({
   items,
   className
 }) => {
-  const styles = useStyles28();
-  const mergedLabels = { ...DEFAULT_LABELS27[language], ...labels };
+  const styles = useStyles29();
+  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
   const faqItems = items || DEFAULT_FAQ_ITEMS[language];
   return /* @__PURE__ */ jsxs(Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.title }),
@@ -11866,7 +12270,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS28 = {
+var DEFAULT_LABELS29 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -11882,7 +12286,7 @@ var DEFAULT_LABELS28 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles29 = makeStyles({
+var useStyles30 = makeStyles({
   card: {
     backgroundColor: tokens.colorNeutralBackground1,
     boxShadow: tokens.shadow4,
@@ -12055,8 +12459,8 @@ var CardAddon = ({
   children,
   className
 }) => {
-  const styles = useStyles29();
-  const mergedLabels = { ...DEFAULT_LABELS28[language], ...labels };
+  const styles = useStyles30();
+  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
   return /* @__PURE__ */ jsx(Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsx(Title3, { className: styles.textTitle, children: title }),
@@ -12267,7 +12671,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -12283,7 +12687,7 @@ var DEFAULT_LABELS29 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles30 = makeStyles({
+var useStyles31 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12427,8 +12831,8 @@ var CardMealCatalog = ({
   searchValue,
   onSearchChange
 }) => {
-  const styles = useStyles30();
-  const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
+  const styles = useStyles31();
+  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsx("div", { className: styles.bannerOverlay }),
@@ -12533,7 +12937,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -12541,7 +12945,7 @@ var DEFAULT_LABELS30 = {
     defaultTitle: "Review"
   }
 };
-var useStyles31 = makeStyles({
+var useStyles32 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12592,8 +12996,8 @@ var CardReview = ({
   className,
   headerAction
 }) => {
-  const styles = useStyles31();
-  const mergedLabels = { ...DEFAULT_LABELS30[language], ...labels };
+  const styles = useStyles32();
+  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
       /* @__PURE__ */ jsx(Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
@@ -12640,7 +13044,7 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     title: "Penumpang",
     idNumber: "Nomor ID"
@@ -12650,7 +13054,7 @@ var DEFAULT_LABELS31 = {
     idNumber: "ID Number"
   }
 };
-var useStyles32 = makeStyles({
+var useStyles33 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12748,8 +13152,8 @@ var CardReviewPassenger = ({
   passengers,
   className
 }) => {
-  const styles = useStyles32();
-  const mergedLabels = { ...DEFAULT_LABELS31[language], ...labels };
+  const styles = useStyles33();
+  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs(Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerContainer, children: [
@@ -12792,7 +13196,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS33 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -12828,7 +13232,7 @@ var DEFAULT_LABELS32 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles33 = makeStyles({
+var useStyles34 = makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -12850,7 +13254,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles33();
+  const styles = useStyles34();
   const linkColor = tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -12870,7 +13274,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles34 = makeStyles({
+var useStyles35 = makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: tokens.borderRadiusXLarge,
@@ -12947,8 +13351,8 @@ var CardPriceDetails = ({
   total,
   labels
 }) => {
-  const styles = useStyles34();
-  const mergedLabels = { ...DEFAULT_LABELS32[language], ...labels };
+  const styles = useStyles35();
+  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
   const displayTitle = title || mergedLabels.defaultTitle;
   const getVariantClass = (variant) => {
     switch (variant) {
@@ -13007,7 +13411,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -13015,7 +13419,7 @@ var DEFAULT_LABELS33 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles35 = makeStyles({
+var useStyles36 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13075,8 +13479,8 @@ var CardPaymentMethodList = ({
   selectedValue,
   onSelect
 }) => {
-  const styles = useStyles35();
-  const mergedLabels = { ...DEFAULT_LABELS33[language], ...labels };
+  const styles = useStyles36();
+  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, {}) }),
     /* @__PURE__ */ jsx(Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxs(AccordionItem, { value: category.value, children: [
@@ -13125,7 +13529,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -13133,7 +13537,7 @@ var DEFAULT_LABELS34 = {
     title: "Payment Method"
   }
 };
-var useStyles36 = makeStyles({
+var useStyles37 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13170,8 +13574,8 @@ var CardPaymentGuide = ({
   guides,
   className
 }) => {
-  const styles = useStyles36();
-  const mergedLabels = { ...DEFAULT_LABELS34[language], ...labels };
+  const styles = useStyles37();
+  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
   const displayTitle = title || mergedLabels.title;
   return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     title && /* @__PURE__ */ jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -13190,14 +13594,15 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
     totalPayment: "Total Pembayaran",
     checkStatusInfo: "Klik tombol dibawah ini jika sudah melakukan pembayaran",
     checkStatusButton: "Cek Status Pembayaran",
-    currencySymbol: "Rp."
+    currencySymbol: "Rp.",
+    changePayment: "Ubah Metode Pembayaran"
   },
   en: {
     expiryPrefix: "Virtual account code valid until",
@@ -13205,10 +13610,11 @@ var DEFAULT_LABELS35 = {
     totalPayment: "Total Payment",
     checkStatusInfo: "Click the button below if you have made the payment",
     checkStatusButton: "Check Payment Status",
-    currencySymbol: "Rp."
+    currencySymbol: "Rp.",
+    changePayment: "Change Payment Method"
   }
 };
-var useStyles37 = makeStyles({
+var useStyles38 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13288,10 +13694,11 @@ var CardPaymentInfo = ({
   totalAmount,
   guides,
   onCopyVA,
-  onCheckStatus
+  onCheckStatus,
+  onChangePayment
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsx(Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -13317,6 +13724,17 @@ var CardPaymentInfo = ({
           )
         ] })
       ] }),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          appearance: "secondary",
+          size: "large",
+          shape: "circular",
+          className: styles.checkStatusButton,
+          onClick: onChangePayment,
+          children: mergedLabels.changePayment
+        }
+      ),
       /* @__PURE__ */ jsx(
         Field,
         {
@@ -13325,7 +13743,9 @@ var CardPaymentInfo = ({
           children: /* @__PURE__ */ jsxs(Title2, { children: [
             mergedLabels.currencySymbol,
             " ",
-            totalAmount.toLocaleString(language === "id" ? "id-ID" : "en-US")
+            totalAmount.toLocaleString(
+              language === "id" ? "id-ID" : "en-US"
+            )
           ] })
         }
       )
@@ -13349,7 +13769,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -13379,7 +13799,7 @@ var DEFAULT_LABELS36 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles38 = makeStyles({
+var useStyles39 = makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -13449,8 +13869,8 @@ var CardStatusOrder = ({
   onClickViewTicket,
   className
 }) => {
-  const styles = useStyles38();
-  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
+  const styles = useStyles39();
+  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
   const displayStatus = statusLabel || mergedLabels.defaultStatus;
   const displayTitle = title || mergedLabels.defaultTitle;
   const displayDescription = description || mergedLabels.defaultDescription;
@@ -13547,7 +13967,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -13573,7 +13993,7 @@ var DEFAULT_LABELS37 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -13700,8 +14120,8 @@ var ModalPriceDetail = ({
   grandTotal,
   ...props
 }) => {
-  const styles = useStyles39();
-  const mergedLabels = { ...DEFAULT_LABELS37[language], ...labels };
+  const styles = useStyles40();
+  const mergedLabels = { ...DEFAULT_LABELS38[language], ...labels };
   return /* @__PURE__ */ jsx(
     Dialog,
     {
@@ -13843,7 +14263,7 @@ var ModalPriceDetail = ({
 // src/components/FileUpload/FileUpload.constants.ts
 var ACCEPTED_FILES = ".pdf,.jpg,.jpeg,.png";
 var MAX_FILE_SIZE_MB = 10;
-var DEFAULT_LABELS38 = {
+var DEFAULT_LABELS39 = {
   id: {
     placeholder: "Ketuk untuk pilih file",
     maxSizeWarning: "Maksimal {maxSize}MB per file dalam format PDF, JPG, JPEG, PNG.",
@@ -13861,7 +14281,7 @@ var DEFAULT_LABELS38 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles40 = makeStyles({
+var useStyles41 = makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -13888,7 +14308,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles40();
+  const styles = useStyles41();
   return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
     /* @__PURE__ */ jsx(
       DialogTitle,
@@ -14001,7 +14421,7 @@ var FileUpload = React.forwardRef(
     pdfIcon,
     downloadTemplateDocument = false
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = useRef(null);
     const [, setIsDragOver] = useState(false);
@@ -14439,11 +14859,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {},
   en: {}
 };
-var useStyles41 = makeStyles({
+var useStyles42 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14503,8 +14923,8 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles41();
-  ({ ...DEFAULT_LABELS39[language], ...labels });
+  const styles = useStyles42();
+  ({ ...DEFAULT_LABELS40[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
   };
@@ -14533,107 +14953,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-// src/components/NoContent/NoContent.constants.ts
-var DEFAULT_LABELS40 = {
-  id: {
-    defaultImageAlt: "Tidak ada konten",
-    defaultTitle: "Data {konten} belum bisa dimuat",
-    defaultMessage: "Silahkan coba muat ulang halaman ini atau cek kembali beberapa saat lagi.",
-    defaultButtonText: "Muat Ulang"
-  },
-  en: {
-    defaultImageAlt: "No content available",
-    defaultTitle: "Data {content} could not be loaded",
-    defaultMessage: "Please try reloading this page or check back in a few moments.",
-    defaultButtonText: "Reload"
-  }
-};
-var getFormattedDefaultTitle = (template, content) => {
-  if (content) {
-    return template.replace(/\{(konten|content)\}/g, content);
-  }
-  return template.replace(/\s*\{(konten|content)\}\s*/g, " ").trim();
-};
-var useStyles42 = makeStyles({
-  root: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: tokens.spacingVerticalL,
-    textAlign: "center",
-    paddingTop: tokens.spacingVerticalXXL,
-    paddingBottom: tokens.spacingVerticalXXL,
-    paddingLeft: tokens.spacingHorizontalXL,
-    paddingRight: tokens.spacingHorizontalXL,
-    width: "100%"
-  },
-  image: {
-    maxWidth: "100%",
-    height: "auto"
-  },
-  textContainer: {
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    gap: tokens.spacingVerticalS,
-    maxWidth: "400px"
-  },
-  title: {
-    fontWeight: "600"
-  },
-  message: {
-    color: tokens.colorNeutralForeground3,
-    textAlign: "center"
-  }
-});
-var NoContent = ({
-  title,
-  content,
-  message,
-  imageSrc = "/assets/images/illustrations/no-content.svg",
-  imageAlt,
-  imageWidth = 240,
-  imageHeight = 180,
-  actionButton,
-  language = "id",
-  labels,
-  className
-}) => {
-  const styles = useStyles42();
-  const mergedLabels = { ...DEFAULT_LABELS40[language], ...labels };
-  const displayTitle = title ?? getFormattedDefaultTitle(mergedLabels.defaultTitle, content);
-  const displayMessage = message ?? mergedLabels.defaultMessage;
-  const displayImageAlt = imageAlt ?? mergedLabels.defaultImageAlt;
-  return /* @__PURE__ */ jsxs("div", { className: mergeClasses(styles.root, className), children: [
-    /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: imageSrc,
-        alt: displayImageAlt,
-        width: imageWidth,
-        height: imageHeight,
-        className: styles.image
-      }
-    ),
-    /* @__PURE__ */ jsxs("div", { className: styles.textContainer, children: [
-      /* @__PURE__ */ jsx(Subtitle1, { className: styles.title, children: displayTitle }),
-      typeof displayMessage === "string" ? /* @__PURE__ */ jsx(Body1, { className: styles.message, children: displayMessage }) : displayMessage
-    ] }),
-    actionButton && /* @__PURE__ */ jsx(
-      Button,
-      {
-        type: "button",
-        appearance: actionButton.appearance || "primary",
-        onClick: actionButton.onClick,
-        shape: "circular",
-        style: { width: "100%" },
-        children: actionButton.text
-      }
-    )
-  ] });
-};
-
-export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, NoContent, DEFAULT_LABELS40 as NoContentDefaultLabels, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS18 as DateFilterDefaultLabels, EmptyContent, DEFAULT_LABELS11 as EmptyContentDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS17 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListMenuService, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, calculateAge, getBadgeConfig, getModalPreset, getSortLabel, hexToRgba };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map