.gitignore

@@ -17,6 +17,10 @@ components.d.ts
 package-lock.json
 pnpm-lock.yaml
 auto-imports.d.ts
+*.zip
+*.rar
+
+stats.html
 
 /cypress/videos/
 /cypress/screenshots/

package.json

@@ -71,6 +71,7 @@
     "postcss": "^8.4.41",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.2.5",
+    "rollup-plugin-visualizer": "^6.0.3",
     "sass": "^1.79.4",
     "typescript": "~5.4.0",
     "unplugin-auto-import": "^0.18.2",

src/auto-imports.d.ts

@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const $api: typeof import('@/api/index')['default']
@@ -68,6 +69,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }

src/components/ContainerStatus/src/ContainerStatus.vue

@@ -3,7 +3,9 @@ import { formatTimezone } from '@/utils/tools'
 import { useThemeStore } from '@/stores/modules/theme'
 import lightPng from './image/no_data.png'
 import darkPng from './image/no_data_dark.png'
+import { useUserStore } from '@/stores/modules/user'
 
+const userStore = useUserStore()
 const themeStore = useThemeStore()
 
 const emptyImg = computed(() => {
@@ -69,7 +71,7 @@ watch(
       <img :src="emptyImg" :class="{ 'is-dark': themeStore.theme === 'dark' }" alt="empty" />
       <div class="empty-text" style="">No data</div>
     </div>
-    <div class="footer" v-if="props.website">
+    <div class="footer" v-if="props.website && userStore.userInfo?.user_type === 'employee'">
       Tracking on carrier website:
       <a :href="props.website" target="_blank" class="link">{{ props.website }}</a>
     </div>

src/components/CreateAddRules/src/components/ShipmentRange.vue

@@ -44,13 +44,19 @@ const ShipmentRangeInit = () => {
     TransportCheckedList.value = ShipmentRange_data.value?.shipment_transport_mode.split(';')
     CheckChange(ShipmentRange_data.value?.shipment_transport_mode)
   }
-  if (typeof ShipmentRange_data.value?.shipment_eta_limit == 'number' && typeof ShipmentRange_data.value?.shipment_eta_limit_from == 'number') {
+  if (
+    typeof ShipmentRange_data.value?.shipment_eta_limit == 'number' &&
+    typeof ShipmentRange_data.value?.shipment_eta_limit_from == 'number'
+  ) {
     ETATimeStart.value = ShipmentRange_data.value?.shipment_eta_limit_from
     ETATimeEnd.value = ShipmentRange_data.value?.shipment_eta_limit
     TimeChecked.value = 2
     changeTime(2)
   }
-  if (typeof ShipmentRange_data.value?.shipment_etd_limit == 'number' && typeof ShipmentRange_data.value?.shipment_etd_limit_from == 'number') {
+  if (
+    typeof ShipmentRange_data.value?.shipment_etd_limit == 'number' &&
+    typeof ShipmentRange_data.value?.shipment_etd_limit_from == 'number'
+  ) {
     ETDTimeStart.value = ShipmentRange_data.value?.shipment_etd_limit_from
     ETDTimeEnd.value = ShipmentRange_data.value?.shipment_etd_limit
     TimeChecked.value = 1
@@ -67,56 +73,56 @@ const clampedETDValueStart = computed({
   get: () => ETDTimeStart.value,
   set: (newVal) => {
     // 转换为整数
-    const num = parseInt(newVal, 10);
+    const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      ETDTimeStart.value = 0;
-      return;
+      ETDTimeStart.value = 0
+      return
     }
     // 范围限制
-    ETDTimeStart.value = Math.max(0, Math.min(365, num));
+    ETDTimeStart.value = Math.max(0, Math.min(365, num))
   }
 })
 const clampedETDValueEnd = computed({
   get: () => ETDTimeEnd.value,
   set: (newVal) => {
     // 转换为整数
-    const num = parseInt(newVal, 10);
+    const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      ETDTimeEnd.value = 0;
-      return;
+      ETDTimeEnd.value = 0
+      return
     }
     // 范围限制
-    ETDTimeEnd.value = Math.max(0, Math.min(365, num));
+    ETDTimeEnd.value = Math.max(0, Math.min(365, num))
   }
 })
 const clampedETAValueStart = computed({
   get: () => ETATimeStart.value,
   set: (newVal) => {
     // 转换为整数
-    const num = parseInt(newVal, 10);
+    const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      ETATimeStart.value = 0;
-      return;
+      ETATimeStart.value = 0
+      return
     }
     // 范围限制
-    ETATimeStart.value = Math.max(0, Math.min(365, num));
+    ETATimeStart.value = Math.max(0, Math.min(365, num))
   }
 })
 const clampedETAValueEnd = computed({
   get: () => ETATimeEnd.value,
   set: (newVal) => {
     // 转换为整数
-    const num = parseInt(newVal, 10);
+    const num = parseInt(newVal, 10)
     // 处理非数字和NaN情况
     if (isNaN(num)) {
-      ETATimeEnd.value = 0;
-      return;
+      ETATimeEnd.value = 0
+      return
     }
     // 范围限制
-    ETATimeEnd.value = Math.max(0, Math.min(365, num));
+    ETATimeEnd.value = Math.max(0, Math.min(365, num))
   }
 })
 
@@ -139,56 +145,72 @@ const changeTime = (val: any) => {
   if (val == 1) {
     isETDVisible.value = true
     isETAVisible.value = false
-    defaultradio.value =''
-    defaultradio2.value =''
+    defaultradio.value = ''
+    defaultradio2.value = ''
     ETATimeStart.value = ''
     ETATimeEnd.value = ''
-    if(typeof clampedETDValueStart.value == 'number' && typeof clampedETDValueEnd.value == 'number') {
-      if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 30) {
+    if (
+      typeof clampedETDValueStart.value == 'number' &&
+      typeof clampedETDValueEnd.value == 'number'
+    ) {
+      if (clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 30) {
         defaultradio.value = 'Next 30 days'
-      } else if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 60) {
+      } else if (clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 60) {
         defaultradio.value = 'Next 60 days'
-      } else if(clampedETDValueStart.value == 10 && clampedETDValueEnd.value == 60) {
+      } else if (clampedETDValueStart.value == 10 && clampedETDValueEnd.value == 60) {
         defaultradio.value = 'Past 10 days to next 60 day'
-      } else if(clampedETDValueStart.value == 30 && clampedETDValueEnd.value == 0) {
+      } else if (clampedETDValueStart.value == 30 && clampedETDValueEnd.value == 0) {
         defaultradio.value = 'Past 30 days'
       } else {
         defaultradio.value = 'Customize'
       }
-      if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 0) {
+      if (clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 0) {
         Timestr = ''
       } else {
-        Timestr = 'ETD: minus ' + clampedETDValueStart.value + ' Day(s) to Plus '+ clampedETDValueEnd.value + ' Day(s)'
+        Timestr =
+          'ETD: minus ' +
+          clampedETDValueStart.value +
+          ' Day(s) to Plus ' +
+          clampedETDValueEnd.value +
+          ' Day(s)'
       }
-    } else{
+    } else {
       Timestr = ''
     }
-    emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
+    emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value, clampedETDValueEnd.value)
   } else if (val == 2) {
     isETDVisible.value = false
     isETAVisible.value = true
-    defaultradio2.value =''
-    defaultradio.value =''
+    defaultradio2.value = ''
+    defaultradio.value = ''
     ETDTimeStart.value = ''
     ETDTimeEnd.value = ''
-    if(typeof clampedETAValueStart.value == 'number' && typeof clampedETAValueEnd.value == 'number') {
-      if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 30) {
+    if (
+      typeof clampedETAValueStart.value == 'number' &&
+      typeof clampedETAValueEnd.value == 'number'
+    ) {
+      if (clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 30) {
         defaultradio2.value = 'Next 30 days'
-      } else if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 60) {
+      } else if (clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 60) {
         defaultradio2.value = 'Next 60 days'
-      } else if(clampedETAValueStart.value == 10 && clampedETAValueEnd.value == 60) {
+      } else if (clampedETAValueStart.value == 10 && clampedETAValueEnd.value == 60) {
         defaultradio2.value = 'Past 10 days to next 60 day'
-      } else if(clampedETAValueStart.value == 30 && clampedETAValueEnd.value == 0) {
+      } else if (clampedETAValueStart.value == 30 && clampedETAValueEnd.value == 0) {
         defaultradio2.value = 'Past 30 days'
       } else {
         defaultradio2.value = 'Customize'
       }
-      if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 0) {
+      if (clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 0) {
         Timestr = ''
       } else {
-        Timestr = 'ETA: minus ' + clampedETAValueStart.value + ' Day(s) to Plus '+ clampedETAValueEnd.value + ' Day(s)'
+        Timestr =
+          'ETA: minus ' +
+          clampedETAValueStart.value +
+          ' Day(s) to Plus ' +
+          clampedETAValueEnd.value +
+          ' Day(s)'
       }
-    } else{
+    } else {
       Timestr = ''
     }
     emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value, clampedETAValueEnd.value)
@@ -198,54 +220,64 @@ const changeTime = (val: any) => {
 }
 
 //切换默认值
-const changedefaultradio = (val:any) => {
-  if(val == 'Next 30 days') {
+const changedefaultradio = (val: any) => {
+  if (val == 'Next 30 days') {
     clampedETDValueStart.value = 0
     clampedETDValueEnd.value = 30
-  } else if(val == 'Next 60 days') {
+  } else if (val == 'Next 60 days') {
     clampedETDValueStart.value = 0
     clampedETDValueEnd.value = 60
-  } else if(val == 'Past 30 days') {
+  } else if (val == 'Past 30 days') {
     clampedETDValueStart.value = 30
     clampedETDValueEnd.value = 0
-  } else if(val == 'Past 10 days to next 60 days') {
+  } else if (val == 'Past 10 days to next 60 days') {
     clampedETDValueStart.value = 10
     clampedETDValueEnd.value = 60
   } else {
     clampedETDValueStart.value = 0
     clampedETDValueEnd.value = 0
   }
-  if(clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 0) {
+  if (clampedETDValueStart.value == 0 && clampedETDValueEnd.value == 0) {
     Timestr = ''
   } else {
-    Timestr = 'ETD: minus ' + clampedETDValueStart.value + ' Day(s) to Plus '+ clampedETDValueEnd.value + ' Day(s)'
+    Timestr =
+      'ETD: minus ' +
+      clampedETDValueStart.value +
+      ' Day(s) to Plus ' +
+      clampedETDValueEnd.value +
+      ' Day(s)'
   }
-  emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value,clampedETDValueEnd.value)
+  emit('ChangeCheckTimeRules', Timestr, clampedETDValueStart.value, clampedETDValueEnd.value)
 }
 //切换默认值
-const changedefaultradioETA = (val:any) => {
-  if(val == 'Next 30 days') {
+const changedefaultradioETA = (val: any) => {
+  if (val == 'Next 30 days') {
     clampedETAValueStart.value = 0
     clampedETAValueEnd.value = 30
-  } else if(val == 'Next 60 days') {
+  } else if (val == 'Next 60 days') {
     clampedETAValueStart.value = 0
     clampedETAValueEnd.value = 60
-  } else if(val == 'Past 30 days') {
+  } else if (val == 'Past 30 days') {
     clampedETAValueStart.value = 30
     clampedETAValueEnd.value = 0
-  } else if(val == 'Past 10 days to next 60 days') {
+  } else if (val == 'Past 10 days to next 60 days') {
     clampedETAValueStart.value = 10
     clampedETAValueEnd.value = 60
   } else {
     clampedETAValueStart.value = 0
     clampedETAValueEnd.value = 0
   }
-  if(clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 0) {
+  if (clampedETAValueStart.value == 0 && clampedETAValueEnd.value == 0) {
     Timestr = ''
   } else {
-    Timestr = 'ETA: minus ' + clampedETAValueStart.value + ' Day(s) to Plus '+ clampedETAValueEnd.value + ' Day(s)'
+    Timestr =
+      'ETA: minus ' +
+      clampedETAValueStart.value +
+      ' Day(s) to Plus ' +
+      clampedETAValueEnd.value +
+      ' Day(s)'
   }
-  emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value,clampedETAValueEnd.value)
+  emit('ChangeCheckTimeRules', Timestr, clampedETAValueStart.value, clampedETAValueEnd.value)
 }
 const handleCloseCreateRule = (val: any) => {
   if (val.indexOf('ETD') != -1 || val.indexOf('ETA') != -1) {
@@ -273,7 +305,8 @@ defineExpose({
       <el-collapse-item name="TransportMode">
         <template #title>
           <div class="Rules_Title_flex">
-            <span class="stars_red">*</span><div class="Rules_Title OceanTitle">Transport Mode</div>
+            <span class="stars_red">*</span>
+            <div class="Rules_Title OceanTitle">Transport Mode</div>
           </div>
         </template>
         <div class="oceanCheckbox">
@@ -290,7 +323,8 @@ defineExpose({
       <el-collapse-item name="Time">
         <template #title>
           <div class="Rules_Title_flex">
-            <span class="stars_red">*</span><div class="Rules_Title OceanTitle">Time</div>
+            <span class="stars_red">*</span>
+            <div class="Rules_Title OceanTitle">Time</div>
           </div>
         </template>
         <div class="oceanCheckbox">
@@ -301,11 +335,14 @@ defineExpose({
                 <el-radio-group v-model="defaultradio" @change="changedefaultradio">
                   <el-radio-button label="Next 30 days" value="Next 30 days" />
                   <el-radio-button label="Next 60 days" value="Next 60 days" />
-                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
+                  <el-radio-button
+                    label="Past 10 days to next 60 days"
+                    value="Past 10 days to next 60 days"
+                  />
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div class="flex" style="align-items: end;margin: 0 8px 8px 0;flex-wrap: wrap;">
+                <div class="flex" style="align-items: end; margin: 0 8px 8px 0; flex-wrap: wrap">
                   <div class="date_flex">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
@@ -342,11 +379,14 @@ defineExpose({
                 <el-radio-group v-model="defaultradio2" @change="changedefaultradioETA">
                   <el-radio-button label="Next 30 days" value="Next 30 days" />
                   <el-radio-button label="Next 60 days" value="Next 60 days" />
-                  <el-radio-button label="Past 10 days to next 60 days" value="Past 10 days to next 60 days" />
+                  <el-radio-button
+                    label="Past 10 days to next 60 days"
+                    value="Past 10 days to next 60 days"
+                  />
                   <el-radio-button label="Past 30 days" value="Past 30 days" />
                   <el-radio-button label="Customize" value="Customize" />
                 </el-radio-group>
-                <div class="flex" style="align-items: end;margin: 0 8px 8px 0;flex-wrap: wrap;">
+                <div class="flex" style="align-items: end; margin: 0 8px 8px 0; flex-wrap: wrap">
                   <div class="date_flex">
                     <div class="time_title">Start Date</div>
                     <div class="flex">
@@ -460,7 +500,7 @@ defineExpose({
   :deep(.el-radio-group) {
     display: flex;
     flex-direction: row;
-}
+  }
 }
 :deep(.el-radio) {
   display: flex;
@@ -473,7 +513,7 @@ defineExpose({
   margin-right: 0;
   height: fit-content;
   line-height: 32px;
-  align-items:  start;
+  align-items: start;
 }
 .oceanCheckbox2 {
   :deep(.el-radio-button) {
@@ -491,7 +531,7 @@ defineExpose({
     margin-right: 8px;
   }
 }
-:deep( .el-radio__inner) {
+:deep(.el-radio__inner) {
   border: 1px solid var(--color-system-checkbox-border);
 }
 :deep(.el-radio__input.is-checked + .el-radio__label) {
@@ -504,7 +544,10 @@ defineExpose({
   box-shadow: 0 0 0 1px var(--color-system-input-border) inset;
 }
 :deep(.el-input-group--append .el-input-group__append .el-select .el-select__wrapper) {
-  box-shadow: 0 1px 0 0 var(--color-system-input-border) inset,0 -1px 0 0 var(--color-system-border-1) inset,-1px 0 0 0 var(--color-system-border-1) inset;
+  box-shadow:
+    0 1px 0 0 var(--color-system-input-border) inset,
+    0 -1px 0 0 var(--color-system-border-1) inset,
+    -1px 0 0 0 var(--color-system-border-1) inset;
 }
 :deep(.el-radio-button__inner) {
   border: none;
@@ -525,4 +568,4 @@ defineExpose({
   display: flex;
   align-items: center;
 }
-</style>
+</style>

src/stores/modules/user.ts

@@ -15,6 +15,7 @@ interface UserInfo {
   numbers_format: string
   PASSWORD_CHANGE_CYCLE: number // 密码修改周期（多少天需要改一次）
   last_pwd_change: string // 上次密码修改时间
+  is_desensitization_kln?: string // Mask Customer Information
 }
 interface UserState {
   userInfo: UserInfo

src/views/Booking/src/components/BookingDetail/src/BookingDetail.vue

@@ -374,6 +374,8 @@ const { isOverflow: isDestinationOverflow } = useOverflow(destinationRef, allDat
     color: var(--color-neutral-2);
   }
   .content {
+    width: 100%;
+    word-wrap: break-word;
     min-height: 16px;
     font-size: 14px;
     font-weight: 700;

src/views/DestinationDelivery/src/components/CreateNewBooking/src/CreateNewbooking.vue

@@ -221,48 +221,39 @@ const Countryloading = ref(false)
 const city = ref<CountryItem[]>([])
 const Cityoptions = ref<CountryItem[]>([])
 const cityloading = ref(false)
-const getAddressCountryCityData = (type: any) => {
-  $api
+const querySearchCountry = (query: string) => {
+  Countryloading.value = true
+  setTimeout(() => {
+    $api
     .getAddressCountryCityData({
-      term: '',
-      term_type: type,
-      limit: type == 'country' ? CityCode.value : CountryCode.value
+      term: query,
+      term_type: 'country',
+      limit: CityCode.value != ''  ? CityCode.value : ''
     })
     .then((res: any) => {
       if (res.code === 200) {
-        if (type == 'country') {
-          countrys.value = res.data
-        } else {
-          city.value = res.data
-        }
+        Countryoptions.value = res.data
+        Countryloading.value = false
       }
     })
-}
-const querySearchCountry = (query: string) => {
-  if (query) {
-    Countryloading.value = true
-    setTimeout(() => {
-      Countryloading.value = false
-      Countryoptions.value = countrys.value.filter((item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase())
-      })
-    }, 1000)
-  } else {
-    Countryoptions.value = []
-  }
+  }, 1000)
 }
 const querySearchCity = (query: string) => {
-  if (query) {
-    cityloading.value = true
-    setTimeout(() => {
-      cityloading.value = false
-      Cityoptions.value = city.value.filter((item) => {
-        return item.label.toLowerCase().includes(query.toLowerCase())
-      })
-    }, 1000)
-  } else {
-    Cityoptions.value = []
-  }
+  cityloading.value = true
+  setTimeout(() => {
+    $api
+    .getAddressCountryCityData({
+      term: query,
+      term_type: 'city',
+      limit: CountryCode.value != ''  ? CountryCode.value : ''
+    })
+    .then((res: any) => {
+      if (res.code === 200) {
+        Cityoptions.value = res.data
+        cityloading.value = false
+      }
+    })
+  }, 1000)
 }
 // 特殊日期样式
 const getCurrentStyle = (current: any) => {
@@ -1148,7 +1139,6 @@ onMounted(() => {
             v-model="CountryCode"
             filterable
             remote
-            @focus="getAddressCountryCityData('country')"
             placeholder="Select Country"
             :remote-method="querySearchCountry"
             :loading="Countryloading"
@@ -1168,7 +1158,6 @@ onMounted(() => {
             v-model="CityCode"
             filterable
             remote
-            @focus="getAddressCountryCityData('city')"
             placeholder="Select City"
             :remote-method="querySearchCity"
             :loading="cityloading"

src/views/SystemSettings/src/SystemSettings.vue

@@ -137,15 +137,19 @@ const AddRulesTable = ref()
 const subscribeInit = ref({})
 
 const DefaultTimeZone = ref()
-const isInitSystem = JSON.parse(localStorage.getItem('userInfo')).subscribe_notification_default_init
+const isInitSystem = JSON.parse(
+  localStorage.getItem('userInfo')
+).subscribe_notification_default_init
 DefaultTimeZone.value = 'UTC' + moment().tz(moment.tz.guess()).format('Z')
 const FirstInitSubscribe = () => {
-  if(isInitSystem) {
-    $api.FirstInitSubscribe({
-      default_time_zone: DefaultTimeZone.value
-    }).then((res:any) => {
-      getsubscribe()
-    })
+  if (isInitSystem) {
+    $api
+      .FirstInitSubscribe({
+        default_time_zone: DefaultTimeZone.value
+      })
+      .then((res: any) => {
+        getsubscribe()
+      })
   } else {
     getsubscribe()
   }
@@ -166,7 +170,7 @@ const getsubscribe = () => {
 }
 
 const handleTabClick = (tab: any) => {
-  if(tab.paneName == 'Subscribe Notifications') {
+  if (tab.paneName == 'Subscribe Notifications') {
     isMilestoneChecked.value = false
     isContainerChecked.value = false
     isDepartureChecked.value = false
@@ -266,7 +270,11 @@ onMounted(() => {
               ></AddRules>
             </div>
           </el-collapse-item>
-          <el-collapse-item style="margin: 8px 0;" name="Container" :class="isContainerChecked ? 'border_ischecked' : ''">
+          <el-collapse-item
+            style="margin: 8px 0"
+            name="Container"
+            :class="isContainerChecked ? 'border_ischecked' : ''"
+          >
             <template #title>
               <div class="flex">
                 <div class="collapse_left" :class="isContainerAdded ? 'text_ischecked' : ''">
@@ -286,7 +294,11 @@ onMounted(() => {
               ></AddRules>
             </div>
           </el-collapse-item>
-          <el-collapse-item style="margin-bottom: 8px;" name="Departure" :class="isDepartureChecked ? 'border_ischecked' : ''">
+          <el-collapse-item
+            style="margin-bottom: 8px"
+            name="Departure"
+            :class="isDepartureChecked ? 'border_ischecked' : ''"
+          >
             <template #title>
               <div class="flex">
                 <div class="collapse_left" :class="isDepartureAdded ? 'text_ischecked' : ''">
@@ -377,6 +389,9 @@ onMounted(() => {
 .SubscribeCollapse {
   padding: 0 24px 24px 24px;
   border-bottom: 1px solid var(--color-select-border);
+  :deep(.el-icon svg) {
+    width: 0;
+  }
 }
 :deep(.el-tabs__nav-wrap:after) {
   height: 2px;
@@ -471,9 +486,9 @@ onMounted(() => {
 :deep(.el-collapse-item__arrow.is-active) {
   transform: rotate(-180deg);
 }
-:deep(.el-icon svg) {
-  width: 0;
-}
+// :deep(.el-icon svg) {
+//   width: 0;
+// }
 .monitoring_flex {
   display: flex;
   justify-content: space-between;

src/views/SystemSettings/src/components/PersonalProfile.vue

@@ -10,6 +10,7 @@ const form = reactive({
   lastName: userStore.userInfo?.last_name,
   username: userStore.userInfo?.uname,
   email: userStore.userInfo?.email,
+  is_desensitization_kln: userStore.userInfo?.is_desensitization_kln || 'f',
   password: '**************'
 })
 
@@ -92,6 +93,12 @@ const saveConfig = (model: string) => {
       numbers_format: numbersFormat.value
     }
   }
+  if (userStore.userInfo?.user_type === 'employee') {
+    params = {
+      ...params,
+      is_desensitization_kln: form.is_desensitization_kln
+    }
+  }
   $api
     .saveUserInfo(params)
     .then((res: any) => {
@@ -109,6 +116,9 @@ const saveConfig = (model: string) => {
                 numbers_format: numbersFormat.value
               }
 
+        if (userStore.userInfo.user_type === 'employee' && model === 'profile') {
+          updatedInfo.is_desensitization_kln = form.is_desensitization_kln
+        }
         userStore.setUserInfo(updatedInfo)
         ElMessage.success('Save successfully')
       } else {
@@ -157,13 +167,7 @@ const saveConfig = (model: string) => {
               >
             </p>
             <div class="password-change">
-              <el-input
-                size="large"
-                type="password"
-                style="width: 330px"
-                :disabled="true"
-                v-model="form.password"
-              />
+              <el-input size="large" type="password" :disabled="true" v-model="form.password" />
               <el-button
                 @click="handleChangePassword"
                 class="el-button--main el-button--pain-theme"
@@ -173,6 +177,13 @@ const saveConfig = (model: string) => {
               >
             </div>
           </div>
+          <div class="item" v-if="userStore.userInfo?.user_type === 'employee'">
+            <p class="label">Mask Customer Information</p>
+            <el-select size="large" v-model="form.is_desensitization_kln">
+              <el-option label="Yes" value="t"></el-option>
+              <el-option label="No" value="f"></el-option>
+            </el-select>
+          </div>
         </div>
         <div class="row">
           <el-button @click="saveConfig('profile')" class="el-button--dark save-icon" size="large"
@@ -211,7 +222,7 @@ const saveConfig = (model: string) => {
                   <template #default>
                     <span>{{ key }}</span>
                     <el-select
-                      style="margin-left: 28px; width: 320px"
+                      style="margin-left: 28px; width: 320px; height: 42px"
                       v-if="dateFormat === key"
                       size="large"
                       v-model="monthFormat"
@@ -301,6 +312,7 @@ const saveConfig = (model: string) => {
       gap: 8px;
       .item {
         flex: 1;
+        max-width: calc(50% - 4px);
         margin-bottom: 16px;
         .label {
           margin-bottom: 4px;

src/views/Tracking/src/components/PublicTracking/src/components/PublicTrackingDetail.vue

@@ -348,6 +348,8 @@ const openShareDialog = () => {
     color: var(--color-neutral-2);
   }
   .content {
+    width: 100%;
+    word-wrap: break-word;
     min-height: 16px;
     font-size: 14px;
     font-weight: 700;

src/views/Tracking/src/components/TrackingDetail/src/TrackingDetail.vue

@@ -553,6 +553,8 @@ const SubscribeShipments = () => {
     color: var(--color-neutral-2);
   }
   .content {
+    width: 100%;
+    word-wrap: break-word;
     min-height: 16px;
     font-size: 14px;
     font-weight: 700;

src/views/Tracking/src/components/TrackingDetail/src/components/BasicInformation.vue

@@ -47,6 +47,19 @@ const allData: any = ref({
       {
         label: 'Service Type',
         content: ''
+      },
+
+      {
+        label: 'Load Terms',
+        content: ''
+      },
+      {
+        label: 'Shipment Type',
+        content: ''
+      },
+      {
+        label: 'CO2 Emission',
+        content: ''
       }
     ]
   },
@@ -140,7 +153,7 @@ const convertData = (data: any) => {
         },
         {
           label: 'Ref No.',
-          content: data.ref_no
+          content: data.ref_no || '--'
         }
       ],
       bottom: [
@@ -159,6 +172,18 @@ const convertData = (data: any) => {
         {
           label: 'Service Type',
           content: data.basicInfo.Service_Type || '--'
+        },
+        {
+          label: 'Load Terms',
+          content: data.basicInfo['Load Terms'] || '--'
+        },
+        {
+          label: 'Shipment Type',
+          content: data.basicInfo['Shipment Type'] || '--'
+        },
+        {
+          label: 'CO2 Emission',
+          content: data.basicInfo['CO2 Emission'] || '--'
         }
       ]
     },

src/views/Tracking/src/components/TrackingDetail/src/components/EmailDrawer.vue

@@ -168,7 +168,7 @@ const sendEmail = () => {
   <div class="email-view">
     <div class="email-path">
       <span class="font_family icon-icon_email_b" style="font-size: 18px"></span>
-      <span class="label">Communication to Apex: &nbsp;</span>
+      <span class="label">Communication to KLN: &nbsp;</span>
       <span class="content">{{ emailData.email }}</span>
     </div>
     <div class="separated-by">

vite.config.ts

@@ -6,6 +6,7 @@ import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import Icons from 'unplugin-icons/vite'
 import IconsResolver from 'unplugin-icons/resolver'
+import { visualizer } from 'rollup-plugin-visualizer';
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
@@ -18,6 +19,7 @@ export default defineConfig(({ mode }) => {
       }
     },
     plugins: [
+      visualizer(),
       vue(),
       AutoImport({
         resolvers: [