@asdp/ferryui 0.1.22-dev.8990 → 0.1.22-dev.9111

package/dist/index.js

@@ -344,6 +344,128 @@ var extendedTokens = {
   colorBrandForegroundLinkHover: customBrand[120],
   colorBrandForegroundLinkPressed: customBrand[130],
   colorBrandForegroundLinkSelected: customBrand[110]});
+
+// src/constants/api.ts
+var API_ENDPOINTS = {
+  PORTS: {
+    ORIGIN: "/v1/surrounding/catalog/ports/list/origin",
+    DESTINATION: "/v1/surrounding/catalog/ports/list/destination"
+  },
+  SERVICES: {
+    LIST: "/v1/surrounding/catalog/service-types"
+  },
+  PASSENGERS: {
+    LIST: "/v1/surrounding/catalog/passenger-types"
+  },
+  // Authentication endpoints
+  AUTH: {
+    LOGIN: "/v1/surrounding/auth/login",
+    REGISTER: "/auth/register",
+    LOGOUT: "/auth/logout",
+    REFRESH: "/auth/refresh",
+    PROFILE: "/auth/profile",
+    UPDATE_PROFILE: "/auth/profile",
+    CHANGE_PASSWORD: "/auth/change-password",
+    FORGOT_PASSWORD: "/auth/forgot-password",
+    RESET_PASSWORD: "/auth/reset-password",
+    VERIFY_EMAIL: "/auth/verify-email"
+  },
+  // User management
+  USERS: {
+    LIST: "/users",
+    CREATE: "/users",
+    DETAIL: (id) => `/users/${id}`,
+    UPDATE: (id) => `/users/${id}`,
+    DELETE: (id) => `/users/${id}`,
+    AVATAR: (id) => `/users/${id}/avatar`
+  },
+  // File management
+  FILES: {
+    UPLOAD: "/files/upload",
+    DOWNLOAD: (id) => `/files/${id}/download`,
+    DELETE: (id) => `/files/${id}`,
+    LIST: "/files"
+  },
+  // Dashboard/Analytics
+  DASHBOARD: {
+    STATS: "/dashboard/stats",
+    CHART_DATA: "/dashboard/chart-data",
+    RECENT_ACTIVITIES: "/dashboard/recent-activities"
+  },
+  // Notifications
+  NOTIFICATIONS: {
+    LIST: "/notifications",
+    MARK_READ: (id) => `/notifications/${id}/read`,
+    MARK_ALL_READ: "/notifications/read-all",
+    DELETE: (id) => `/notifications/${id}`,
+    SETTINGS: "/notifications/settings"
+  },
+  // Settings
+  SETTINGS: {
+    GENERAL: "/settings/general",
+    SECURITY: "/settings/security",
+    PREFERENCES: "/settings/preferences"
+  }
+};
+var API_CONFIG = {
+  TIMEOUT: 3e4,
+  RETRY_ATTEMPTS: 3,
+  RETRY_DELAY: 1e3,
+  CACHE_TIME: 5 * 60 * 1e3,
+  // 5 minutes
+  STALE_TIME: 2 * 60 * 1e3
+  // 2 minutes
+};
+var API_ERROR_MESSAGES = {
+  NETWORK_ERROR: "Network error occurred. Please check your connection.",
+  TIMEOUT_ERROR: "Request timeout. Please try again.",
+  UNAUTHORIZED: "You are not authorized to perform this action.",
+  FORBIDDEN: "Access denied.",
+  NOT_FOUND: "Resource not found.",
+  SERVER_ERROR: "Internal server error. Please try again later.",
+  VALIDATION_ERROR: "Please check your input and try again.",
+  TOKEN_EXPIRED: "Your session has expired. Please login again.",
+  RATE_LIMIT: "Too many requests. Please try again later."
+};
+var HTTP_STATUS = {
+  OK: 200,
+  CREATED: 201,
+  NO_CONTENT: 204,
+  BAD_REQUEST: 400,
+  UNAUTHORIZED: 401,
+  FORBIDDEN: 403,
+  NOT_FOUND: 404,
+  CONFLICT: 409,
+  UNPROCESSABLE_ENTITY: 422,
+  TOO_MANY_REQUESTS: 429,
+  INTERNAL_SERVER_ERROR: 500,
+  BAD_GATEWAY: 502,
+  SERVICE_UNAVAILABLE: 503
+};
+var PASSENGER_TYPE = {
+  ADULT: 1,
+  CHILD: 2,
+  INFANT: 3,
+  ELDERLY: 5
+};
+var IDENTITY_TYPE = {
+  KTP: 1,
+  SIM: 2,
+  PSP: 3,
+  TGL: 4
+};
+var LOAD_TYPE = {
+  PEDESTRIAN: 1,
+  MOTORBIKE: 2,
+  PASSENGER_VEHICLE: 3,
+  GOODS_VEHICLE: 4,
+  LOOSE_LOAD_WITH_VEHICLE: 5,
+  LOOSE_LOAD_WITHOUT_VEHICLE: 6
+};
+var GENDER = {
+  MALE: "M",
+  FEMALE: "F"
+};
 var useStyles2 = reactComponents.makeStyles({
   carousel: {},
   carouselContainer: {
@@ -933,6 +1055,15 @@ var DEFAULT_LABELS5 = {
     logoAlt: "ASDP Logo"
   }
 };
+
+// src/utils/format.ts
+function formatDuration(minutes) {
+  const hours = Math.floor(minutes / 60);
+  const mins = minutes % 60;
+  if (hours && mins) return `${hours} jam ${mins} menit`;
+  if (hours) return `${hours} jam`;
+  return `${mins} menit`;
+}
 var useStyles5 = reactComponents.makeStyles({
   dividerContainer: {
     position: "relative",
@@ -970,12 +1101,12 @@ var useStyles5 = reactComponents.makeStyles({
   },
   circularLeft: {
     position: "absolute",
-    width: "100px",
-    height: "50px",
+    width: "80px",
+    height: "80px",
     borderRadius: "50%",
     backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
-    left: "-50px",
-    boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)"
+    left: "-50px"
+    // boxShadow: "inset -3px 0px 1px rgba(0, 0, 0, 0.1)",
   },
   ticketMiddleCard: {
     width: "100%",
@@ -1080,12 +1211,12 @@ var useStyles5 = reactComponents.makeStyles({
   },
   circularRight: {
     position: "absolute",
-    width: "100px",
-    height: "50px",
+    width: "80px",
+    height: "80px",
     borderRadius: "50%",
     backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
-    right: "-50px",
-    boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)"
+    right: "-50px"
+    // boxShadow: "inset 3px 0px 1px rgba(0, 0, 0, 0.1)",
   },
   ticketWrapper: {
     borderRadius: reactComponents.tokens.borderRadiusXLarge,
@@ -1131,21 +1262,8 @@ var useStyles5 = reactComponents.makeStyles({
 var CardTicket = ({
   language = "id",
   labels,
-  id,
-  shipName,
-  shipType,
-  shipTypeColor = "success",
-  tooltipCaption = "",
-  availableSeats,
-  departureDay,
-  departureTime,
-  departureLocation,
-  arrivalDay,
-  arrivalTime,
-  arrivalLocation,
-  duration,
-  facilities,
-  totalPrice,
+  routeItem,
+  departureItem,
   buttonText,
   onPriceDetailClick,
   onPolicyClick,
@@ -1155,8 +1273,8 @@ var CardTicket = ({
   const { width } = useWindowSize();
   const mergedLabels = { ...DEFAULT_LABELS5[language], ...labels };
   const getCircularVerticalConfig = () => {
-    if (width <= 1600) return { count: 6, spacing: 60, top: 10 };
-    return { count: 5, spacing: 60, top: 18 };
+    if (width <= 1600) return { count: 3, spacing: 120, top: 25 };
+    return { count: 3, spacing: 100, top: 25 };
   };
   const circularVerticalConfig = getCircularVerticalConfig();
   return /* @__PURE__ */ jsxRuntime.jsxs(reactGridSystem.Row, { className: styles.ticketWrapper, children: [
@@ -1191,7 +1309,7 @@ var CardTicket = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   reactComponents.Tooltip,
                   {
-                    content: tooltipCaption,
+                    content: departureItem?.provider?.description,
                     relationship: "label",
                     appearance: "inverted",
                     children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1199,11 +1317,11 @@ var CardTicket = ({
                       {
                         size: "large",
                         appearance: "filled",
-                        color: shipTypeColor,
+                        style: { backgroundColor: departureItem?.provider?.serviceColor },
                         iconPosition: "before",
                         shape: "rounded",
                         icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:info-24-regular" }),
-                        children: shipType
+                        children: departureItem?.provider?.service
                       }
                     )
                   }
@@ -1228,7 +1346,7 @@ var CardTicket = ({
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "img",
                   {
-                    src: "/assets/logo/asdp-default.svg",
+                    src: departureItem?.provider?.logo,
                     className: styles.asdpLogo,
                     alt: mergedLabels.logoAlt,
                     height: 56,
@@ -1257,17 +1375,17 @@ var CardTicket = ({
                   {
                     size: "large",
                     style: {
-                      color: availableSeats > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
+                      color: departureItem?.availableTicket > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
                     },
                     appearance: "tint",
-                    color: availableSeats > 50 ? "success" : "danger",
+                    color: departureItem?.availableTicket > 50 ? "success" : "danger",
                     iconPosition: "after",
                     shape: "rounded",
                     icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
                     children: [
                       mergedLabels.availableSeatsLabel,
                       " ",
-                      availableSeats
+                      departureItem?.availableTicket
                     ]
                   }
                 )
@@ -1284,7 +1402,7 @@ var CardTicket = ({
                 xl: 12,
                 xxl: 12,
                 xxxl: 12,
-                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: shipName })
+                children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: departureItem?.provider?.name })
               }
             )
           ] }),
@@ -1324,46 +1442,42 @@ var CardTicket = ({
             {
               size: "extra-large",
               style: {
-                color: availableSeats > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
+                color: departureItem?.availableTicket > 50 ? sharedColors.Shared_Green_Primary : sharedColors.Shared_Red_Primary
               },
               appearance: "tint",
-              color: availableSeats > 50 ? "success" : "danger",
+              color: departureItem?.availableTicket > 50 ? "success" : "danger",
               iconPosition: "after",
               shape: "rounded",
               icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
               children: [
                 mergedLabels.availableSeatsLabel,
                 " ",
-                availableSeats
+                departureItem?.availableTicket
               ]
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketInfo, children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: departureDay }),
-              /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title2, { children: [
-                departureTime,
-                " ",
-                mergedLabels.timezoneLabel
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: departureLocation })
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: "KAMIS" }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Title2, { children: departureItem?.departureTime }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: routeItem?.portFrom + ", " + routeItem?.branchFrom })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketDuration, children: [
               /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
                 mergedLabels.estimationPrefix,
                 " ",
-                duration
+                formatDuration(departureItem?.estimatedSailingMinute)
               ] }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Divider, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:vehicle-ship-24-regular", height: 24 }) }) })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: arrivalDay }),
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: "KAMIS" }),
               /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Title2, { children: [
-                arrivalTime,
+                departureItem?.arrivedTime,
                 " ",
                 mergedLabels.timezoneLabel
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: arrivalLocation })
+              /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: routeItem?.portTo + ", " + routeItem?.branchTo })
             ] })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketButtons, children: [
@@ -1379,7 +1493,7 @@ var CardTicket = ({
                 },
                 icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:money-24-regular" }),
                 size: "medium",
-                onClick: onPriceDetailClick,
+                onClick: () => onPriceDetailClick(departureItem?.billingDetail, departureItem?.provider),
                 children: mergedLabels.priceDetailsButton
               }
             ),
@@ -1437,9 +1551,7 @@ var CardTicket = ({
                       children: [
                         mergedLabels.currencySymbol,
                         "\xA0",
-                        totalPrice.toLocaleString(
-                          language === "id" ? "id-ID" : "en-US"
-                        )
+                        departureItem?.billingDetail?.total?.formatted
                       ]
                     }
                   )
@@ -1461,7 +1573,7 @@ var CardTicket = ({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilitiesSection, children: [
             /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle2, { children: mergedLabels.facilitiesLabel }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.facilityItem, children: [
               /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:checkmark-circle-24-filled" }),
               /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1Strong, { children: facility })
             ] }, idx)) })
@@ -1799,6 +1911,12 @@ var useStyles6 = reactComponents.makeStyles({
     fontSize: reactComponents.tokens.fontSizeBase200,
     fontWeight: reactComponents.tokens.fontWeightRegular,
     color: reactComponents.tokens.colorNeutralForeground2,
+    // truncate text with ellipsis 2 line
+    display: "-webkit-box",
+    WebkitLineClamp: 2,
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
     lineHeight: "1.4",
     "@media (max-width: 1200px)": {
       fontSize: reactComponents.tokens.fontSizeBase100,
@@ -1840,10 +1958,23 @@ var CardServiceMenu = ({
           onClick: () => onServiceClick?.(item.id),
           "aria-label": item.name,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.imageUrl, alt: item.name, className: styles.logo }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: item.imageUrl,
+                alt: item.name,
+                className: styles.logo
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.textContent, children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.label, children: item.name }),
-              showDescriptions && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.description, children: item.description })
+              showDescriptions && /* @__PURE__ */ jsxRuntime.jsx(
+                MenuItemDescription,
+                {
+                  description: item.description,
+                  className: styles.description
+                }
+              )
             ] })
           ]
         }
@@ -1855,6 +1986,40 @@ var CardServiceMenu = ({
     ] }, item.id);
   }) }) });
 };
+function useIsClamped(deps) {
+  const ref = React5.useRef(null);
+  const [isClamped, setIsClamped] = React5.useState(false);
+  React5.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const check = () => setIsClamped(el.scrollHeight > el.clientHeight);
+    const timer = setTimeout(check, 0);
+    const observer = new ResizeObserver(check);
+    observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, deps ?? []);
+  return { ref, isClamped };
+}
+var MenuItemDescription = ({ description, className }) => {
+  const { ref, isClamped } = useIsClamped([description]);
+  console.log({ isClamped, ref });
+  if (isClamped) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Tooltip,
+      {
+        appearance: "inverted",
+        content: description,
+        relationship: "label",
+        positioning: "after",
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ref, className, children: description });
+};
 var DatePickerInput = React5.forwardRef(
   ({
     field,
@@ -2147,6 +2312,7 @@ var useStyles7 = reactComponents.makeStyles({
       border: `1px solid ${reactComponents.tokens.colorNeutralStroke1}`,
       borderRadius: reactComponents.tokens.borderRadiusMedium,
       padding: reactComponents.tokens.spacingVerticalS,
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralForeground3}`,
       paddingLeft: "48px",
       // fontSize: tokens.fontSizeBase300,
       fontFamily: reactComponents.tokens.fontFamilyBase,
@@ -2160,10 +2326,11 @@ var useStyles7 = reactComponents.makeStyles({
       // fontSize: tokens.fontSizeBase400,
     },
     "& .react-tel-input .form-control:hover": {
-      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1Hover}`
+      border: `1px solid ${reactComponents.tokens.colorNeutralStroke1Hover}`,
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralForeground3Hover}`
     },
     "& .react-tel-input .form-control:focus": {
-      borderBottom: `2px solid ${reactComponents.tokens.colorBrandStroke1}`
+      borderBottom: `2px solid ${reactComponents.tokens.colorBrandStroke1} !important`
       // boxShadow: `0 0 0 1px ${tokens.colorBrandStroke1}`,
     },
     "& .react-tel-input .form-control:disabled": {
@@ -2188,6 +2355,77 @@ var useStyles7 = reactComponents.makeStyles({
       backgroundColor: "transparent"
     }
   },
+  // Appearance: underline
+  phoneInputUnderline: {
+    "& .react-tel-input .form-control": {
+      border: "none",
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralForeground3}`,
+      borderRadius: 0,
+      backgroundColor: "transparent",
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid ${reactComponents.tokens.colorNeutralForeground3Hover}`
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${reactComponents.tokens.colorBrandStroke1}`,
+      boxShadow: "none"
+    },
+    "& .react-tel-input .flag-dropdown": {
+      border: "none",
+      backgroundColor: "transparent"
+    }
+  },
+  // Appearance: filled-darker
+  phoneInputFilledDarker: {
+    "& .react-tel-input .form-control": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      borderRadius: `${reactComponents.tokens.borderRadiusMedium} ${reactComponents.tokens.borderRadiusMedium} 0 0`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground3,
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground3Hover
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${reactComponents.tokens.colorBrandStroke1}`,
+      boxShadow: "none"
+    },
+    "& .react-tel-input .flag-dropdown": {
+      border: "none",
+      backgroundColor: "transparent"
+    }
+  },
+  // Appearance: filled-lighter
+  phoneInputFilledLighter: {
+    "& .react-tel-input .form-control": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      borderRadius: `${reactComponents.tokens.borderRadiusMedium} ${reactComponents.tokens.borderRadiusMedium} 0 0`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1,
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${reactComponents.tokens.colorBrandStroke1}`,
+      boxShadow: "none"
+    },
+    "& .react-tel-input .flag-dropdown": {
+      border: "none",
+      backgroundColor: "transparent"
+    }
+  },
   phoneInputError: {
     "& .react-tel-input .form-control": {
       border: `2px solid ${reactComponents.tokens.colorPaletteRedBorder2}`
@@ -2510,6 +2748,13 @@ var InputDynamic = ({
   };
   const renderInput = (field, error) => {
     const shouldTransparentBorder = disabled && appearance !== "outline" && appearance !== "underline";
+    const getPhoneAppearanceClass = () => {
+      if (appearance === "underline") return styles.phoneInputUnderline;
+      if (appearance === "filled-darker") return styles.phoneInputFilledDarker;
+      if (appearance === "filled-lighter") return styles.phoneInputFilledLighter;
+      return "";
+    };
+    const phoneAppearanceClass = getPhoneAppearanceClass();
     const inputStyle = shouldTransparentBorder ? { ...style, border: "transparent" } : style;
     const handleInputChange = (e) => {
       field.onChange(e);
@@ -2537,6 +2782,12 @@ var InputDynamic = ({
     const otpIndex2 = otpMatch ? parseInt(otpMatch[1], 10) : null;
     const classNameSize = size === "small" ? styles.valueSmall : size === "medium" ? styles.valueMedium : styles.valueLarge;
     const fontSizeValuePhoneInput = size == "small" ? reactComponents.tokens.fontSizeBase200 : size === "medium" ? reactComponents.tokens.fontSizeBase300 : reactComponents.tokens.fontSizeBase400;
+    const phoneInputSizeStyle = {
+      fontSize: fontSizeValuePhoneInput,
+      ...size === "small" && { minHeight: "26px", height: "26px", padding: `0 ${reactComponents.tokens.spacingHorizontalS} 0 48px` },
+      ...size === "medium" && { minHeight: "34px", height: "34px", padding: `${reactComponents.tokens.spacingVerticalXXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXXS} 48px` },
+      ...size === "large" && { minHeight: "40px", height: "40px", padding: `${reactComponents.tokens.spacingVerticalXS} ${reactComponents.tokens.spacingHorizontalS} ${reactComponents.tokens.spacingVerticalXS} 48px` }
+    };
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
@@ -2572,13 +2823,11 @@ var InputDynamic = ({
         "div",
         {
           ref: emailOrPhoneInputRef,
-          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
-              inputStyle: {
-                fontSize: fontSizeValuePhoneInput
-              },
+              inputStyle: phoneInputSizeStyle,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -2677,7 +2926,7 @@ var InputDynamic = ({
         "div",
         {
           ref: phoneInputRef,
-          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
           children: /* @__PURE__ */ jsxRuntime.jsx(
             PhoneInput,
             {
@@ -2719,9 +2968,7 @@ var InputDynamic = ({
               disabled,
               enableSearch: true,
               disableSearchIcon: true,
-              inputStyle: {
-                fontSize: fontSizeValuePhoneInput
-              }
+              inputStyle: phoneInputSizeStyle
             }
           )
         }
@@ -2804,7 +3051,7 @@ var InputDynamic = ({
             name: `${String(name)}_${Math.random().toString(36).substring(7)}`,
             isDisabled: disabled,
             placeholder: placeholder || "Select country",
-            options: COUNTRIES,
+            options: options && options.length > 0 ? options : COUNTRIES,
             styles: getSelectStyles(!!error),
             className: reactComponents.mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
@@ -2828,7 +3075,7 @@ var InputDynamic = ({
               {
                 style: { display: "flex", alignItems: "center", gap: "8px" },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }),
+                  options && options.length > 0 ? option.flag ? option.flag.startsWith("http") ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: option.label, src: option.flag, height: 20, width: 20, style: { objectFit: "contain" } }) : /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }) : null : option.flag ? /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: option.flag, width: 20, height: 20 }) : null,
                   /* @__PURE__ */ jsxRuntime.jsx("span", { children: option.label })
                 ]
               }
@@ -2850,7 +3097,7 @@ var InputDynamic = ({
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+            className: reactComponents.mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
             children: /* @__PURE__ */ jsxRuntime.jsx(
               PhoneInput,
               {
@@ -2864,9 +3111,7 @@ var InputDynamic = ({
                 disabled,
                 enableSearch: true,
                 disableSearchIcon: true,
-                inputStyle: {
-                  fontSize: fontSizeValuePhoneInput
-                }
+                inputStyle: phoneInputSizeStyle
               }
             )
           }
@@ -4070,9 +4315,10 @@ var useStyles9 = reactComponents.makeStyles({
   },
   circular: {
     position: "absolute",
-    width: "clamp(40px, 7vw, 90px)",
-    height: "clamp(40px, 7vw, 90px)",
-    borderRadius: "50% 50% 0 0",
+    width: "clamp(45px, 8vw, 90px)",
+    height: "clamp(22.5px, 4vw, 45px)",
+    // lebih kecil dari width
+    borderRadius: "50% 50% 0 0 / 100% 100% 0 0",
     backgroundColor: reactComponents.tokens.colorNeutralBackground1Hover,
     bottom: "-10px",
     boxShadow: "inset 0 2px 0px rgba(0, 0, 0, 0.1)"
@@ -4096,23 +4342,27 @@ var CardTicketSearchSummary = ({
   const { width } = useWindowSize();
   const getCircularConfig = () => {
     if (width <= parseInt(extendedTokens.breakpointXs))
-      return { count: 4, spacing: 65, size: 30, height: 30 };
+      return { count: 4, spacing: 65 };
     if (width <= parseInt(extendedTokens.breakpointSm))
-      return { count: 5, spacing: 71, size: 40, height: 40 };
+      return { count: 5, spacing: 71 };
     if (width <= parseInt(extendedTokens.breakpointMd))
-      return { count: 8, spacing: 87, size: 50, height: 50 };
+      return { count: 8, spacing: 87 };
     if (width <= parseInt(extendedTokens.breakpointLg))
-      return { count: 9, spacing: 100, size: 60, height: 60 };
+      return { count: 9, spacing: 100 };
     if (width <= parseInt(extendedTokens.breakpointXl))
-      return { count: 8, spacing: 115, size: 70, height: 70 };
+      return { count: 8, spacing: 115 };
     if (width <= parseInt(extendedTokens.breakpointXxl))
-      return { count: 8, spacing: 136, size: 90, height: 90 };
+      return { count: 8, spacing: 125 };
     if (width <= parseInt(extendedTokens.breakpointXxxl))
-      return { count: 8, spacing: 136, size: 90, height: 90 };
-    return { count: 11, spacing: 136, size: 100, height: 90 };
+      return { count: 9, spacing: 120 };
+    return { count: 13, spacing: 114 };
   };
   const circularConfig = getCircularConfig();
-  const RenderField = ({ label, value, icon }) => {
+  const RenderField = ({
+    label,
+    value,
+    icon
+  }) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -4140,12 +4390,18 @@ var CardTicketSearchSummary = ({
                     style: { height: "20px", width: "20px" }
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1Strong, { style: {
-                  display: "-webkit-box",
-                  WebkitLineClamp: 1,
-                  WebkitBoxOrient: "vertical",
-                  overflow: "hidden"
-                }, children: value })
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  reactComponents.Body1Strong,
+                  {
+                    style: {
+                      display: "-webkit-box",
+                      WebkitLineClamp: 1,
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden"
+                    },
+                    children: value
+                  }
+                )
               ]
             }
           )
@@ -4540,7 +4796,8 @@ var ModalSearchHarbor = ({
   onAddLastSearched,
   onRemoveLastSearched,
   onClearLastSearched,
-  popularHarbors
+  popularHarbors,
+  showButtonFavorite = true
 }) => {
   const styles = useStyles10();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
@@ -4694,7 +4951,7 @@ var ModalSearchHarbor = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
+              showButtonFavorite && /* @__PURE__ */ jsxRuntime.jsx(
                 react.Icon,
                 {
                   icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
@@ -5446,7 +5703,7 @@ var ModalTotalPassengers = ({
     const parts = [];
     passenger.classes.forEach((cls) => {
       if ((cls.count ?? 0) > 0) {
-        const displayName = cls.classCode?.toUpperCase();
+        const displayName = cls.className?.toUpperCase();
         parts.push(`${cls.count} ${displayName}`);
       }
     });
@@ -5570,7 +5827,7 @@ var ModalTotalPassengers = ({
                       {
                         className: styles.nestedRow,
                         children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: cls.classCode.toUpperCase() }),
+                          /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Body1, { children: (cls?.className || "")?.toUpperCase() }),
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.passengerCount, children: [
                             /* @__PURE__ */ jsxRuntime.jsx(
                               reactComponents.Button,
@@ -7658,7 +7915,7 @@ var CardOrdererInfo = ({
 var DEFAULT_LABELS21 = {
   id: {
     title: "Detail Penumpang",
-    sameAsOrderer: "Sama Dengan Pemesan",
+    // sameAsOrderer: 'Sama Dengan Pemesan',
     searchPlaceholder: "Cari Penumpang",
     addPassengerButton: "Tambah Penumpang",
     cancelButton: "Batal",
@@ -7672,7 +7929,7 @@ var DEFAULT_LABELS21 = {
   },
   en: {
     title: "Passenger Details",
-    sameAsOrderer: "Same as Orderer",
+    // sameAsOrderer: 'Same as Orderer',
     searchPlaceholder: "Search Passenger",
     addPassengerButton: "Add Passenger",
     cancelButton: "Cancel",
@@ -7736,9 +7993,9 @@ var ModalListPassenger = ({
   onSearchChange,
   onSelectPassenger,
   onEditPassenger,
-  onAddPassenger,
-  sameAsOrderer,
-  onSameAsOrdererChange
+  onAddPassenger
+  // sameAsOrderer,
+  // onSameAsOrdererChange,
 }) => {
   const styles = useStyles21();
   const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
@@ -7754,7 +8011,7 @@ var ModalListPassenger = ({
   const filteredPassengers = passengers.filter((passenger) => {
     if (!searchQuery) return true;
     const query = searchQuery.toLowerCase();
-    return passenger.name && passenger.name.toLowerCase().includes(query) || passenger.category && passenger.category.toLowerCase().includes(query);
+    return passenger.fullName && passenger.fullName.toLowerCase().includes(query) || passenger.ageLabel && passenger.ageLabel.toLowerCase().includes(query);
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactComponents.Dialog,
@@ -7769,14 +8026,6 @@ var ModalListPassenger = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           reactComponents.DialogTitle,
           {
-            action: /* @__PURE__ */ jsxRuntime.jsx(
-              reactComponents.Switch,
-              {
-                label: mergedLabels.sameAsOrderer,
-                checked: sameAsOrderer,
-                onChange: (_, data) => onSameAsOrdererChange(data.checked)
-              }
-            ),
             children: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Subtitle1, { children: displayTitle })
           }
         ),
@@ -7807,21 +8056,10 @@ var ModalListPassenger = ({
               },
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Subtitle2, { children: [
-                  passenger.name,
+                  passenger.fullName,
                   " (",
-                  (() => {
-                    const cat = passenger.category?.toUpperCase();
-                    if (cat === "ADULT")
-                      return mergedLabels.categories.adult;
-                    if (cat === "CHILD")
-                      return mergedLabels.categories.child;
-                    if (cat === "INFANT")
-                      return mergedLabels.categories.infant;
-                    if (cat === "ELDERLY")
-                      return mergedLabels.categories.elderly;
-                    return passenger.category;
-                  })(),
-                  ")"
+                  passenger.ageLabel,
+                  " )"
                 ] }) }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   reactComponents.Button,
@@ -7894,6 +8132,10 @@ var DEFAULT_LABELS22 = {
     countryLabel: "Negara Penerbit Passport",
     countryPlaceholder: "Masukkan Negara",
     autofill: "Isi Data Otomatis",
+    phoneNumberLabel: "Nomor Telepon",
+    phoneNumberPlaceholder: "Masukkan Nomor Telepon",
+    emailLabel: "Email",
+    emailPlaceholder: "Masukkan Email",
     // Scan Identity
     selectIdTypeTitle: "Isi Data Dengan Scan Identitas",
     scanIdentityTitle: "Scan Identitas",
@@ -7923,7 +8165,10 @@ var DEFAULT_LABELS22 = {
       maxAge: "Usia maksimal 150 tahun",
       requiredDate: "Tanggal lahir harus diisi",
       requiredCity: "Kota/Kabupaten harus diisi",
-      requiredCountry: "Negara harus diisi"
+      requiredCountry: "Negara harus diisi",
+      requiredPhoneNumber: "Nomor telepon harus diisi",
+      minLengthPhoneNumber: "Nomor telepon minimal 10 karakter",
+      invalidEmail: "Format email tidak valid"
     }
   },
   en: {
@@ -7950,6 +8195,10 @@ var DEFAULT_LABELS22 = {
     countryLabel: "Country of Issue",
     countryPlaceholder: "Enter Country",
     autofill: "Autofill",
+    phoneNumberLabel: "Phone Number",
+    phoneNumberPlaceholder: "Enter Phone Number",
+    emailLabel: "Email",
+    emailPlaceholder: "Enter Email",
     // Scan Identity
     selectIdTypeTitle: "Fill Data by Scanning Identity",
     scanIdentityTitle: "Scan Identity",
@@ -7979,7 +8228,10 @@ var DEFAULT_LABELS22 = {
       maxAge: "Age must be at most 150 years",
       requiredDate: "Date of birth is required",
       requiredCity: "City/Regency is required",
-      requiredCountry: "Country is required"
+      requiredCountry: "Country is required",
+      requiredPhoneNumber: "Phone number is required",
+      minLengthPhoneNumber: "Phone number must be at least 10 characters",
+      invalidEmail: "Invalid email format"
     }
   }
 };
@@ -8288,7 +8540,9 @@ var ModalPassengerForm = ({
     const performOCR = async () => {
       try {
         const Tesseract = await import('tesseract.js');
-        const { data: { text } } = await Tesseract.recognize(capturedImage, "ind");
+        const {
+          data: { text }
+        } = await Tesseract.recognize(capturedImage, "ind");
         if (isCancelled) return;
         setScanStep(1);
         await new Promise((resolve) => setTimeout(resolve, 500));
@@ -8340,7 +8594,14 @@ var ModalPassengerForm = ({
     return () => {
       isCancelled = true;
     };
-  }, [scanStatus, capturedImage, stopCamera, setValue, scannedIdType, onScanComplete]);
+  }, [
+    scanStatus,
+    capturedImage,
+    stopCamera,
+    setValue,
+    scannedIdType,
+    onScanComplete
+  ]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -9132,6 +9393,7 @@ var CardVehicleDetail = ({
   serviceTitle,
   serviceImage,
   control,
+  disabled,
   vehicleNumberName = "vehicleNumber",
   showLoadOption = false,
   hasLoad,
@@ -9175,6 +9437,7 @@ var CardVehicleDetail = ({
         InputDynamic_default,
         {
           control,
+          disabled,
           name: vehicleNumberName,
           placeholder: mergedLabels.vehicleNumberPlaceholder,
           type: "text"
@@ -9186,6 +9449,7 @@ var CardVehicleDetail = ({
       /* @__PURE__ */ jsxRuntime.jsxs(
         reactComponents.RadioGroup,
         {
+          disabled,
           value: hasLoad,
           onChange: (_, data) => onHasLoadChange?.(data.value),
           layout: "horizontal",
@@ -9353,6 +9617,7 @@ var CardVehicleOwnerForm = ({
   owners,
   hasLoad,
   control,
+  disabled,
   watch,
   setValue,
   getValues,
@@ -9362,8 +9627,16 @@ var CardVehicleOwnerForm = ({
   onAddCargo,
   onDeleteCargo,
   onUpdateCargoQuantity,
-  companyOptions = [],
-  cityOptions = [],
+  companySenderOptions = [],
+  companyOwnerOptions = [],
+  companyLogisticsOptions = [],
+  companyReceiverOptions = [],
+  cityOriginOptions = [],
+  cityDestinationOptions = [],
+  commodityOptions = [],
+  loadTypeOptions = [],
+  industryOptions = [],
+  loadCategoryOptions = [],
   language = "id",
   labels
 }) => {
@@ -9421,8 +9694,9 @@ var CardVehicleOwnerForm = ({
                           reactComponents.Button,
                           {
                             appearance: "transparent",
-                            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
                             "aria-label": mergedLabels.deleteOwnerAriaLabel,
+                            disabled,
+                            icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
                             onClick: (e) => {
                               e.stopPropagation();
                               onDeleteOwner(owner.id);
@@ -9450,6 +9724,7 @@ var CardVehicleOwnerForm = ({
                         children: /* @__PURE__ */ jsxRuntime.jsxs(
                           reactComponents.RadioGroup,
                           {
+                            disabled,
                             layout: "horizontal",
                             value: owner.senderType,
                             onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9479,11 +9754,12 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `owners.${index}.senderName`,
                         placeholder: owner.senderType === "Perusahaan" ? mergedLabels.selectCompanyPlaceholder : mergedLabels.inputSenderNamePlaceholder,
                         size: "large",
                         type: owner.senderType === "Perusahaan" ? "select" : "text",
-                        options: owner.senderType === "Perusahaan" ? companyOptions : []
+                        options: owner.senderType === "Perusahaan" ? companySenderOptions : []
                       }
                     )
                   ] }),
@@ -9498,6 +9774,7 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `owners.${index}.estimatedWeight`,
                         placeholder: mergedLabels.inputNumberPlaceholder,
                         size: "large",
@@ -9513,10 +9790,11 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `looseCargoOwners.${index}.originCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions,
+                        options: cityOriginOptions,
                         size: "large"
                       }
                     )
@@ -9527,10 +9805,11 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `looseCargoOwners.${index}.destinationCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions,
+                        options: cityDestinationOptions,
                         size: "large"
                       }
                     )
@@ -9555,6 +9834,7 @@ var CardVehicleOwnerForm = ({
                           children: /* @__PURE__ */ jsxRuntime.jsxs(
                             reactComponents.RadioGroup,
                             {
+                              disabled,
                               layout: "horizontal",
                               value: owner.cargoOwnerType || "Perusahaan",
                               onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9583,12 +9863,13 @@ var CardVehicleOwnerForm = ({
                       /* @__PURE__ */ jsxRuntime.jsx(
                         InputDynamic_default,
                         {
+                          disabled,
                           control,
                           name: `looseCargoOwners.${index}.cargoOwnerName`,
                           placeholder: owner.cargoOwnerType === "Perusahaan" ? mergedLabels.cargoOwnerCompanyPlaceholder : mergedLabels.cargoOwnerIndividualPlaceholder,
                           size: "large",
                           type: owner.cargoOwnerType === "Perusahaan" ? "select" : "text",
-                          options: owner.cargoOwnerType === "Perusahaan" ? companyOptions : []
+                          options: owner.cargoOwnerType === "Perusahaan" ? companyOwnerOptions : []
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -9619,6 +9900,7 @@ var CardVehicleOwnerForm = ({
                           children: /* @__PURE__ */ jsxRuntime.jsxs(
                             reactComponents.RadioGroup,
                             {
+                              disabled,
                               layout: "horizontal",
                               value: owner.logisticsCompanyType || "Perseorangan",
                               onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9648,11 +9930,12 @@ var CardVehicleOwnerForm = ({
                         InputDynamic_default,
                         {
                           control,
+                          disabled,
                           name: `looseCargoOwners.${index}.logisticsCompanyName`,
                           placeholder: owner.logisticsCompanyType === "Perusahaan" ? mergedLabels.logisticsCompanyPlaceholder : mergedLabels.logisticsIndividualPlaceholder,
                           size: "large",
                           type: owner.logisticsCompanyType === "Perusahaan" ? "select" : "text",
-                          options: owner.logisticsCompanyType === "Perusahaan" ? companyOptions : []
+                          options: owner.logisticsCompanyType === "Perusahaan" ? companyLogisticsOptions : []
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -9673,6 +9956,7 @@ var CardVehicleOwnerForm = ({
                       /* @__PURE__ */ jsxRuntime.jsxs(
                         reactComponents.RadioGroup,
                         {
+                          disabled,
                           layout: "horizontal",
                           value: owner.cargoReceiverType || "Perusahaan",
                           onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9700,11 +9984,12 @@ var CardVehicleOwnerForm = ({
                         InputDynamic_default,
                         {
                           control,
+                          disabled,
                           name: `looseCargoOwners.${index}.cargoReceiverName`,
                           placeholder: owner.cargoReceiverType === "Perusahaan" ? mergedLabels.cargoReceiverCompanyPlaceholder : mergedLabels.cargoReceiverIndividualPlaceholder,
                           size: "large",
                           type: owner.cargoReceiverType === "Perusahaan" ? "select" : "text",
-                          options: owner.cargoReceiverType === "Perusahaan" ? companyOptions : []
+                          options: owner.cargoReceiverType === "Perusahaan" ? companyReceiverOptions : []
                         }
                       ),
                       /* @__PURE__ */ jsxRuntime.jsx(
@@ -9729,6 +10014,7 @@ var CardVehicleOwnerForm = ({
                         InputDynamic_default,
                         {
                           control,
+                          disabled,
                           name: `looseCargoOwners.${index}.cargoWeight`,
                           placeholder: mergedLabels.inputNumberPlaceholder,
                           type: "number",
@@ -9787,10 +10073,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: commodityOptions,
                                         size: "large"
                                       }
                                     ),
@@ -9819,27 +10106,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoType`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [
-                                          {
-                                            value: "karung",
-                                            label: mergedLabels.cargoTypeOptions.karung
-                                          },
-                                          {
-                                            value: "kg",
-                                            label: mergedLabels.cargoTypeOptions.kg
-                                          },
-                                          {
-                                            value: "ton",
-                                            label: mergedLabels.cargoTypeOptions.ton
-                                          },
-                                          {
-                                            value: "unit",
-                                            label: mergedLabels.cargoTypeOptions.unit
-                                          }
-                                        ],
+                                        options: loadTypeOptions,
                                         size: "large"
                                       }
                                     ),
@@ -9883,6 +10154,7 @@ var CardVehicleOwnerForm = ({
                                                   reactComponents.Button,
                                                   {
                                                     appearance: "transparent",
+                                                    disabled,
                                                     icon: /* @__PURE__ */ jsxRuntime.jsx(
                                                       react.Icon,
                                                       {
@@ -9924,6 +10196,7 @@ var CardVehicleOwnerForm = ({
                                                   {
                                                     name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
                                                     control,
+                                                    disabled,
                                                     render: ({ field }) => /* @__PURE__ */ jsxRuntime.jsx(
                                                       "input",
                                                       {
@@ -9948,6 +10221,7 @@ var CardVehicleOwnerForm = ({
                                                   reactComponents.Button,
                                                   {
                                                     appearance: "transparent",
+                                                    disabled,
                                                     icon: /* @__PURE__ */ jsxRuntime.jsx(
                                                       react.Icon,
                                                       {
@@ -10021,9 +10295,9 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled: true,
                                         name: `owners.${index}.price`,
                                         placeholder: mergedLabels.pricePlaceholder,
-                                        disabled: true,
                                         size: "large",
                                         type: "text"
                                       }
@@ -10041,10 +10315,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: industryOptions,
                                         size: "large"
                                       }
                                     ),
@@ -10069,10 +10344,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: loadCategoryOptions,
                                         size: "large"
                                       }
                                     ),
@@ -10095,6 +10371,7 @@ var CardVehicleOwnerForm = ({
                                 /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(reactGridSystem.Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsxRuntime.jsx(
                                   reactComponents.Button,
                                   {
+                                    disabled,
                                     icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:delete-24-regular" }),
                                     onClick: (e) => {
                                       e.stopPropagation();
@@ -10292,16 +10569,17 @@ var useStyles26 = reactComponents.makeStyles({
 var CardBookingTicket = ({
   language = "id",
   labels,
-  shipName = "KMP PORTLINK",
-  shipType = "Water Taxi",
-  shipTypeColor = "success",
-  departureDay = "Kamis, 25 Sep",
-  departureTime = "18:15",
-  departureLocation = "Merak, Banten",
-  arrivalDay = "Jumat, 26 Sep",
-  arrivalTime = "19:25",
-  arrivalLocation = "Bakauheni, Lampung",
-  duration = "1 jam 10 menit",
+  providerLogo,
+  shipName,
+  shipType,
+  shipTypeColor,
+  departureDay,
+  departureTime,
+  departureLocation,
+  arrivalDay,
+  arrivalTime,
+  arrivalLocation,
+  duration = 0,
   totalPrice,
   reservationStep,
   paymentStep,
@@ -10320,7 +10598,7 @@ var CardBookingTicket = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             "img",
             {
-              src: "/assets/logo/asdp-default.svg",
+              src: providerLogo || "/assets/logo/asdp-default.svg",
               width: 81,
               height: 54,
               alt: "asdp"
@@ -10333,7 +10611,7 @@ var CardBookingTicket = ({
           {
             size: "extra-large",
             appearance: "filled",
-            color: shipTypeColor,
+            style: { backgroundColor: shipTypeColor },
             iconPosition: "before",
             shape: "rounded",
             icon: /* @__PURE__ */ jsxRuntime.jsx(react.Icon, { icon: "fluent:info-24-regular" }),
@@ -10357,7 +10635,7 @@ var CardBookingTicket = ({
           /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.Caption2, { children: [
             mergedLabels.estimationPrefix,
             " ",
-            duration
+            formatDuration(duration)
           ] })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles.ticketTime, children: [
@@ -10971,13 +11249,15 @@ var DEFAULT_LABELS29 = {
     addButton: "Tambah",
     currencySymbol: "Rp",
     decrementAriaLabel: "Kurangi jumlah",
-    incrementAriaLabel: "Tambah jumlah"
+    incrementAriaLabel: "Tambah jumlah",
+    searchPlaceholder: "Cari makanan atau minuman yang Anda inginkan"
   },
   en: {
     addButton: "Add",
     currencySymbol: "Rp",
     decrementAriaLabel: "Decrease quantity",
-    incrementAriaLabel: "Increase quantity"
+    incrementAriaLabel: "Increase quantity",
+    searchPlaceholder: "Search for food or drinks you want"
   }
 };
 var useStyles29 = reactComponents.makeStyles({
@@ -11107,6 +11387,9 @@ var useStyles29 = reactComponents.makeStyles({
     // tokensV2.lightModeColors.Brand_Stroke_1_Rest
     color: "rgb(30, 57, 141)"
     // tokensV2.lightModeColors.Brand_Foreground_1_Rest
+  },
+  searchContainer: {
+    width: "100%"
   }
 });
 var CardMealCatalog = ({
@@ -11117,7 +11400,9 @@ var CardMealCatalog = ({
   categories,
   onAdd,
   onUpdateQuantity,
-  className
+  className,
+  searchValue,
+  onSearchChange
 }) => {
   const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
@@ -11142,6 +11427,16 @@ var CardMealCatalog = ({
       /* @__PURE__ */ jsxRuntime.jsx(reactIcons.InfoRegular, {}),
       /* @__PURE__ */ jsxRuntime.jsx(reactComponents.Caption1, { children: disclaimerText })
     ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactComponents.Input,
+      {
+        contentBefore: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.SearchRegular, {}),
+        placeholder: mergedLabels.searchPlaceholder,
+        value: searchValue,
+        onChange: (_, data) => onSearchChange?.(data.value),
+        style: { width: "100%" }
+      }
+    ) }),
     categories.map((cat, index) => /* @__PURE__ */ jsxRuntime.jsxs("section", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         reactComponents.Title3,
@@ -12541,6 +12836,59 @@ var DEFAULT_LABELS38 = {
     requiredError: "is required"
   }
 };
+var useStyles39 = reactComponents.makeStyles({
+  surface: {
+    maxWidth: "90vw",
+    maxHeight: "90vh",
+    backgroundColor: "transparent",
+    boxShadow: "none"
+  },
+  closeButton: {
+    backgroundColor: reactComponents.tokens.colorNeutralForeground2,
+    color: reactComponents.tokens.colorNeutralBackground1
+  },
+  content: {
+    alignItems: "center",
+    textAlign: "center"
+  },
+  image: {
+    maxWidth: "100%",
+    maxHeight: "70vh",
+    objectFit: "contain"
+  }
+});
+var ModalPreviewImage = ({
+  open,
+  onOpenChange,
+  imageUrl,
+  alt = "Preview"
+}) => {
+  const styles = useStyles39();
+  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,
+      {
+        action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactComponents.Button,
+          {
+            appearance: "subtle",
+            "aria-label": "close",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}),
+            className: styles.closeButton
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogContent, { className: styles.content, children: imageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt,
+        className: styles.image
+      }
+    ) })
+  ] }) }) });
+};
 var uploadStyles = reactComponents.makeStyles({
   container: {
     backgroundColor: "#F0FEFF",
@@ -12814,56 +13162,7 @@ var FileUpload = React5__default.default.forwardRef(
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    reactComponents.Dialog,
-                    {
-                      open: isPreviewOpen,
-                      onOpenChange: (_, data) => setIsPreviewOpen(data.open),
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        reactComponents.DialogSurface,
-                        {
-                          style: {
-                            maxWidth: "90vw",
-                            maxHeight: "90vh",
-                            backgroundColor: "transparent",
-                            boxShadow: "none"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.DialogTitle,
-                              {
-                                action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                  reactComponents.Button,
-                                  {
-                                    "aria-label": "close",
-                                    icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}),
-                                    style: {
-                                      backgroundColor: reactComponents.tokens.colorNeutralForeground2,
-                                      color: reactComponents.tokens.colorNeutralBackground1
-                                    }
-                                  }
-                                ) })
-                              }
-                            ),
-                            /* @__PURE__ */ jsxRuntime.jsx(
-                              reactComponents.DialogContent,
-                              {
-                                style: { alignItems: "center", textAlign: "center" },
-                                children: previewUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                                  "img",
-                                  {
-                                    src: previewUrl,
-                                    alt: "Preview",
-                                    className: styles.dialogImage
-                                  }
-                                )
-                              }
-                            )
-                          ] })
-                        }
-                      )
-                    }
-                  )
+                  /* @__PURE__ */ jsxRuntime.jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
                 ]
               }
             );
@@ -13060,57 +13359,7 @@ var FileUpload = React5__default.default.forwardRef(
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  reactComponents.Dialog,
-                  {
-                    open: isPreviewOpen,
-                    onOpenChange: (_, data) => setIsPreviewOpen(data.open),
-                    children: /* @__PURE__ */ jsxRuntime.jsx(
-                      reactComponents.DialogSurface,
-                      {
-                        style: {
-                          maxWidth: "90vw",
-                          maxHeight: "90vh",
-                          backgroundColor: "transparent",
-                          boxShadow: "none"
-                        },
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(reactComponents.DialogBody, { children: [
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            reactComponents.DialogTitle,
-                            {
-                              action: /* @__PURE__ */ jsxRuntime.jsx(reactComponents.DialogTrigger, { action: "close", children: /* @__PURE__ */ jsxRuntime.jsx(
-                                reactComponents.Button,
-                                {
-                                  appearance: "subtle",
-                                  "aria-label": "close",
-                                  icon: /* @__PURE__ */ jsxRuntime.jsx(reactIcons.Dismiss24Regular, {}),
-                                  style: {
-                                    backgroundColor: reactComponents.tokens.colorNeutralForeground2,
-                                    color: reactComponents.tokens.colorNeutralBackground1
-                                  }
-                                }
-                              ) })
-                            }
-                          ),
-                          /* @__PURE__ */ jsxRuntime.jsx(
-                            reactComponents.DialogContent,
-                            {
-                              style: { alignItems: "center", textAlign: "center" },
-                              children: previewUrl && /* @__PURE__ */ jsxRuntime.jsx(
-                                "img",
-                                {
-                                  src: previewUrl,
-                                  alt: "Preview",
-                                  className: styles.dialogImage
-                                }
-                              )
-                            }
-                          )
-                        ] })
-                      }
-                    )
-                  }
-                )
+                /* @__PURE__ */ jsxRuntime.jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
               ]
             }
           );
@@ -13127,7 +13376,7 @@ var DEFAULT_LABELS39 = {
   id: {},
   en: {}
 };
-var useStyles39 = reactComponents.makeStyles({
+var useStyles40 = reactComponents.makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13167,12 +13416,14 @@ var useStyles39 = reactComponents.makeStyles({
       backgroundColor: reactComponents.tokens.colorBrandBackground2,
       color: reactComponents.tokens.colorBrandForeground1
     },
-    justifyContent: "flex-start"
+    justifyContent: "flex-start",
+    textAlign: "left"
   },
   tabItemLogout: {
     color: reactComponents.tokens.colorPaletteRedForeground1,
     backgroundColor: "transparent",
     justifyContent: "flex-start",
+    textAlign: "left",
     "&:hover": {
       color: reactComponents.tokens.colorPaletteRedForeground1
     }
@@ -13185,7 +13436,7 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles39();
+  const styles = useStyles40();
   ({ ...DEFAULT_LABELS39[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
@@ -13215,6 +13466,9 @@ var CardProfileMenu = ({
   ) });
 };
 
+exports.API_CONFIG = API_CONFIG;
+exports.API_ENDPOINTS = API_ENDPOINTS;
+exports.API_ERROR_MESSAGES = API_ERROR_MESSAGES;
 exports.BackgroundTicketCard = BackgroundTicketCard_default;
 exports.BackgroundTicketCardVertical = BackgroundTicketCardVertical_default;
 exports.COUNTRIES = COUNTRIES;
@@ -13253,13 +13507,18 @@ exports.DEFAULT_VEHICLE_ICONS = DEFAULT_VEHICLE_ICONS;
 exports.DateFilter = DateFilter;
 exports.DateFilterDefaultLabels = DEFAULT_LABELS17;
 exports.FileUpload = FileUpload_default;
+exports.GENDER = GENDER;
+exports.HTTP_STATUS = HTTP_STATUS;
+exports.IDENTITY_TYPE = IDENTITY_TYPE;
 exports.InputDynamic = InputDynamic_default;
+exports.LOAD_TYPE = LOAD_TYPE;
 exports.MODAL_PRESETS = MODAL_PRESETS;
 exports.ModalFilterTicket = ModalFilterTicket;
 exports.ModalFilterTicketDefaultLabels = DEFAULT_LABELS16;
 exports.ModalIllustration = ModalIllustration;
 exports.ModalListPassenger = ModalListPassenger;
 exports.ModalPassengerForm = ModalPassengerForm;
+exports.ModalPreviewImage = ModalPreviewImage;
 exports.ModalPriceDetail = ModalPriceDetail;
 exports.ModalSearchHarbor = ModalSearchHarbor;
 exports.ModalSearchTicket = ModalSearchTicket;
@@ -13267,6 +13526,7 @@ exports.ModalSelectDate = ModalSelectDate;
 exports.ModalService = ModalService;
 exports.ModalTotalPassengers = ModalTotalPassengers;
 exports.ModalTypeOfService = ModalTypeOfService;
+exports.PASSENGER_TYPE = PASSENGER_TYPE;
 exports.SortMenu = SortMenu;
 exports.Stepper = Stepper;
 exports.getBadgeConfig = getBadgeConfig;