@asdp/ferryui 0.1.22-dev.9337 → 0.1.22-dev.9360

package/dist/index.js

@@ -4396,13 +4396,16 @@ var useStyles9 = reactComponents.makeStyles({
     display: "flex",
     justifyContent: "center",
     position: "absolute",
-    left: "18px",
+    // left: "1px",
     bottom: "-16px",
-    width: "90%"
+    width: "100%"
   },
   buttonSwitch: {
     background: reactComponents.tokens.colorNeutralBackground1,
-    boxShadow: `0 1px 2px 0 ${reactComponents.tokens.colorNeutralShadowKey}, 0 0 2px 0 ${reactComponents.tokens.colorNeutralShadowAmbient}`
+    boxShadow: `0 1px 2px 0 ${reactComponents.tokens.colorNeutralShadowKey}, 0 0 2px 0 ${reactComponents.tokens.colorNeutralShadowAmbient}`,
+    position: "absolute",
+    right: "1rem",
+    bottom: "-20px"
   },
   switchIcon: {
     display: "inline-flex",
@@ -4433,11 +4436,15 @@ var useStyles9 = reactComponents.makeStyles({
     }
   },
   formContainerCol: {
+    paddingTop: "1rem !important",
+    paddingBottom: "1rem !important",
     [`@media (max-width: ${extendedTokens.breakpointXl})`]: {
       paddingLeft: "20px !important",
       paddingRight: "20px !important",
       marginBottom: "1rem",
-      marginTop: "8rem"
+      marginTop: "8rem",
+      paddingTop: "0px !mportant",
+      paddingBottom: "0px !mportant"
     }
   },
   serviceCol: {
@@ -4615,7 +4622,7 @@ var CardTicketSearch = ({
               className: styles.formContainerCol,
               children: /* @__PURE__ */ jsxRuntime.jsx("form", { onSubmit: handleSubmit(handleFormSubmit), children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { width: "100%" }, className: styles.formInnerRow, children: [
                 /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 6, xxl: 6, xxxl: 6, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { gap: "16px" }, className: styles.formFieldRow, children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(
                       reactGridSystem.Col,
                       {
@@ -4626,6 +4633,9 @@ var CardTicketSearch = ({
                         xl: 12,
                         xxl: 12,
                         xxxl: 12,
+                        style: {
+                          borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`
+                        },
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsx(
                             InputDynamic_default,
@@ -4652,37 +4662,33 @@ var CardTicketSearch = ({
                               required: true
                             }
                           ),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.deviderButton, children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}),
-                            " ",
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.Button,
-                              {
-                                onClick: onSwitchClick,
-                                className: styles.buttonSwitch,
-                                shape: "circular",
-                                appearance: "secondary",
-                                size: "large",
-                                disabled: switchDisabled,
-                                "aria-label": labels.switchAriaLabel,
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(
-                                  "div",
-                                  {
-                                    className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
-                                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                                      "img",
-                                      {
-                                        src: "/assets/images/icons/switch.svg",
-                                        alt: labels.switchAriaLabel,
-                                        width: 26,
-                                        height: 26
-                                      }
-                                    )
-                                  }
-                                )
-                              }
-                            )
-                          ] })
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            reactComponents.Button,
+                            {
+                              onClick: onSwitchClick,
+                              className: styles.buttonSwitch,
+                              shape: "circular",
+                              appearance: "secondary",
+                              size: "large",
+                              disabled: switchDisabled,
+                              "aria-label": labels.switchAriaLabel,
+                              icon: /* @__PURE__ */ jsxRuntime.jsx(
+                                "div",
+                                {
+                                  className: `${styles.switchIcon} ${isRotating ? styles.switchIconRotate : ""}`,
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                                    "img",
+                                    {
+                                      src: "/assets/images/icons/switch.svg",
+                                      alt: labels.switchAriaLabel,
+                                      width: 26,
+                                      height: 26
+                                    }
+                                  )
+                                }
+                              )
+                            }
+                          )
                         ]
                       }
                     ),
@@ -4857,6 +4863,40 @@ var CardTicketSearch = ({
                     },
                     className: styles.serviceCol,
                     children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        reactGridSystem.Col,
+                        {
+                          xs: 12,
+                          sm: 12,
+                          md: 12,
+                          lg: 12,
+                          xl: 12,
+                          xxl: 12,
+                          xxxl: 12,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            InputDynamic_default,
+                            {
+                              name: "serviceClass",
+                              label: labels.serviceClassLabel,
+                              control,
+                              type: "text",
+                              contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
+                                react.Icon,
+                                {
+                                  icon: "fluent:ribbon-star-24-filled",
+                                  color: reactComponents.tokens.colorBrandBackground
+                                }
+                              ),
+                              appearance: "filled-lighter",
+                              size: "large",
+                              placeholder: labels.placeholderTypeClass,
+                              onClick: onServiceClassClick,
+                              required: true,
+                              disabled: serviceClassDisabled
+                            }
+                          )
+                        }
+                      ) }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.formField, children: /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { style: { height: "100%", gap: "16px" }, children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           reactGridSystem.Col,
@@ -4868,40 +4908,9 @@ var CardTicketSearch = ({
                             xl: 12,
                             xxl: 12,
                             xxxl: 12,
-                            children: /* @__PURE__ */ jsxRuntime.jsx(
-                              InputDynamic_default,
-                              {
-                                name: "serviceClass",
-                                label: labels.serviceClassLabel,
-                                control,
-                                type: "text",
-                                contentBefore: /* @__PURE__ */ jsxRuntime.jsx(
-                                  react.Icon,
-                                  {
-                                    icon: "fluent:ribbon-star-24-filled",
-                                    color: reactComponents.tokens.colorBrandBackground
-                                  }
-                                ),
-                                appearance: "filled-lighter",
-                                size: "large",
-                                placeholder: labels.placeholderTypeClass,
-                                onClick: onServiceClassClick,
-                                required: true,
-                                disabled: serviceClassDisabled
-                              }
-                            )
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
-                          reactGridSystem.Col,
-                          {
-                            xs: 12,
-                            sm: 12,
-                            md: 12,
-                            lg: 12,
-                            xl: 12,
-                            xxl: 12,
-                            xxxl: 12,
+                            style: {
+                              borderBottom: showPassengerField ? `1px solid ${reactComponents.tokens.colorNeutralStroke1}` : "none"
+                            },
                             children: /* @__PURE__ */ jsxRuntime.jsx(
                               InputDynamic_default,
                               {
@@ -4927,7 +4936,7 @@ var CardTicketSearch = ({
                             )
                           }
                         ),
-                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(
+                        showPassengerField && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
                           reactGridSystem.Col,
                           {
                             xs: 12,
@@ -4959,7 +4968,7 @@ var CardTicketSearch = ({
                               }
                             )
                           }
-                        )
+                        ) })
                       ] }) }) }),
                       /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { xs: 12, sm: 12, lg: 12, xl: 12, xxl: 12, xxxl: 12, children: /* @__PURE__ */ jsxRuntime.jsx(
                         reactComponents.Button,
@@ -5406,7 +5415,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 +5429,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 = reactComponents.makeStyles({
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: reactComponents.tokens.spacingVerticalL,
+    textAlign: "center",
+    paddingTop: reactComponents.tokens.spacingVerticalXXL,
+    paddingBottom: reactComponents.tokens.spacingVerticalXXL,
+    paddingLeft: reactComponents.tokens.spacingHorizontalXL,
+    paddingRight: reactComponents.tokens.spacingHorizontalXL,
+    width: "100%"
+  },
+  image: {
+    maxWidth: "100%",
+    height: "auto"
+  },
+  textContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: reactComponents.tokens.spacingVerticalS,
+    maxWidth: "400px"
+  },
+  title: {
+    fontWeight: "600"
+  },
+  message: {
+    color: reactComponents.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__ */ jsxRuntime.jsxs("div", { className: reactComponents.mergeClasses(styles.root, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: imageSrc,
+        alt: displayImageAlt,
+        width: imageWidth,
+        height: imageHeight,
+        className: styles.image
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }),
+      typeof displayMessage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.message, children: displayMessage }) : displayMessage
+    ] }),
+    actionButton && /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Button,
+      {
+        type: "button",
+        appearance: actionButton.appearance || "primary",
+        onClick: actionButton.onClick,
+        shape: "circular",
+        style: { width: "100%" },
+        children: actionButton.text
+      }
+    )
+  ] });
+};
+var useStyles12 = reactComponents.makeStyles({
   dialogTitle: {
     display: "flex",
     justifyContent: "space-between",
@@ -5559,7 +5673,7 @@ var HarborListItem = ({
   showDivider,
   containerClassName
 }) => {
-  const styles = useStyles11();
+  const styles = useStyles12();
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClassName, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.listContent, onClick: () => onSelect(harbor), children: [
@@ -5582,6 +5696,57 @@ var HarborListItem = ({
     showDivider && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {})
   ] });
 };
+var HarborListSkeleton = ({
+  count = 5,
+  showFavoriteIcon = false
+}) => {
+  const styles = useStyles12();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactComponents.Skeleton,
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
+          width: "70%"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "24px",
+                height: "24px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "100%",
+                height: "20px",
+                borderRadius: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ),
+    showFavoriteIcon && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.SkeletonItem,
+      {
+        style: {
+          width: "24px",
+          height: "24px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalSearchHarbor = ({
   language = "id",
   labels,
@@ -5592,7 +5757,8 @@ var ModalSearchHarbor = ({
   harbors,
   favoriteHarbors,
   lastSearchedHarbors,
-  isLoading = false,
+  isLoadingPort = false,
+  isLoadingTravelPlan = false,
   searchQuery,
   onSearchChange,
   onSelectHarbor,
@@ -5601,11 +5767,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 +5814,15 @@ var ModalSearchHarbor = ({
             children: title || mergedLabels.title
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { className: styles.content, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isError ? /* @__PURE__ */ jsxRuntime.jsx(
+          EmptyContent,
+          {
+            content: mergedLabels.emptyContent,
+            language,
+            actionButton: reloadButtonAll,
+            imageSrc: emptyImageSrc
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
             reactComponents.Input,
             {
@@ -5660,177 +5841,154 @@ var ModalSearchHarbor = ({
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.resultList, children: [
-            favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.favoriteHeader }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Caption1,
+            isErrorTravelPlan ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}) : isLoadingTravelPlan ? /* @__PURE__ */ jsxRuntime.jsx(HarborListSkeleton, { count: 3, showFavoriteIcon: false }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.favoriteHeader }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Caption1,
+                    {
+                      className: reactComponents.mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearFavorite,
+                      children: mergedLabels.clearAllButton
+                    }
+                  )
+                ] }),
+                favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactComponents.Button,
                   {
-                    className: reactComponents.mergeClasses(
-                      styles.dangerText,
-                      styles.cursorPointer
+                    onClick: () => handleSelect(harbor),
+                    size: "medium",
+                    appearance: "subtle",
+                    iconPosition: "before",
+                    className: styles.circularButton,
+                    icon: /* @__PURE__ */ jsxRuntime.jsx(
+                      react.Icon,
+                      {
+                        icon: "fluent:vehicle-ship-20-regular",
+                        fontSize: 20,
+                        color: reactComponents.tokens.colorBrandBackground
+                      }
                     ),
-                    onClick: onClearFavorite,
-                    children: mergedLabels.clearAllButton
-                  }
-                )
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContent, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
+                        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        react.Icon,
+                        {
+                          icon: "fluent:star-24-filled",
+                          fontSize: 20,
+                          color: reactComponents.tokens.colorBrandBackground,
+                          style: { marginLeft: 5 }
+                        }
+                      )
+                    ]
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              favoriteHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.buttonContainer, children: favoriteHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsxs(
-                reactComponents.Button,
-                {
-                  onClick: () => handleSelect(harbor),
-                  size: "medium",
-                  appearance: "subtle",
-                  iconPosition: "before",
-                  className: styles.circularButton,
-                  icon: /* @__PURE__ */ jsxRuntime.jsx(
-                    react.Icon,
+              lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.Caption1,
                     {
-                      icon: "fluent:vehicle-ship-20-regular",
-                      fontSize: 20,
-                      color: reactComponents.tokens.colorBrandBackground
+                      className: reactComponents.mergeClasses(
+                        styles.dangerText,
+                        styles.cursorPointer
+                      ),
+                      onClick: onClearLastSearched,
+                      children: mergedLabels.clearAllButton
                     }
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.buttonContent, children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: harbor.portName }),
-                      /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: harbor.branchName })
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
+                  HarborListItem,
+                  {
+                    harbor,
+                    onSelect: handleSelect,
+                    containerClassName: styles.historyItem,
+                    trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(
                       react.Icon,
                       {
-                        icon: "fluent:star-24-filled",
+                        onClick: () => onRemoveLastSearched(harbor),
+                        icon: "fluent:dismiss-24-regular",
                         fontSize: 20,
-                        color: reactComponents.tokens.colorBrandBackground,
-                        style: { marginLeft: 5 }
+                        className: styles.cursorPointer
                       }
-                    )
-                  ]
-                },
-                harbor.portId
-              )) })
-            ] }),
-            lastSearchedHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.lastSearchedHeader }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Caption1,
-                  {
-                    className: reactComponents.mergeClasses(
-                      styles.dangerText,
-                      styles.cursorPointer
                     ),
-                    onClick: onClearLastSearched,
-                    children: mergedLabels.clearAllButton
-                  }
-                )
+                    showDivider: true
+                  },
+                  harbor.portId
+                )) })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: lastSearchedHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
+              popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
+                  HarborListItem,
+                  {
+                    harbor,
+                    onSelect: handleSelect,
+                    containerClassName: styles.historyItem,
+                    showDivider: true
+                  },
+                  harbor.portId
+                )) })
+              ] })
+            ] }),
+            isErrorPort ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                EmptyContent,
+                {
+                  content: mergedLabels.emptyContent,
+                  language,
+                  actionButton: reloadButtonPort,
+                  imageSrc: emptyImageSrc
+                }
+              )
+            ] }) : isLoadingPort ? /* @__PURE__ */ jsxRuntime.jsx(
+              HarborListSkeleton,
+              {
+                count: 5,
+                showFavoriteIcon: showButtonFavorite
+              }
+            ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsx(
                 HarborListItem,
                 {
                   harbor,
                   onSelect: handleSelect,
-                  containerClassName: styles.historyItem,
-                  trailingIcon: /* @__PURE__ */ jsxRuntime.jsx(
+                  containerClassName: styles.harborItem,
+                  trailingIcon: showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
                     react.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: reactComponents.tokens.colorBrandBackground,
+                      className: styles.cursorPointer,
+                      onClick: () => onToggleFavorite(harbor)
                     }
                   ),
-                  showDivider: true
-                },
-                harbor.portId
-              )) })
-            ] }),
-            popularHarbors.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.headerRow, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { children: mergedLabels.popularHarborHeader }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: popularHarbors.map((harbor) => /* @__PURE__ */ jsxRuntime.jsx(
-                HarborListItem,
-                {
-                  harbor,
-                  onSelect: handleSelect,
-                  containerClassName: styles.historyItem,
-                  showDivider: true
+                  showDivider: index !== harbors.length - 1
                 },
-                harbor.portId
-              )) })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { className: styles.sectionTitle, children: mergedLabels.allHarborsHeader }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.harborList, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: [1, 2, 3, 4, 5].map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.harborItem, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                reactComponents.Skeleton,
-                {
-                  style: {
-                    display: "flex",
-                    alignItems: "center",
-                    gap: "0.5rem",
-                    width: "70%"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.SkeletonItem,
-                      {
-                        style: {
-                          width: "24px",
-                          height: "24px",
-                          borderRadius: "4px"
-                        }
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.SkeletonItem,
-                      {
-                        style: {
-                          width: "100%",
-                          height: "20px",
-                          borderRadius: "4px"
-                        }
-                      }
-                    )
-                  ]
-                }
-              ),
-              showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                reactComponents.SkeletonItem,
-                {
-                  style: {
-                    width: "24px",
-                    height: "24px",
-                    borderRadius: "4px"
-                  }
-                }
-              ) })
-            ] }, item)) }) : harbors.length > 0 ? harbors.map((harbor, index) => /* @__PURE__ */ jsxRuntime.jsx(
-              HarborListItem,
-              {
-                harbor,
-                onSelect: handleSelect,
-                containerClassName: styles.harborItem,
-                trailingIcon: showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
-                  react.Icon,
-                  {
-                    icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
-                    color: reactComponents.tokens.colorBrandBackground,
-                    className: styles.cursorPointer,
-                    onClick: () => onToggleFavorite(harbor)
-                  }
-                ),
-                showDivider: index !== harbors.length - 1
-              },
-              harbor.portId || index
-            )) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.emptyState, children: mergedLabels.harborNotFound }) })
+                harbor.portId || index
+              )) : /* @__PURE__ */ jsxRuntime.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 +6002,7 @@ var DEFAULT_LABELS11 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles12 = reactComponents.makeStyles({
+var useStyles13 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -5964,8 +6122,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 };
   React.useEffect(() => {
     moment__default.default.locale(language === "id" ? "id" : "en");
   }, [language]);
@@ -6188,14 +6346,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 +6362,11 @@ var DEFAULT_LABELS12 = {
     error: "Error loading services",
     selectAll: "Select All",
     saveButton: "Save",
-    closeAriaLabel: "Close"
+    closeAriaLabel: "Close",
+    emptyContent: "Service Class"
   }
 };
-var useStyles13 = reactComponents.makeStyles({
+var useStyles14 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6279,6 +6439,66 @@ var useStyles13 = reactComponents.makeStyles({
     borderRadius: reactComponents.tokens.borderRadiusCircular
   }
 });
+var ServiceListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles14();
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.serviceList, children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceItem, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.serviceContent, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactComponents.Skeleton,
+      {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "4px",
+          width: "80%"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "120px",
+                height: "20px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "80px",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactComponents.SkeletonItem,
+            {
+              style: {
+                width: "100%",
+                height: "16px",
+                borderRadius: "4px"
+              }
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.SkeletonItem,
+      {
+        style: {
+          width: "20px",
+          height: "20px",
+          borderRadius: "4px"
+        }
+      }
+    ) })
+  ] }, index)) });
+};
 var ModalService = ({
   language = "id",
   labels,
@@ -6289,10 +6509,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] = React.useState(selectedServiceIds);
   React.useEffect(() => {
@@ -6347,7 +6569,15 @@ var ModalService = ({
         children: displayTitle
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.loading }) : isError ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.error }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(ServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.serviceList, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.selectAll }),
@@ -6397,23 +6627,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 = reactComponents.makeStyles({
+var useStyles15 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -6480,6 +6712,62 @@ var useStyles14 = reactComponents.makeStyles({
     margin: 0
   }
 });
+var TotalPassengersListSkeleton = ({
+  count = 3
+}) => {
+  const styles = useStyles15();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: reactComponents.tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionHeader, style: { padding: "0 12px" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.SkeletonItem,
+                  {
+                    style: {
+                      width: "120px",
+                      height: "18px"
+                    }
+                  }
+                ) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: "4px" } }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.SkeletonItem,
+                  {
+                    style: {
+                      width: "48px",
+                      height: "14px"
+                    }
+                  }
+                ) })
+              }
+            )
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTotalPassengers = ({
   language = "id",
   labels,
@@ -6490,11 +6778,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] = React.useState([]);
   const [openItems, setOpenItems] = React.useState([]);
   const defaultInfoMessage = mergedLabels.infoMessage.replace(
@@ -6551,11 +6842,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 +6906,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 +6944,134 @@ var ModalTotalPassengers = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TotalPassengersListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBar, { shape: "rounded", children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.MessageBarBody, { children: infoMessage || defaultInfoMessage }) }),
-      isLoading ? /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: mergedLabels.loading }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactComponents.Accordion,
-          {
-            collapsible: true,
-            multiple: true,
-            openItems,
-            onToggle: (_, data) => setOpenItems(data.openItems),
-            className: styles.passengerSection,
-            children: passengerTypes.map((passengerType) => {
-              const classes = passengerType.classes || [];
-              return /* @__PURE__ */ jsxRuntime.jsxs(
-                reactComponents.AccordionItem,
-                {
-                  value: String(passengerType.id),
-                  className: styles.accordionItem,
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      reactComponents.AccordionHeader,
-                      {
-                        className: styles.accordionHeader,
-                        expandIconPosition: "end",
-                        children: [
-                          passengerType.passengerAgeName,
-                          " (",
-                          getTotalForType(passengerType.passengerAgeCode),
-                          ")"
-                        ]
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      "div",
-                      {
-                        className: styles.nestedRow,
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
-                          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
-                                onClick: (e) => {
-                                  e.stopPropagation();
-                                  handleDecrement(
-                                    passengerType.passengerAgeCode,
-                                    cls.classCode
-                                  );
-                                },
-                                disabled: getServiceCount(
-                                  passengerType.passengerAgeCode,
-                                  cls.classCode
-                                ) === 0
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        reactComponents.Accordion,
+        {
+          collapsible: true,
+          multiple: true,
+          openItems,
+          onToggle: (_, data) => setOpenItems(data.openItems),
+          className: styles.passengerSection,
+          children: passengerTypes.map((passengerType) => {
+            const classes = passengerType.classes || [];
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              reactComponents.AccordionItem,
+              {
+                value: String(passengerType.id),
+                className: styles.accordionItem,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.AccordionHeader,
+                    {
+                      className: styles.accordionHeader,
+                      expandIconPosition: "end",
+                      children: [
+                        passengerType.passengerAgeName,
+                        " (",
+                        getTotalForType(passengerType.passengerAgeCode),
+                        ")"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.AccordionPanel, { className: styles.accordionPanel, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.nestedSection, children: classes.map((cls) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.nestedRow, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactComponents.Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:subtract-12-regular" }),
+                          onClick: (e) => {
+                            e.stopPropagation();
+                            handleDecrement(
                               passengerType.passengerAgeCode,
                               cls.classCode
-                            ) }),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.Button,
-                              {
-                                appearance: "outline",
-                                className: styles.counterButton,
-                                size: "small",
-                                icon: /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsx(
-          reactComponents.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__ */ jsxRuntime.jsx(reactComponents.Body1, { className: styles.countText, children: getServiceCount(
+                        passengerType.passengerAgeCode,
+                        cls.classCode
+                      ) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        reactComponents.Button,
+                        {
+                          appearance: "outline",
+                          className: styles.counterButton,
+                          size: "small",
+                          icon: /* @__PURE__ */ jsxRuntime.jsx(react.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__ */ jsxRuntime.jsx(
+        reactComponents.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,49 +7086,132 @@ var DEFAULT_VEHICLE_ICONS = {
   bigTruck: "/assets/images/icons/big-truck.webp",
   looseLoad: "/assets/images/icons/loose-load.webp"
 };
-var useStyles15 = reactComponents.makeStyles({
-  dialogSurface: {
-    maxWidth: "600px",
-    width: "100%"
-  },
-  closeButton: {
-    minWidth: "32px",
-    minHeight: "32px"
-  },
-  passengerSection: {
-    marginTop: reactComponents.tokens.spacingHorizontalM,
-    display: "flex",
-    flexDirection: "column"
-  },
-  accordionItem: {
-    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
-    width: "100%"
-  },
-  accordionHeader: {
-    fontSize: reactComponents.tokens.fontSizeBase300,
-    fontWeight: reactComponents.tokens.fontWeightBold,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "100%"
-  },
-  accordionTitleAndInfo: {
-    display: "flex",
-    flexDirection: "column",
-    gap: "2px",
-    marginLeft: reactComponents.tokens.spacingHorizontalM,
-    flex: 1
-  },
-  accordionBody: {
-    marginLeft: "100px"
-  },
-  footer: {
-    marginTop: reactComponents.tokens.spacingVerticalL,
-    display: "flex",
-    gap: reactComponents.tokens.spacingHorizontalM,
-    justifyContent: "flex-end"
-  }
-});
+var useStyles16 = reactComponents.makeStyles({
+  dialogSurface: {
+    maxWidth: "600px",
+    width: "100%"
+  },
+  closeButton: {
+    minWidth: "32px",
+    minHeight: "32px"
+  },
+  passengerSection: {
+    marginTop: reactComponents.tokens.spacingHorizontalM,
+    display: "flex",
+    flexDirection: "column"
+  },
+  accordionItem: {
+    borderBottom: `1px solid ${reactComponents.tokens.colorNeutralStroke2}`,
+    width: "100%"
+  },
+  accordionHeader: {
+    fontSize: reactComponents.tokens.fontSizeBase300,
+    fontWeight: reactComponents.tokens.fontWeightBold,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%"
+  },
+  accordionTitleAndInfo: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "2px",
+    marginLeft: reactComponents.tokens.spacingHorizontalM,
+    flex: 1
+  },
+  accordionBody: {
+    marginLeft: "100px"
+  },
+  footer: {
+    marginTop: reactComponents.tokens.spacingVerticalL,
+    display: "flex",
+    gap: reactComponents.tokens.spacingHorizontalM,
+    justifyContent: "flex-end"
+  }
+});
+var TypeOfServiceListSkeleton = ({ count = 3 }) => {
+  const styles = useStyles16();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        marginTop: reactComponents.tokens.spacingHorizontalM
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: styles.accordionItem,
+          style: { padding: "8px 0" },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionHeader, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                style: { display: "flex", alignItems: "center", width: "100%" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                    reactComponents.SkeletonItem,
+                    {
+                      style: {
+                        width: "74px",
+                        height: "74px",
+                        borderRadius: "8px"
+                      }
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.accordionTitleAndInfo, style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactComponents.Skeleton,
+                    {
+                      style: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: "4px"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactComponents.SkeletonItem,
+                          {
+                            style: {
+                              width: "120px",
+                              height: "20px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          reactComponents.SkeletonItem,
+                          {
+                            style: {
+                              width: "150px",
+                              height: "16px",
+                              borderRadius: "4px"
+                            }
+                          }
+                        )
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Skeleton, { children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactComponents.SkeletonItem,
+              {
+                style: {
+                  width: "16px",
+                  height: "16px",
+                  borderRadius: "50%"
+                }
+              }
+            ) })
+          ] })
+        },
+        index
+      ))
+    }
+  );
+};
 var ModalTypeOfService = ({
   language = "id",
   labels,
@@ -6842,10 +7221,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] = React.useState(
     selectedService?.id || 0
   );
@@ -6958,7 +7341,15 @@ var ModalTypeOfService = ({
         children: title || mergedLabels.title
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogContent, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { children: isLoading ? /* @__PURE__ */ jsxRuntime.jsx(TypeOfServiceListSkeleton, {}) : isError ? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyContent,
+      {
+        content: mergedLabels.emptyContent,
+        language,
+        actionButton: reloadButton,
+        imageSrc: emptyImageSrc
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Accordion,
         {
@@ -7005,7 +7396,9 @@ var ModalTypeOfService = ({
                               styles.accordionHeader,
                               styles.accordionItem
                             ),
-                            style: { padding: reactComponents.tokens.spacingHorizontalXS },
+                            style: {
+                              padding: reactComponents.tokens.spacingHorizontalXS
+                            },
                             children: [
                               /* @__PURE__ */ jsxRuntime.jsx("div", { children: imageRenderer({
                                 src: childItem.image,
@@ -7013,10 +7406,16 @@ var ModalTypeOfService = ({
                                 width: 48,
                                 height: 48
                               }) }),
-                              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.accordionTitleAndInfo, children: [
-                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
-                                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
-                              ] }),
+                              /* @__PURE__ */ jsxRuntime.jsxs(
+                                "div",
+                                {
+                                  className: styles.accordionTitleAndInfo,
+                                  children: [
+                                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: childItem.title }),
+                                    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: childItem.info })
+                                  ]
+                                }
+                              ),
                               /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Radio, { value: String(childItem.id) })
                             ]
                           },
@@ -7066,7 +7465,15 @@ var ModalTypeOfService = ({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.footer, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Button, { appearance: "secondary", shape: "circular", onClick: onClose, children: mergedLabels.cancelButton }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "secondary",
+            shape: "circular",
+            onClick: onClose,
+            children: mergedLabels.cancelButton
+          }
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.Button,
           {
@@ -7078,12 +7485,12 @@ var ModalTypeOfService = ({
           }
         )
       ] })
-    ] })
+    ] }) })
   ] }) }) });
 };
 
 // src/components/SortMenu/SortMenu.constants.ts
-var DEFAULT_LABELS15 = {
+var DEFAULT_LABELS16 = {
   id: {
     filterButtonText: "Filter",
     sortButtonText: "Urutkan Berdasarkan",
@@ -7125,7 +7532,7 @@ var getSortLabel = (value) => {
   const option = DEFAULT_SORT_OPTIONS.find((opt) => opt.value === value);
   return option?.label || "Rekomendasi";
 };
-var useStyles16 = reactComponents.makeStyles({
+var useStyles17 = reactComponents.makeStyles({
   container: {
     display: "flex",
     width: "100%",
@@ -7161,10 +7568,10 @@ var SortMenu = ({
   sortButtonText: deprecatedSortButtonText,
   clearFiltersText: deprecatedClearFiltersText
 }) => {
-  const styles = useStyles16();
+  const styles = useStyles17();
   const labels = React__default.default.useMemo(
     () => ({
-      ...DEFAULT_LABELS15[language],
+      ...DEFAULT_LABELS16[language],
       ...customLabels,
       // Fallback to deprecated props if provided
       ...deprecatedFilterButtonText && {
@@ -7276,7 +7683,7 @@ var SortMenu = ({
 };
 
 // src/components/ModalFilterTicket/ModalFilterTicket.constants.ts
-var DEFAULT_LABELS16 = {
+var DEFAULT_LABELS17 = {
   id: {
     title: "Filter dengan",
     serviceTypeLabel: "Jenis Layanan",
@@ -7337,7 +7744,7 @@ var DEFAULT_DURATION_RANGE = {
   min: 0,
   max: 8
 };
-var useStyles17 = reactComponents.makeStyles({
+var useStyles18 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%"
@@ -7447,8 +7854,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] = React.useState(false);
   React.useEffect(() => {
     if (open) {
@@ -7758,7 +8165,7 @@ var ModalFilterTicket = ({
 };
 
 // src/components/DateFilter/DateFilter.constants.ts
-var DEFAULT_LABELS17 = {
+var DEFAULT_LABELS18 = {
   id: {
     prevButtonAriaLabel: "Tanggal sebelumnya",
     nextButtonAriaLabel: "Tanggal berikutnya",
@@ -7771,7 +8178,7 @@ var DEFAULT_LABELS17 = {
   }
 };
 var DEFAULT_SCROLL_AMOUNT = 150;
-var useStyles18 = reactComponents.makeStyles({
+var useStyles19 = reactComponents.makeStyles({
   container: {
     display: "flex",
     alignItems: "stretch",
@@ -7854,10 +8261,10 @@ var DateFilter = ({
   labels,
   isLoading = false
 }) => {
-  const styles = useStyles18();
+  const styles = useStyles19();
   const scrollRef = React.useRef(null);
   const mergedLabels = {
-    ...DEFAULT_LABELS17[language],
+    ...DEFAULT_LABELS18[language],
     ...labels
   };
   const handlePrev = () => {
@@ -7920,7 +8327,7 @@ var DateFilter = ({
 };
 
 // src/components/ModalSearchTicket/ModalSearchTicket.constants.ts
-var DEFAULT_LABELS18 = {
+var DEFAULT_LABELS19 = {
   id: {
     title: "Cari Jadwal Lainnya",
     fromLabel: "Dari",
@@ -7980,7 +8387,7 @@ var DEFAULT_FORM_VALUES = {
   typeOfService: "",
   passenger: ""
 };
-var useStyles19 = reactComponents.makeStyles({
+var useStyles20 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "900px",
     width: "100%"
@@ -8082,8 +8489,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 } = reactHookForm.useForm({
     defaultValues: {
       ...DEFAULT_FORM_VALUES,
@@ -8520,7 +8927,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 +8937,7 @@ var DEFAULT_LABELS19 = {
     ferryIconAlt: "Ferry Icon"
   }
 };
-var useStyles20 = reactComponents.makeStyles({
+var useStyles21 = reactComponents.makeStyles({
   stepperWrapper: {
     position: "relative",
     width: "100%",
@@ -8655,8 +9062,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 = React.useMemo(() => {
     if (typeof currentStep === "number") {
       return steps.findIndex((step) => step.number === currentStep);
@@ -8712,7 +9119,7 @@ var Stepper = ({
 };
 
 // src/components/CardOrdererInfo/CardOrdererInfo.constants.ts
-var DEFAULT_LABELS20 = {
+var DEFAULT_LABELS21 = {
   id: {
     title: "Informasi Pemesan",
     ordererName: "Nama Pemesan",
@@ -8726,7 +9133,7 @@ var DEFAULT_LABELS20 = {
     email: "Email"
   }
 };
-var useStyles21 = reactComponents.makeStyles({
+var useStyles22 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -8756,8 +9163,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { children: mergedLabels.title }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
@@ -8778,7 +9185,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 +9215,7 @@ var DEFAULT_LABELS21 = {
     }
   }
 };
-var useStyles22 = reactComponents.makeStyles({
+var useStyles23 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -8863,8 +9270,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 +9402,7 @@ var ModalListPassenger = ({
 };
 
 // src/components/ModalPassengerForm/ModalPassengerForm.constants.ts
-var DEFAULT_LABELS22 = {
+var DEFAULT_LABELS23 = {
   id: {
     title: "Detail Penumpang",
     titleLabel: "Title",
@@ -9146,7 +9553,7 @@ var calculateAge = (birthDate) => {
   }
   return { years: Math.max(0, years), months: Math.max(0, months) };
 };
-var useStyles23 = reactComponents.makeStyles({
+var useStyles24 = reactComponents.makeStyles({
   dialogSurface: {
     maxWidth: "600px",
     width: "100%",
@@ -9326,10 +9733,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 +10468,7 @@ var ModalPassengerForm = ({
 };
 
 // src/components/CardPassengerList/CardPassengerList.constants.ts
-var DEFAULT_LABELS23 = {
+var DEFAULT_LABELS24 = {
   id: {
     defaultTitle: "Data Penumpang",
     passengerPrefix: "Penumpang"
@@ -10104,7 +10511,7 @@ var getBadgeConfig = (ticketClass) => {
       };
   }
 };
-var useStyles24 = reactComponents.makeStyles({
+var useStyles25 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10187,8 +10594,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: className || styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -10261,7 +10668,7 @@ var CardPassengerList = ({
 };
 
 // src/components/CardVehicleDetail/CardVehicleDetail.constants.ts
-var DEFAULT_LABELS24 = {
+var DEFAULT_LABELS25 = {
   id: {
     title: "Detail Kendaraan",
     vehicleNumberLabel: "Nomor Kendaraan",
@@ -10279,7 +10686,7 @@ var DEFAULT_LABELS24 = {
     noLabel: "No"
   }
 };
-var useStyles25 = reactComponents.makeStyles({
+var useStyles26 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10319,8 +10726,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -10382,7 +10789,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 +10897,7 @@ var DEFAULT_LABELS25 = {
     incrementQuantityAriaLabel: "Increase quantity"
   }
 };
-var useStyles26 = reactComponents.makeStyles({
+var useStyles27 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -10558,8 +10965,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.card, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.header, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", flex: 1 }, children: [
@@ -11347,7 +11754,7 @@ var CardVehicleOwnerForm = ({
 };
 
 // src/components/CardBookingTicket/CardBookingTicket.constants.ts
-var DEFAULT_LABELS26 = {
+var DEFAULT_LABELS27 = {
   id: {
     bookingDetails: "Booking Details",
     routeTitle: "Rute Perjalanan",
@@ -11383,7 +11790,7 @@ var DEFAULT_LABELS26 = {
     cancelDialogDismiss: "Cancel"
   }
 };
-var useStyles27 = reactComponents.makeStyles({
+var useStyles28 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -11547,8 +11954,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] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.bookingDetail, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.bookingDetailTop, children: [
@@ -11750,7 +12157,7 @@ var CardBookingTicket = ({
 };
 
 // src/components/CardFAQ/CardFAQ.constants.ts
-var DEFAULT_LABELS27 = {
+var DEFAULT_LABELS28 = {
   id: {
     title: "Pertanyaan yang sering diajukan"
   },
@@ -11804,7 +12211,7 @@ var DEFAULT_FAQ_ITEMS = {
     }
   ]
 };
-var useStyles28 = reactComponents.makeStyles({
+var useStyles29 = reactComponents.makeStyles({
   faqSection: {
     // marginTop: '2rem', // Let parent control spacing if needed, or keep consistent
   },
@@ -11828,8 +12235,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: styles.faqCard, children: [
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.title }),
@@ -11866,7 +12273,7 @@ var CardFAQ = ({
 };
 
 // src/components/CardAddon/CardAddon.constants.ts
-var DEFAULT_LABELS28 = {
+var DEFAULT_LABELS29 = {
   id: {
     viewDetail: "Lihat detail",
     totalPrice: "Total Harga",
@@ -11882,7 +12289,7 @@ var DEFAULT_LABELS28 = {
     currencySymbol: "Rp"
   }
 };
-var useStyles29 = reactComponents.makeStyles({
+var useStyles30 = reactComponents.makeStyles({
   card: {
     backgroundColor: reactComponents.tokens.colorNeutralBackground1,
     boxShadow: reactComponents.tokens.shadow4,
@@ -12055,8 +12462,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__ */ jsxRuntime.jsx(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.gapRow, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.titleDivider, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title3, { className: styles.textTitle, children: title }),
@@ -12267,7 +12674,7 @@ var CardAddon = ({
 };
 
 // src/components/CardMealCatalog/CardMealCatalog.constants.ts
-var DEFAULT_LABELS29 = {
+var DEFAULT_LABELS30 = {
   id: {
     addButton: "Tambah",
     currencySymbol: "Rp",
@@ -12283,7 +12690,7 @@ var DEFAULT_LABELS29 = {
     searchPlaceholder: "Search for food or drinks you want"
   }
 };
-var useStyles30 = reactComponents.makeStyles({
+var useStyles31 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -12427,8 +12834,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__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.banner, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.bannerOverlay }),
@@ -12533,7 +12940,7 @@ var CardMealCatalog = ({
 };
 
 // src/components/CardReview/CardReview.constants.ts
-var DEFAULT_LABELS30 = {
+var DEFAULT_LABELS31 = {
   id: {
     defaultTitle: "Tinjauan"
   },
@@ -12541,7 +12948,7 @@ var DEFAULT_LABELS30 = {
     defaultTitle: "Review"
   }
 };
-var useStyles31 = reactComponents.makeStyles({
+var useStyles32 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12592,8 +12999,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.headerTitle, children: title || mergedLabels.defaultTitle }),
@@ -12640,7 +13047,7 @@ var CardReview = ({
 };
 
 // src/components/CardReviewPassenger/CardReviewPassenger.constants.ts
-var DEFAULT_LABELS31 = {
+var DEFAULT_LABELS32 = {
   id: {
     title: "Penumpang",
     idNumber: "Nomor ID"
@@ -12650,7 +13057,7 @@ var DEFAULT_LABELS31 = {
     idNumber: "ID Number"
   }
 };
-var useStyles32 = reactComponents.makeStyles({
+var useStyles33 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12748,8 +13155,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__ */ jsxRuntime.jsxs(reactComponents.Card, { className: `${styles.card} ${className || ""}`, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerContainer, children: [
@@ -12792,7 +13199,7 @@ var CardReviewPassenger = ({
 };
 
 // src/components/CardPriceDetails/CardPriceDetails.constants.ts
-var DEFAULT_LABELS32 = {
+var DEFAULT_LABELS33 = {
   id: {
     defaultTitle: "Rincian Harga",
     totalPayment: "Total Pembayaran",
@@ -12828,7 +13235,7 @@ var DEFAULT_LABELS32 = {
     currencyPrefix: "Rp. "
   }
 };
-var useStyles33 = reactComponents.makeStyles({
+var useStyles34 = reactComponents.makeStyles({
   list: {
     margin: 0,
     padding: 0,
@@ -12850,7 +13257,7 @@ var PriceDetailsTerms = ({
   language = "id",
   labels
 }) => {
-  const styles = useStyles33();
+  const styles = useStyles34();
   const linkColor = reactComponents.tokens.colorBrandBackground;
   const bookingTerms = labels.bookingTerms;
   const agreementTerms = [
@@ -12870,7 +13277,7 @@ var PriceDetailsTerms = ({
     ] })
   ] });
 };
-var useStyles34 = reactComponents.makeStyles({
+var useStyles35 = reactComponents.makeStyles({
   card: {
     padding: "1.5rem",
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -12947,8 +13354,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 +13414,7 @@ var CardPriceDetails = ({
 };
 
 // src/components/CardPaymentMethodList/CardPaymentMethodList.constants.ts
-var DEFAULT_LABELS33 = {
+var DEFAULT_LABELS34 = {
   id: {
     selectAriaLabel: "Pilih metode pembayaran"
   },
@@ -13015,7 +13422,7 @@ var DEFAULT_LABELS33 = {
     selectAriaLabel: "Select payment method"
   }
 };
-var useStyles35 = reactComponents.makeStyles({
+var useStyles36 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13075,8 +13482,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__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.container}`, children: methods.map((category, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     index > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, {}) }),
     /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Accordion, { multiple: true, collapsible: true, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.AccordionItem, { value: category.value, children: [
@@ -13125,7 +13532,7 @@ var CardPaymentMethodList = ({
 };
 
 // src/components/CardPaymentGuide/CardPaymentGuide.constants.ts
-var DEFAULT_LABELS34 = {
+var DEFAULT_LABELS35 = {
   id: {
     title: "Cara Pembayaran"
   },
@@ -13133,7 +13540,7 @@ var DEFAULT_LABELS34 = {
     title: "Payment Method"
   }
 };
-var useStyles36 = reactComponents.makeStyles({
+var useStyles37 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13170,8 +13577,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__ */ jsxRuntime.jsxs("div", { className: `${styles.container} ${className || ""}`, children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.titleContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { className: styles.title, children: displayTitle }) }),
@@ -13190,7 +13597,7 @@ var CardPaymentGuide = ({
 };
 
 // src/components/CardPaymentInfo/CardPaymentInfo.constants.ts
-var DEFAULT_LABELS35 = {
+var DEFAULT_LABELS36 = {
   id: {
     expiryPrefix: "Kode virtual akun berlaku sampai",
     copyCodeButton: "Salin Kode",
@@ -13208,7 +13615,7 @@ var DEFAULT_LABELS35 = {
     currencySymbol: "Rp."
   }
 };
-var useStyles37 = reactComponents.makeStyles({
+var useStyles38 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13290,8 +13697,8 @@ var CardPaymentInfo = ({
   onCopyVA,
   onCheckStatus
 }) => {
-  const styles = useStyles37();
-  const mergedLabels = { ...DEFAULT_LABELS35[language], ...labels };
+  const styles = useStyles38();
+  const mergedLabels = { ...DEFAULT_LABELS36[language], ...labels };
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.card, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.container, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.headerRow, children: [
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: mergedLabels.expiryPrefix }),
@@ -13349,7 +13756,7 @@ var CardPaymentInfo = ({
 };
 
 // src/components/CardStatusOrder/CardStatusOrder.constants.ts
-var DEFAULT_LABELS36 = {
+var DEFAULT_LABELS37 = {
   id: {
     detailTitle: "Detail Pemesanan",
     statusLabel: "Status",
@@ -13379,7 +13786,7 @@ var DEFAULT_LABELS36 = {
     illustrationAlt: "E-Ticket Illustration"
   }
 };
-var useStyles38 = reactComponents.makeStyles({
+var useStyles39 = reactComponents.makeStyles({
   activeCard: {
     width: "100%",
     // padding: tokens.spacingHorizontalNone, // default
@@ -13449,8 +13856,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 +13954,7 @@ var CardStatusOrder = ({
 };
 
 // src/components/ModalPriceDetail/ModalPriceDetail.constants.ts
-var DEFAULT_LABELS37 = {
+var DEFAULT_LABELS38 = {
   id: {
     title: "Rincian Harga",
     addonHeader: "Add On",
@@ -13573,7 +13980,7 @@ var DEFAULT_LABELS37 = {
     closeAriaLabel: "Close"
   }
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   surface: {
     width: "680px",
     maxWidth: "90vw",
@@ -13700,8 +14107,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__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
     {
@@ -13843,7 +14250,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 +14268,7 @@ var DEFAULT_LABELS38 = {
     downloadTemplateDocument: "Download Template Document"
   }
 };
-var useStyles40 = reactComponents.makeStyles({
+var useStyles41 = reactComponents.makeStyles({
   surface: {
     maxWidth: "90vw",
     maxHeight: "90vh",
@@ -13888,7 +14295,7 @@ var ModalPreviewImage = ({
   imageUrl,
   alt = "Preview"
 }) => {
-  const styles = useStyles40();
+  const styles = useStyles41();
   return /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       reactComponents.DialogTitle,
@@ -14001,7 +14408,7 @@ var FileUpload = React__default.default.forwardRef(
     pdfIcon,
     downloadTemplateDocument = false
   }, ref) => {
-    const mergedLabels = { ...DEFAULT_LABELS38[language], ...customLabels };
+    const mergedLabels = { ...DEFAULT_LABELS39[language], ...customLabels };
     const styles = uploadStyles();
     const fileInputRef = React.useRef(null);
     const [, setIsDragOver] = React.useState(false);
@@ -14439,11 +14846,11 @@ function hexToRgba(hex, alpha = 1) {
 }
 
 // src/components/CardProfileMenu/CardProfileMenu.constants.ts
-var DEFAULT_LABELS39 = {
+var DEFAULT_LABELS40 = {
   id: {},
   en: {}
 };
-var useStyles41 = reactComponents.makeStyles({
+var useStyles42 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -14503,8 +14910,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);
   };
@@ -14572,7 +14979,9 @@ exports.DEFAULT_SORT_OPTIONS = DEFAULT_SORT_OPTIONS;
 exports.DEFAULT_TIME_SLOTS = DEFAULT_TIME_SLOTS;
 exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 exports.DateFilter = DateFilter;
-exports.DateFilterDefaultLabels = DEFAULT_LABELS17;
+exports.DateFilterDefaultLabels = DEFAULT_LABELS18;
+exports.EmptyContent = EmptyContent;
+exports.EmptyContentDefaultLabels = DEFAULT_LABELS11;
 exports.FileUpload = FileUpload_default;
 exports.GENDER = GENDER;
 exports.HTTP_STATUS = HTTP_STATUS;
@@ -14583,7 +14992,7 @@ exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.MY_TICKET_STATUS = MY_TICKET_STATUS;
 exports.MY_TICKET_TAB = MY_TICKET_TAB;
 exports.ModalFilterTicket = ModalFilterTicket;
-exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
+exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS17;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalListMenuService = ModalListMenuService;
 exports.ModalListPassenger = ModalListPassenger;