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

package/dist/index.mjs

@@ -1,7 +1,7 @@
-import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Body1, Body1Strong, Caption1, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Switch, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Textarea, Link } from '@fluentui/react-components';
+import { makeStyles, tokens, createLightTheme, createDarkTheme, shorthands, Popover, PopoverTrigger, Input, PopoverSurface, Field, Caption1Strong, Caption2, Button, Body1, Body1Strong, Caption1, Dialog, DialogSurface, DialogBody, DialogTitle, DialogTrigger, DialogContent, Carousel, CarouselButton, CarouselViewport, mergeClasses, CarouselSlider, CarouselNav, CarouselNavButton, CarouselCard, Skeleton, SkeletonItem, Subtitle2, Card, Tooltip, Badge, Title2, Divider, Title3, Label, Text, Checkbox, MessageBar, MessageBarBody, Accordion, AccordionItem, AccordionHeader, AccordionPanel, RadioGroup, Radio, Menu, MenuTrigger, MenuPopover, MenuList, DialogActions, Caption2Strong, Subtitle1, Body1Stronger, Caption1Stronger, Display, Image, Title1, TabList, Tab, Body2, typographyStyles, Switch, Textarea, Link } from '@fluentui/react-components';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import React5, { forwardRef, useState, useRef, useEffect, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
-import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular } from '@fluentui/react-icons';
+import { Dismiss24Regular, DismissRegular, SubtractRegular, AddRegular, DeleteRegular, InfoRegular, SearchRegular } from '@fluentui/react-icons';
 import { Container, Row, Col, Visible } from 'react-grid-system';
 import { Icon } from '@iconify/react';
 import { Controller, useForm, useWatch } from 'react-hook-form';
@@ -335,6 +335,148 @@ 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 MY_TICKET_TAB = {
+  WAITING: 1,
+  ACTIVE: 2,
+  COMPLETED: 3,
+  FAILED: 4,
+  RETURNED: 5
+};
+var MY_TICKET_STATUS = {
+  DRAFT: 1,
+  NOT_YET_PAID: 2,
+  PAID: 3,
+  CHECKIN: 4,
+  BOARDING: 5,
+  NEED_ACTION: 6,
+  COMPLETED: 7,
+  EXPIRED_CHECKIN: 8,
+  EXPIRED_PAYMENT: 9,
+  EXPIRED_BOARDING: 10,
+  REFUND: 11
+};
 var useStyles2 = makeStyles({
   carousel: {},
   carouselContainer: {
@@ -924,6 +1066,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 = makeStyles({
   dividerContainer: {
     position: "relative",
@@ -961,12 +1112,12 @@ var useStyles5 = makeStyles({
   },
   circularLeft: {
     position: "absolute",
-    width: "100px",
-    height: "50px",
+    width: "80px",
+    height: "80px",
     borderRadius: "50%",
     backgroundColor: 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%",
@@ -1071,12 +1222,12 @@ var useStyles5 = makeStyles({
   },
   circularRight: {
     position: "absolute",
-    width: "100px",
-    height: "50px",
+    width: "80px",
+    height: "80px",
     borderRadius: "50%",
     backgroundColor: 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: tokens.borderRadiusXLarge,
@@ -1122,21 +1273,8 @@ var useStyles5 = 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,
@@ -1146,8 +1284,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__ */ jsxs(Row, { className: styles.ticketWrapper, children: [
@@ -1182,7 +1320,7 @@ var CardTicket = ({
                 children: /* @__PURE__ */ jsx(
                   Tooltip,
                   {
-                    content: tooltipCaption,
+                    content: departureItem?.provider?.description,
                     relationship: "label",
                     appearance: "inverted",
                     children: /* @__PURE__ */ jsx(
@@ -1190,11 +1328,11 @@ var CardTicket = ({
                       {
                         size: "large",
                         appearance: "filled",
-                        color: shipTypeColor,
+                        style: { backgroundColor: departureItem?.provider?.serviceColor },
                         iconPosition: "before",
                         shape: "rounded",
                         icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:info-24-regular" }),
-                        children: shipType
+                        children: departureItem?.provider?.service
                       }
                     )
                   }
@@ -1219,7 +1357,7 @@ var CardTicket = ({
                 children: /* @__PURE__ */ jsx(
                   "img",
                   {
-                    src: "/assets/logo/asdp-default.svg",
+                    src: departureItem?.provider?.logo,
                     className: styles.asdpLogo,
                     alt: mergedLabels.logoAlt,
                     height: 56,
@@ -1248,17 +1386,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__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
                     children: [
                       mergedLabels.availableSeatsLabel,
                       " ",
-                      availableSeats
+                      departureItem?.availableTicket
                     ]
                   }
                 )
@@ -1275,7 +1413,7 @@ var CardTicket = ({
                 xl: 12,
                 xxl: 12,
                 xxxl: 12,
-                children: /* @__PURE__ */ jsx(Subtitle2, { children: shipName })
+                children: /* @__PURE__ */ jsx(Subtitle2, { children: departureItem?.provider?.name })
               }
             )
           ] }),
@@ -1315,46 +1453,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__ */ jsx(Icon, { icon: "fluent:ticket-diagonal-24-regular" }),
               children: [
                 mergedLabels.availableSeatsLabel,
                 " ",
-                availableSeats
+                departureItem?.availableTicket
               ]
             }
           ) }),
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("div", { className: styles.ticketInfo, children: [
             /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-              /* @__PURE__ */ jsx(Caption1, { children: departureDay }),
-              /* @__PURE__ */ jsxs(Title2, { children: [
-                departureTime,
-                " ",
-                mergedLabels.timezoneLabel
-              ] }),
-              /* @__PURE__ */ jsx(Caption1, { children: departureLocation })
+              /* @__PURE__ */ jsx(Caption1, { children: "KAMIS" }),
+              /* @__PURE__ */ jsx(Title2, { children: departureItem?.departureTime }),
+              /* @__PURE__ */ jsx(Caption1, { children: routeItem?.portFrom + ", " + routeItem?.branchFrom })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: styles.ticketDuration, children: [
               /* @__PURE__ */ jsxs(Caption2, { children: [
                 mergedLabels.estimationPrefix,
                 " ",
-                duration
+                formatDuration(departureItem?.estimatedSailingMinute)
               ] }),
               /* @__PURE__ */ jsx("div", { className: styles.dividerContainer, children: /* @__PURE__ */ jsx(Divider, { children: /* @__PURE__ */ jsx(Icon, { icon: "fluent:vehicle-ship-24-regular", height: 24 }) }) })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
-              /* @__PURE__ */ jsx(Caption1, { children: arrivalDay }),
+              /* @__PURE__ */ jsx(Caption1, { children: "KAMIS" }),
               /* @__PURE__ */ jsxs(Title2, { children: [
-                arrivalTime,
+                departureItem?.arrivedTime,
                 " ",
                 mergedLabels.timezoneLabel
               ] }),
-              /* @__PURE__ */ jsx(Caption1, { children: arrivalLocation })
+              /* @__PURE__ */ jsx(Caption1, { children: routeItem?.portTo + ", " + routeItem?.branchTo })
             ] })
           ] }) }),
           /* @__PURE__ */ jsxs("div", { className: styles.ticketButtons, children: [
@@ -1370,7 +1504,7 @@ var CardTicket = ({
                 },
                 icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:money-24-regular" }),
                 size: "medium",
-                onClick: onPriceDetailClick,
+                onClick: () => onPriceDetailClick(departureItem?.billingDetail, departureItem?.provider),
                 children: mergedLabels.priceDetailsButton
               }
             ),
@@ -1428,9 +1562,7 @@ var CardTicket = ({
                       children: [
                         mergedLabels.currencySymbol,
                         "\xA0",
-                        totalPrice.toLocaleString(
-                          language === "id" ? "id-ID" : "en-US"
-                        )
+                        departureItem?.billingDetail?.total?.formatted
                       ]
                     }
                   )
@@ -1452,7 +1584,7 @@ var CardTicket = ({
           ] }),
           /* @__PURE__ */ jsxs("div", { className: styles.facilitiesSection, children: [
             /* @__PURE__ */ jsx(Subtitle2, { children: mergedLabels.facilitiesLabel }),
-            /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
+            /* @__PURE__ */ jsx("div", { className: styles.facilitiesList, children: departureItem?.provider?.facilities.map((facility, idx) => /* @__PURE__ */ jsxs("div", { className: styles.facilityItem, children: [
               /* @__PURE__ */ jsx(Icon, { icon: "fluent:checkmark-circle-24-filled" }),
               /* @__PURE__ */ jsx(Caption1Strong, { children: facility })
             ] }, idx)) })
@@ -1790,6 +1922,12 @@ var useStyles6 = makeStyles({
     fontSize: tokens.fontSizeBase200,
     fontWeight: tokens.fontWeightRegular,
     color: 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: tokens.fontSizeBase100,
@@ -1831,10 +1969,23 @@ var CardServiceMenu = ({
           onClick: () => onServiceClick?.(item.id),
           "aria-label": item.name,
           children: [
-            /* @__PURE__ */ jsx("img", { src: item.imageUrl, alt: item.name, className: styles.logo }),
+            /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: item.imageUrl,
+                alt: item.name,
+                className: styles.logo
+              }
+            ),
             /* @__PURE__ */ jsxs("div", { className: styles.textContent, children: [
               /* @__PURE__ */ jsx("span", { className: styles.label, children: item.name }),
-              showDescriptions && /* @__PURE__ */ jsx("span", { className: styles.description, children: item.description })
+              showDescriptions && /* @__PURE__ */ jsx(
+                MenuItemDescription,
+                {
+                  description: item.description,
+                  className: styles.description
+                }
+              )
             ] })
           ]
         }
@@ -1846,6 +1997,40 @@ var CardServiceMenu = ({
     ] }, item.id);
   }) }) });
 };
+function useIsClamped(deps) {
+  const ref = useRef(null);
+  const [isClamped, setIsClamped] = useState(false);
+  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__ */ jsx(
+      Tooltip,
+      {
+        appearance: "inverted",
+        content: description,
+        relationship: "label",
+        positioning: "after",
+        children: /* @__PURE__ */ jsx("span", { ref, className, children: description })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("span", { ref, className, children: description });
+};
 var DatePickerInput = forwardRef(
   ({
     field,
@@ -2138,6 +2323,7 @@ var useStyles7 = makeStyles({
       border: `1px solid ${tokens.colorNeutralStroke1}`,
       borderRadius: tokens.borderRadiusMedium,
       padding: tokens.spacingVerticalS,
+      borderBottom: `1px solid ${tokens.colorNeutralForeground3}`,
       paddingLeft: "48px",
       // fontSize: tokens.fontSizeBase300,
       fontFamily: tokens.fontFamilyBase,
@@ -2151,10 +2337,11 @@ var useStyles7 = makeStyles({
       // fontSize: tokens.fontSizeBase400,
     },
     "& .react-tel-input .form-control:hover": {
-      border: `1px solid ${tokens.colorNeutralStroke1Hover}`
+      border: `1px solid ${tokens.colorNeutralStroke1Hover}`,
+      borderBottom: `1px solid ${tokens.colorNeutralForeground3Hover}`
     },
     "& .react-tel-input .form-control:focus": {
-      borderBottom: `2px solid ${tokens.colorBrandStroke1}`
+      borderBottom: `2px solid ${tokens.colorBrandStroke1} !important`
       // boxShadow: `0 0 0 1px ${tokens.colorBrandStroke1}`,
     },
     "& .react-tel-input .form-control:disabled": {
@@ -2179,6 +2366,77 @@ var useStyles7 = makeStyles({
       backgroundColor: "transparent"
     }
   },
+  // Appearance: underline
+  phoneInputUnderline: {
+    "& .react-tel-input .form-control": {
+      border: "none",
+      borderBottom: `1px solid ${tokens.colorNeutralForeground3}`,
+      borderRadius: 0,
+      backgroundColor: "transparent",
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid ${tokens.colorNeutralForeground3Hover}`
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${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: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,
+      backgroundColor: tokens.colorNeutralBackground3,
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      backgroundColor: tokens.colorNeutralBackground3Hover
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${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: `${tokens.borderRadiusMedium} ${tokens.borderRadiusMedium} 0 0`,
+      backgroundColor: tokens.colorNeutralBackground1,
+      paddingLeft: "48px"
+    },
+    "& .react-tel-input .form-control:hover": {
+      border: "none",
+      borderBottom: `1px solid transparent`,
+      backgroundColor: tokens.colorNeutralBackground1Hover
+    },
+    "& .react-tel-input .form-control:focus": {
+      border: "none",
+      borderBottom: `2px solid ${tokens.colorBrandStroke1}`,
+      boxShadow: "none"
+    },
+    "& .react-tel-input .flag-dropdown": {
+      border: "none",
+      backgroundColor: "transparent"
+    }
+  },
   phoneInputError: {
     "& .react-tel-input .form-control": {
       border: `2px solid ${tokens.colorPaletteRedBorder2}`
@@ -2501,6 +2759,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);
@@ -2528,6 +2793,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" ? tokens.fontSizeBase200 : size === "medium" ? tokens.fontSizeBase300 : tokens.fontSizeBase400;
+    const phoneInputSizeStyle = {
+      fontSize: fontSizeValuePhoneInput,
+      ...size === "small" && { minHeight: "26px", height: "26px", padding: `0 ${tokens.spacingHorizontalS} 0 48px` },
+      ...size === "medium" && { minHeight: "34px", height: "34px", padding: `${tokens.spacingVerticalXXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXXS} 48px` },
+      ...size === "large" && { minHeight: "40px", height: "40px", padding: `${tokens.spacingVerticalXS} ${tokens.spacingHorizontalS} ${tokens.spacingVerticalXS} 48px` }
+    };
     if (type === "emailOrPhone") {
       updateEmailOrPhoneType(field.value);
       const stringValue = typeof field.value === "string" ? field.value : "";
@@ -2563,13 +2834,11 @@ var InputDynamic = ({
         "div",
         {
           ref: emailOrPhoneInputRef,
-          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          className: mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
           children: /* @__PURE__ */ jsx(
             PhoneInput,
             {
-              inputStyle: {
-                fontSize: fontSizeValuePhoneInput
-              },
+              inputStyle: phoneInputSizeStyle,
               country: defaultCountry.toLowerCase(),
               value: stringValue.startsWith("+") ? stringValue.substring(1) : stringValue,
               onChange: (value, data) => {
@@ -2668,7 +2937,7 @@ var InputDynamic = ({
         "div",
         {
           ref: phoneInputRef,
-          className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+          className: mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
           children: /* @__PURE__ */ jsx(
             PhoneInput,
             {
@@ -2710,9 +2979,7 @@ var InputDynamic = ({
               disabled,
               enableSearch: true,
               disableSearchIcon: true,
-              inputStyle: {
-                fontSize: fontSizeValuePhoneInput
-              }
+              inputStyle: phoneInputSizeStyle
             }
           )
         }
@@ -2795,7 +3062,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: mergeClasses(styles.reactSelect, classNameSize),
             classNamePrefix: "react-select",
@@ -2819,7 +3086,7 @@ var InputDynamic = ({
               {
                 style: { display: "flex", alignItems: "center", gap: "8px" },
                 children: [
-                  /* @__PURE__ */ jsx(Icon, { icon: option.flag, width: 20, height: 20 }),
+                  options && options.length > 0 ? option.flag ? option.flag.startsWith("http") ? /* @__PURE__ */ jsx("img", { alt: option.label, src: option.flag, height: 20, width: 20, style: { objectFit: "contain" } }) : /* @__PURE__ */ jsx(Icon, { icon: option.flag, width: 20, height: 20 }) : null : option.flag ? /* @__PURE__ */ jsx(Icon, { icon: option.flag, width: 20, height: 20 }) : null,
                   /* @__PURE__ */ jsx("span", { children: option.label })
                 ]
               }
@@ -2841,7 +3108,7 @@ var InputDynamic = ({
         return /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles.phoneInputWrapper} ${error ? styles.phoneInputError : ""}`,
+            className: mergeClasses(styles.phoneInputWrapper, phoneAppearanceClass, error ? styles.phoneInputError : ""),
             children: /* @__PURE__ */ jsx(
               PhoneInput,
               {
@@ -2855,9 +3122,7 @@ var InputDynamic = ({
                 disabled,
                 enableSearch: true,
                 disableSearchIcon: true,
-                inputStyle: {
-                  fontSize: fontSizeValuePhoneInput
-                }
+                inputStyle: phoneInputSizeStyle
               }
             )
           }
@@ -4061,9 +4326,10 @@ var useStyles9 = 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: tokens.colorNeutralBackground1Hover,
     bottom: "-10px",
     boxShadow: "inset 0 2px 0px rgba(0, 0, 0, 0.1)"
@@ -4087,23 +4353,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__ */ jsxs(
       "div",
       {
@@ -4131,12 +4401,18 @@ var CardTicketSearchSummary = ({
                     style: { height: "20px", width: "20px" }
                   }
                 ),
-                /* @__PURE__ */ jsx(Body1Strong, { style: {
-                  display: "-webkit-box",
-                  WebkitLineClamp: 1,
-                  WebkitBoxOrient: "vertical",
-                  overflow: "hidden"
-                }, children: value })
+                /* @__PURE__ */ jsx(
+                  Body1Strong,
+                  {
+                    style: {
+                      display: "-webkit-box",
+                      WebkitLineClamp: 1,
+                      WebkitBoxOrient: "vertical",
+                      overflow: "hidden"
+                    },
+                    children: value
+                  }
+                )
               ]
             }
           )
@@ -4531,7 +4807,8 @@ var ModalSearchHarbor = ({
   onAddLastSearched,
   onRemoveLastSearched,
   onClearLastSearched,
-  popularHarbors
+  popularHarbors,
+  showButtonFavorite = true
 }) => {
   const styles = useStyles10();
   const mergedLabels = { ...DEFAULT_LABELS10[language], ...labels };
@@ -4685,7 +4962,7 @@ var ModalSearchHarbor = ({
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx(
+              showButtonFavorite && /* @__PURE__ */ jsx(
                 Icon,
                 {
                   icon: harbor.isFavorite ? "fluent:star-24-filled" : "fluent:star-24-regular",
@@ -5437,7 +5714,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}`);
       }
     });
@@ -5561,7 +5838,7 @@ var ModalTotalPassengers = ({
                       {
                         className: styles.nestedRow,
                         children: [
-                          /* @__PURE__ */ jsx(Body1, { children: cls.classCode.toUpperCase() }),
+                          /* @__PURE__ */ jsx(Body1, { children: (cls?.className || "")?.toUpperCase() }),
                           /* @__PURE__ */ jsxs("div", { className: styles.passengerCount, children: [
                             /* @__PURE__ */ jsx(
                               Button,
@@ -7649,7 +7926,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",
@@ -7663,7 +7940,7 @@ var DEFAULT_LABELS21 = {
   },
   en: {
     title: "Passenger Details",
-    sameAsOrderer: "Same as Orderer",
+    // sameAsOrderer: 'Same as Orderer',
     searchPlaceholder: "Search Passenger",
     addPassengerButton: "Add Passenger",
     cancelButton: "Cancel",
@@ -7727,9 +8004,9 @@ var ModalListPassenger = ({
   onSearchChange,
   onSelectPassenger,
   onEditPassenger,
-  onAddPassenger,
-  sameAsOrderer,
-  onSameAsOrdererChange
+  onAddPassenger
+  // sameAsOrderer,
+  // onSameAsOrdererChange,
 }) => {
   const styles = useStyles21();
   const mergedLabels = { ...DEFAULT_LABELS21[language], ...labels };
@@ -7745,7 +8022,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__ */ jsx(
     Dialog,
@@ -7760,14 +8037,6 @@ var ModalListPassenger = ({
         /* @__PURE__ */ jsx(
           DialogTitle,
           {
-            action: /* @__PURE__ */ jsx(
-              Switch,
-              {
-                label: mergedLabels.sameAsOrderer,
-                checked: sameAsOrderer,
-                onChange: (_, data) => onSameAsOrdererChange(data.checked)
-              }
-            ),
             children: /* @__PURE__ */ jsx(Subtitle1, { children: displayTitle })
           }
         ),
@@ -7798,21 +8067,10 @@ var ModalListPassenger = ({
               },
               children: [
                 /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs(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__ */ jsx(
                   Button,
@@ -7885,6 +8143,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",
@@ -7914,7 +8176,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: {
@@ -7941,6 +8206,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",
@@ -7970,7 +8239,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"
     }
   }
 };
@@ -8279,7 +8551,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));
@@ -8331,7 +8605,14 @@ var ModalPassengerForm = ({
     return () => {
       isCancelled = true;
     };
-  }, [scanStatus, capturedImage, stopCamera, setValue, scannedIdType, onScanComplete]);
+  }, [
+    scanStatus,
+    capturedImage,
+    stopCamera,
+    setValue,
+    scannedIdType,
+    onScanComplete
+  ]);
   const handleFormSubmit = (data) => {
     onSubmit(data);
     reset();
@@ -9123,6 +9404,7 @@ var CardVehicleDetail = ({
   serviceTitle,
   serviceImage,
   control,
+  disabled,
   vehicleNumberName = "vehicleNumber",
   showLoadOption = false,
   hasLoad,
@@ -9166,6 +9448,7 @@ var CardVehicleDetail = ({
         InputDynamic_default,
         {
           control,
+          disabled,
           name: vehicleNumberName,
           placeholder: mergedLabels.vehicleNumberPlaceholder,
           type: "text"
@@ -9177,6 +9460,7 @@ var CardVehicleDetail = ({
       /* @__PURE__ */ jsxs(
         RadioGroup,
         {
+          disabled,
           value: hasLoad,
           onChange: (_, data) => onHasLoadChange?.(data.value),
           layout: "horizontal",
@@ -9344,6 +9628,7 @@ var CardVehicleOwnerForm = ({
   owners,
   hasLoad,
   control,
+  disabled,
   watch,
   setValue,
   getValues,
@@ -9353,8 +9638,16 @@ var CardVehicleOwnerForm = ({
   onAddCargo,
   onDeleteCargo,
   onUpdateCargoQuantity,
-  companyOptions = [],
-  cityOptions = [],
+  companySenderOptions = [],
+  companyOwnerOptions = [],
+  companyLogisticsOptions = [],
+  companyReceiverOptions = [],
+  cityOriginOptions = [],
+  cityDestinationOptions = [],
+  commodityOptions = [],
+  loadTypeOptions = [],
+  industryOptions = [],
+  loadCategoryOptions = [],
   language = "id",
   labels
 }) => {
@@ -9412,8 +9705,9 @@ var CardVehicleOwnerForm = ({
                           Button,
                           {
                             appearance: "transparent",
-                            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
                             "aria-label": mergedLabels.deleteOwnerAriaLabel,
+                            disabled,
+                            icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
                             onClick: (e) => {
                               e.stopPropagation();
                               onDeleteOwner(owner.id);
@@ -9441,6 +9735,7 @@ var CardVehicleOwnerForm = ({
                         children: /* @__PURE__ */ jsxs(
                           RadioGroup,
                           {
+                            disabled,
                             layout: "horizontal",
                             value: owner.senderType,
                             onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9470,11 +9765,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 : []
                       }
                     )
                   ] }),
@@ -9489,6 +9785,7 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `owners.${index}.estimatedWeight`,
                         placeholder: mergedLabels.inputNumberPlaceholder,
                         size: "large",
@@ -9504,10 +9801,11 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `looseCargoOwners.${index}.originCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions,
+                        options: cityOriginOptions,
                         size: "large"
                       }
                     )
@@ -9518,10 +9816,11 @@ var CardVehicleOwnerForm = ({
                       InputDynamic_default,
                       {
                         control,
+                        disabled,
                         name: `looseCargoOwners.${index}.destinationCity`,
                         placeholder: mergedLabels.selectPlaceholder,
                         type: "select",
-                        options: cityOptions,
+                        options: cityDestinationOptions,
                         size: "large"
                       }
                     )
@@ -9546,6 +9845,7 @@ var CardVehicleOwnerForm = ({
                           children: /* @__PURE__ */ jsxs(
                             RadioGroup,
                             {
+                              disabled,
                               layout: "horizontal",
                               value: owner.cargoOwnerType || "Perusahaan",
                               onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9574,12 +9874,13 @@ var CardVehicleOwnerForm = ({
                       /* @__PURE__ */ 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__ */ jsx(
@@ -9610,6 +9911,7 @@ var CardVehicleOwnerForm = ({
                           children: /* @__PURE__ */ jsxs(
                             RadioGroup,
                             {
+                              disabled,
                               layout: "horizontal",
                               value: owner.logisticsCompanyType || "Perseorangan",
                               onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9639,11 +9941,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__ */ jsx(
@@ -9664,6 +9967,7 @@ var CardVehicleOwnerForm = ({
                       /* @__PURE__ */ jsxs(
                         RadioGroup,
                         {
+                          disabled,
                           layout: "horizontal",
                           value: owner.cargoReceiverType || "Perusahaan",
                           onChange: (_, data) => onUpdateOwner(owner.id, {
@@ -9691,11 +9995,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__ */ jsx(
@@ -9720,6 +10025,7 @@ var CardVehicleOwnerForm = ({
                         InputDynamic_default,
                         {
                           control,
+                          disabled,
                           name: `looseCargoOwners.${index}.cargoWeight`,
                           placeholder: mergedLabels.inputNumberPlaceholder,
                           type: "number",
@@ -9778,10 +10084,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.commodity`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: commodityOptions,
                                         size: "large"
                                       }
                                     ),
@@ -9810,27 +10117,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"
                                       }
                                     ),
@@ -9874,6 +10165,7 @@ var CardVehicleOwnerForm = ({
                                                   Button,
                                                   {
                                                     appearance: "transparent",
+                                                    disabled,
                                                     icon: /* @__PURE__ */ jsx(
                                                       Icon,
                                                       {
@@ -9915,6 +10207,7 @@ var CardVehicleOwnerForm = ({
                                                   {
                                                     name: `looseCargoOwners.${index}.cargo.${cargoIndex}.quantity`,
                                                     control,
+                                                    disabled,
                                                     render: ({ field }) => /* @__PURE__ */ jsx(
                                                       "input",
                                                       {
@@ -9939,6 +10232,7 @@ var CardVehicleOwnerForm = ({
                                                   Button,
                                                   {
                                                     appearance: "transparent",
+                                                    disabled,
                                                     icon: /* @__PURE__ */ jsx(
                                                       Icon,
                                                       {
@@ -10012,9 +10306,9 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled: true,
                                         name: `owners.${index}.price`,
                                         placeholder: mergedLabels.pricePlaceholder,
-                                        disabled: true,
                                         size: "large",
                                         type: "text"
                                       }
@@ -10032,10 +10326,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.industryType`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: industryOptions,
                                         size: "large"
                                       }
                                     ),
@@ -10060,10 +10355,11 @@ var CardVehicleOwnerForm = ({
                                       InputDynamic_default,
                                       {
                                         control,
+                                        disabled,
                                         name: `looseCargoOwners.${index}.cargo.${cargoIndex}.cargoCategory`,
                                         placeholder: mergedLabels.selectPlaceholder,
                                         type: "select",
-                                        options: [],
+                                        options: loadCategoryOptions,
                                         size: "large"
                                       }
                                     ),
@@ -10086,6 +10382,7 @@ var CardVehicleOwnerForm = ({
                                 /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { children: (owner.cargoItems?.length || 0) > 1 && /* @__PURE__ */ jsx(
                                   Button,
                                   {
+                                    disabled,
                                     icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:delete-24-regular" }),
                                     onClick: (e) => {
                                       e.stopPropagation();
@@ -10283,16 +10580,17 @@ var useStyles26 = 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,
@@ -10311,7 +10609,7 @@ var CardBookingTicket = ({
           /* @__PURE__ */ jsx(
             "img",
             {
-              src: "/assets/logo/asdp-default.svg",
+              src: providerLogo || "/assets/logo/asdp-default.svg",
               width: 81,
               height: 54,
               alt: "asdp"
@@ -10324,7 +10622,7 @@ var CardBookingTicket = ({
           {
             size: "extra-large",
             appearance: "filled",
-            color: shipTypeColor,
+            style: { backgroundColor: shipTypeColor },
             iconPosition: "before",
             shape: "rounded",
             icon: /* @__PURE__ */ jsx(Icon, { icon: "fluent:info-24-regular" }),
@@ -10348,7 +10646,7 @@ var CardBookingTicket = ({
           /* @__PURE__ */ jsxs(Caption2, { children: [
             mergedLabels.estimationPrefix,
             " ",
-            duration
+            formatDuration(duration)
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: styles.ticketTime, children: [
@@ -10962,13 +11260,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 = makeStyles({
@@ -11098,6 +11398,9 @@ var useStyles29 = makeStyles({
     // tokensV2.lightModeColors.Brand_Stroke_1_Rest
     color: "rgb(30, 57, 141)"
     // tokensV2.lightModeColors.Brand_Foreground_1_Rest
+  },
+  searchContainer: {
+    width: "100%"
   }
 });
 var CardMealCatalog = ({
@@ -11108,7 +11411,9 @@ var CardMealCatalog = ({
   categories,
   onAdd,
   onUpdateQuantity,
-  className
+  className,
+  searchValue,
+  onSearchChange
 }) => {
   const styles = useStyles29();
   const mergedLabels = { ...DEFAULT_LABELS29[language], ...labels };
@@ -11133,6 +11438,16 @@ var CardMealCatalog = ({
       /* @__PURE__ */ jsx(InfoRegular, {}),
       /* @__PURE__ */ jsx(Caption1, { children: disclaimerText })
     ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.searchContainer, children: /* @__PURE__ */ jsx(
+      Input,
+      {
+        contentBefore: /* @__PURE__ */ jsx(SearchRegular, {}),
+        placeholder: mergedLabels.searchPlaceholder,
+        value: searchValue,
+        onChange: (_, data) => onSearchChange?.(data.value),
+        style: { width: "100%" }
+      }
+    ) }),
     categories.map((cat, index) => /* @__PURE__ */ jsxs("section", { children: [
       /* @__PURE__ */ jsx(
         Title3,
@@ -12532,6 +12847,59 @@ var DEFAULT_LABELS38 = {
     requiredError: "is required"
   }
 };
+var useStyles39 = makeStyles({
+  surface: {
+    maxWidth: "90vw",
+    maxHeight: "90vh",
+    backgroundColor: "transparent",
+    boxShadow: "none"
+  },
+  closeButton: {
+    backgroundColor: tokens.colorNeutralForeground2,
+    color: 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__ */ jsx(Dialog, { open, onOpenChange: (_, data) => onOpenChange(data.open), children: /* @__PURE__ */ jsx(DialogSurface, { className: styles.surface, children: /* @__PURE__ */ jsxs(DialogBody, { children: [
+    /* @__PURE__ */ jsx(
+      DialogTitle,
+      {
+        action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            appearance: "subtle",
+            "aria-label": "close",
+            icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
+            className: styles.closeButton
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(DialogContent, { className: styles.content, children: imageUrl && /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: imageUrl,
+        alt,
+        className: styles.image
+      }
+    ) })
+  ] }) }) });
+};
 var uploadStyles = makeStyles({
   container: {
     backgroundColor: "#F0FEFF",
@@ -12805,56 +13173,7 @@ var FileUpload = React5.forwardRef(
                       ] })
                     }
                   ),
-                  /* @__PURE__ */ jsx(
-                    Dialog,
-                    {
-                      open: isPreviewOpen,
-                      onOpenChange: (_, data) => setIsPreviewOpen(data.open),
-                      children: /* @__PURE__ */ jsx(
-                        DialogSurface,
-                        {
-                          style: {
-                            maxWidth: "90vw",
-                            maxHeight: "90vh",
-                            backgroundColor: "transparent",
-                            boxShadow: "none"
-                          },
-                          children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-                            /* @__PURE__ */ jsx(
-                              DialogTitle,
-                              {
-                                action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
-                                  Button,
-                                  {
-                                    "aria-label": "close",
-                                    icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
-                                    style: {
-                                      backgroundColor: tokens.colorNeutralForeground2,
-                                      color: tokens.colorNeutralBackground1
-                                    }
-                                  }
-                                ) })
-                              }
-                            ),
-                            /* @__PURE__ */ jsx(
-                              DialogContent,
-                              {
-                                style: { alignItems: "center", textAlign: "center" },
-                                children: previewUrl && /* @__PURE__ */ jsx(
-                                  "img",
-                                  {
-                                    src: previewUrl,
-                                    alt: "Preview",
-                                    className: styles.dialogImage
-                                  }
-                                )
-                              }
-                            )
-                          ] })
-                        }
-                      )
-                    }
-                  )
+                  /* @__PURE__ */ jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
                 ]
               }
             );
@@ -13051,57 +13370,7 @@ var FileUpload = React5.forwardRef(
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx(
-                  Dialog,
-                  {
-                    open: isPreviewOpen,
-                    onOpenChange: (_, data) => setIsPreviewOpen(data.open),
-                    children: /* @__PURE__ */ jsx(
-                      DialogSurface,
-                      {
-                        style: {
-                          maxWidth: "90vw",
-                          maxHeight: "90vh",
-                          backgroundColor: "transparent",
-                          boxShadow: "none"
-                        },
-                        children: /* @__PURE__ */ jsxs(DialogBody, { children: [
-                          /* @__PURE__ */ jsx(
-                            DialogTitle,
-                            {
-                              action: /* @__PURE__ */ jsx(DialogTrigger, { action: "close", children: /* @__PURE__ */ jsx(
-                                Button,
-                                {
-                                  appearance: "subtle",
-                                  "aria-label": "close",
-                                  icon: /* @__PURE__ */ jsx(Dismiss24Regular, {}),
-                                  style: {
-                                    backgroundColor: tokens.colorNeutralForeground2,
-                                    color: tokens.colorNeutralBackground1
-                                  }
-                                }
-                              ) })
-                            }
-                          ),
-                          /* @__PURE__ */ jsx(
-                            DialogContent,
-                            {
-                              style: { alignItems: "center", textAlign: "center" },
-                              children: previewUrl && /* @__PURE__ */ jsx(
-                                "img",
-                                {
-                                  src: previewUrl,
-                                  alt: "Preview",
-                                  className: styles.dialogImage
-                                }
-                              )
-                            }
-                          )
-                        ] })
-                      }
-                    )
-                  }
-                )
+                /* @__PURE__ */ jsx(ModalPreviewImage, { imageUrl: previewUrl, open: isPreviewOpen, onOpenChange: setIsPreviewOpen })
               ]
             }
           );
@@ -13118,7 +13387,7 @@ var DEFAULT_LABELS39 = {
   id: {},
   en: {}
 };
-var useStyles39 = makeStyles({
+var useStyles40 = makeStyles({
   container: {
     display: "flex",
     flexDirection: "column",
@@ -13158,12 +13427,14 @@ var useStyles39 = makeStyles({
       backgroundColor: tokens.colorBrandBackground2,
       color: tokens.colorBrandForeground1
     },
-    justifyContent: "flex-start"
+    justifyContent: "flex-start",
+    textAlign: "left"
   },
   tabItemLogout: {
     color: tokens.colorPaletteRedForeground1,
     backgroundColor: "transparent",
     justifyContent: "flex-start",
+    textAlign: "left",
     "&:hover": {
       color: tokens.colorPaletteRedForeground1
     }
@@ -13176,7 +13447,7 @@ var CardProfileMenu = ({
   selectedValue,
   onTabSelect
 }) => {
-  const styles = useStyles39();
+  const styles = useStyles40();
   ({ ...DEFAULT_LABELS39[language], ...labels });
   const handleTabSelect = (_, data) => {
     onTabSelect(data.value);
@@ -13206,6 +13477,6 @@ var CardProfileMenu = ({
   ) });
 };
 
-export { BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, InputDynamic_default as InputDynamic, MODAL_PRESETS, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
+export { API_CONFIG, API_ENDPOINTS, API_ERROR_MESSAGES, BackgroundTicketCard_default as BackgroundTicketCard, BackgroundTicketCardVertical_default as BackgroundTicketCardVertical, COUNTRIES, CardAddon, CardBanner, CardBookingTicket, CardFAQ, CardMealCatalog, CardOrdererInfo, CardPassengerList, CardPaymentGuide, CardPaymentInfo, CardPaymentMethodList, CardPriceDetails, CardProfileMenu, CardPromo, CardReview, CardReviewPassenger, CardServiceMenu, CardStatusOrder, CardTicket, CardTicketSearch, DEFAULT_LABELS8 as CardTicketSearchDefaultLabels, CardTicketSearchSummary, DEFAULT_LABELS9 as CardTicketSearchSummaryDefaultLabels, CardVehicleDetail, CardVehicleOwnerForm, CarouselWithCustomNav, DEFAULT_DURATION_RANGE, DEFAULT_PRICE_RANGE, DEFAULT_SCROLL_AMOUNT, DEFAULT_SERVICE_TYPES, DEFAULT_SORT_OPTIONS, DEFAULT_TIME_SLOTS, DEFAULT_VEHICLE_ICONS, DateFilter, DEFAULT_LABELS17 as DateFilterDefaultLabels, FileUpload_default as FileUpload, GENDER, HTTP_STATUS, IDENTITY_TYPE, InputDynamic_default as InputDynamic, LOAD_TYPE, MODAL_PRESETS, MY_TICKET_STATUS, MY_TICKET_TAB, ModalFilterTicket, DEFAULT_LABELS16 as ModalFilterTicketDefaultLabels, ModalIllustration, ModalListPassenger, ModalPassengerForm, ModalPreviewImage, ModalPriceDetail, ModalSearchHarbor, ModalSearchTicket, ModalSelectDate, ModalService, ModalTotalPassengers, ModalTypeOfService, PASSENGER_TYPE, SortMenu, Stepper, getBadgeConfig, getModalPreset, getSortLabel };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map