feat:修改样式和bug

src/auto-imports.d.ts

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

src/components/AutoSelect/src/AutoSelect.vue

@@ -13,6 +13,15 @@ const props = defineProps({
   },
   ASType: {
     type: String
+  },
+  ASSearchFiled: {
+    type: String
+  },
+  ASSearchMode: {
+    type: String
+  },
+  ASSearchObj: {
+    type: Object
   }
 })
 
@@ -25,6 +34,9 @@ const list = ref<ListItem[]>([])
 const options = ref<ListItem[]>([])
 const value = ref(props.ASValue)
 const type = ref(props.ASType)
+const search_field = ref(props.ASSearchFiled)
+const search_mode = ref(props.ASSearchMode)
+const MoreFiltersObj = ref(props.ASSearchObj)
 const loading = ref(false)
 watch(
   () => props.ASValue,
@@ -39,7 +51,10 @@ const remoteMethod = (query: string) => {
       $api
         .getMoreFiltersData({
           term: query,
-          type: type.value
+          type: type.value,
+          search_field: search_field.value,
+          search_mode: search_mode.value,
+          ...MoreFiltersObj.value
         })
         .then((res: any) => {
           loading.value = false

src/components/DateRange/src/DateRange.vue

@@ -76,6 +76,7 @@ const clearrest = () => {
   clearDateStart()
   clearDateEnd()
   clearDateCreation()
+  clearDaterangeObj()
 }
 // 清除EDT
 const clearDateStart = () => {
@@ -97,6 +98,7 @@ const clearDateCreation = () => {
 // 清除 daterangeObj
 const clearDaterangeObj = () => {
   daterangeObj = {}
+  daterangeObj2 = {}
 }
 </script>
 <template>

src/components/DateRange/src/components/CalendarDate.vue

@@ -93,7 +93,7 @@ const handlePanelChange = (value: any, mode: any) => {
         </span>
       </template>
       <template #renderExtraFooter v-if="isShowExtra">
-        <div class="flex">
+        <div class="calender_flex">
           <div class="footer_left">
             <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
             <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
@@ -111,17 +111,21 @@ const handlePanelChange = (value: any, mode: any) => {
 </template>
 
 <style lang="scss" scoped>
-.flex {
+.calender_flex {
   display: flex;
   justify-content: space-between;
 }
 .footer_left {
   display: flex;
   flex: 50%;
-  padding: 4px 0 4px 8px;
+  padding: 0 4px 0 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
 }
 .footer_right {
   border-left: 1px solid var(--color-border);
+  padding-left: 8px;
 }
 .el-button--noborder {
   color: var(--color-theme);

src/components/DateRange/src/components/QuickCalendarDate.vue

@@ -106,7 +106,7 @@ const rangePresets = ref([
         </span>
       </template>
       <template #renderExtraFooter v-if="isShowExtra">
-        <div class="flex">
+        <div class="calender_flex">
           <div class="footer_left">
             <el-button class="el-button--noborder" @click="Earliest">Earliest Time</el-button>
             <el-button class="el-button--noborder" @click="ChangeToday('Earliest')"
@@ -124,17 +124,21 @@ const rangePresets = ref([
 </template>
 
 <style lang="scss" scoped>
-.flex {
+.calender_flex {
   display: flex;
   justify-content: space-between;
 }
 .footer_left {
   display: flex;
   flex: 50%;
-  padding: 4px 0 4px 8px;
+  padding: 0 4px 0 0;
+  height: 48px;
+  display: flex;
+  align-items: center;
 }
 .footer_right {
   border-left: 1px solid var(--color-border);
+  padding-left: 8px;
 }
 .el-button--noborder {
   color: var(--color-theme);

src/components/FliterTags/src/FilterTags.vue

@@ -40,7 +40,7 @@ const checkedBox = (i: any, name: any, checked: any) => {
     checkedCount.forEach((item) => map.set(item, true))
     checkedCount = [...map.keys()]
   } else {
-    checkedCount.pop()
+    checkedCount.splice(checkedCount.indexOf(name), 1)
     TagsList.value[0].checked = false
     TagsList.value[i].checked = !TagsList.value[i].checked
   }

src/components/MoreFilters/src/MoreFilters.vue

@@ -123,7 +123,8 @@ const AddDateType = ref<TypeItem[]>([])
 const AddDatePlaceType = ref<PlacesTypeItem[]>([])
 
 const props = defineProps({
-  isShipment: Boolean
+  isShipment: Boolean,
+  searchTableQeury: Object
 })
 const PartyTypeoptions = computed(() => {
   if (props.isShipment) {
@@ -635,6 +636,9 @@ const ServiceSearch = (val: any, value: any) => {
             <div class="ETD_title">Shipper Name</div>
             <AutoSelect
               ASType="contanct"
+              ASSearchFiled="Shipper Name"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
               @changeAutoSelect="changeAutoSelectshippername"
               :ASValue="InputForm.parties.Shippername"
               ASPlaceholder="Please input shipper name"
@@ -645,6 +649,9 @@ const ServiceSearch = (val: any, value: any) => {
             <div class="ETD_title">Consignee Name</div>
             <AutoSelect
               ASType="contanct"
+              ASSearchFiled="Consignee Name"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
               @changeAutoSelect="changeAutoSelectconsigneename"
               :ASValue="InputForm.parties.Consigneename"
               ASPlaceholder="Please input consignee name"
@@ -654,7 +661,9 @@ const ServiceSearch = (val: any, value: any) => {
           <SelectAutoSelect
             ref="partSelectTableSelectRef"
             :AddDateType="AddDateType"
+            :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
             :DateTypeoptions="PartyTypeoptions"
+            :ASSearchObj="props.searchTableQeury"
             @changeAutoSelectAddType="changeAutoSelectAddType"
             @changeAutoSelect="changeAutoSelectVal"
             :selectedPartyTypeoptions="selectedPartyTypeoptions"
@@ -678,13 +687,27 @@ const ServiceSearch = (val: any, value: any) => {
           ></template>
           <div class="ETD">
             <div class="ETD_title">Origin</div>
-            <SelectTable :searchInput="InputForm.palces.Origin" @check="checkorigin" />
+            <SelectTable
+              ASSearchFiled="Origin"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
+              :searchInput="InputForm.palces.Origin"
+              @check="checkorigin"
+            />
           </div>
           <div class="ETA">
             <div class="ETD_title">Destination</div>
-            <SelectTable :searchInput="InputForm.palces.Destination" @check="checkdestination" />
+            <SelectTable
+              ASSearchFiled="Destination"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
+              :searchInput="InputForm.palces.Destination"
+              @check="checkdestination"
+            />
           </div>
           <SelectTableSelect
+            :TablesearchTableQeury="props.searchTableQeury"
+            :TablesearchMode="props.isShipment ? 'tracking' : 'booking'"
             ref="placeSelectTableSelectRef"
             :AddDateType="AddDatePlaceType"
             :DateTypeoptions="PlaceTypeoptions"
@@ -715,6 +738,9 @@ const ServiceSearch = (val: any, value: any) => {
             <div class="ETD_title">Vessel</div>
             <AutoSelect
               ASType="vessel"
+              ASSearchFiled="Vessel"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment ? 'tracking' : 'booking'"
               @changeAutoSelect="changeAutoSelectvessel"
               :ASValue="InputForm.transportation.Vessel"
               ASPlaceholder="Please input vessel name or code"
@@ -730,6 +756,9 @@ const ServiceSearch = (val: any, value: any) => {
             ></el-input>
             <!-- <AutoSelect
               ASType="voyage"
+              :ASSearchObj="props.searchTableQeury"
+              :ASSearchMode="props.isShipment? 'tracking': 'booking'"
+              ASSearchFiled="Voyage/Flight"
               @changeAutoSelect="changeAutoSelectvoyage"
               :ASValue="InputForm.transportation.Voyage"
               ASPlaceholder="Please input Voyage or flight no."

src/components/ScoringGrade/src/ScoringGrade.vue

@@ -161,7 +161,10 @@ const changeAngryDetails = (val: any) => {
     isLoaded_share.value = true
     setTimeout(() => {
       isshowexpression_details.value = true
-    }, 500)
+      setTimeout(() => {
+        document.getElementById('moreMerchant').scrollIntoView()
+      }, 200)
+    }, 1000)
   }, 500)
 }
 //开心表情，选择建议后显示对话
@@ -171,7 +174,10 @@ const changeHappybuttonbox = (val: any) => {
     isLoaded_share.value = true
     setTimeout(() => {
       isshowexpression_details.value = true
-    }, 500)
+      setTimeout(() => {
+        document.getElementById('moreMerchant').scrollIntoView()
+      }, 200)
+    }, 1000)
   }, 500)
 }
 // smile提交后显示对话
@@ -182,7 +188,10 @@ const changeSmileRadio = (val: any) => {
       isLoaded_share.value = true
       setTimeout(() => {
         isshowexpression_details.value = true
-      }, 500)
+        setTimeout(() => {
+          document.getElementById('moreMerchant').scrollIntoView()
+        }, 200)
+      }, 1000)
     }, 500)
   }
 }
@@ -254,7 +263,7 @@ const mouseout = (item: any) => {
       <template #reference>
         <el-avatar @click="avatarClick" :size="46" shape="square" :src="clickSrc" />
       </template>
-      <div class="flex">
+      <div class="score_flex">
         <el-popover
           placement="top"
           :width="276"
@@ -330,7 +339,7 @@ const mouseout = (item: any) => {
             dialogWidth="334px"
           ></DialogUe>
         </transition>
-        <transition name="fade" v-if="isshowexpression_details">
+        <transition name="fade" id="moreMerchant" v-if="isshowexpression_details">
           <DialogColorful
             :isshowDetails="isshowexpression_details"
             @submitDetails="submitDetails"
@@ -376,7 +385,7 @@ const mouseout = (item: any) => {
   background-color: #fff;
   cursor: pointer;
 }
-.flex {
+.score_flex {
   display: flex;
   height: 64px;
   align-items: center;
@@ -416,9 +425,12 @@ const mouseout = (item: any) => {
 }
 .sub_title_text {
   color: var(--color-neutral-3);
+  font-size: 14px;
+  line-height: 21px;
 }
 .result {
-  height: 578px;
+  height: 560px;
+  padding: 0;
 }
 .avater_popver {
   padding-left: 8px !important;

src/components/SelectTable/src/SelectTable.vue

@@ -24,6 +24,17 @@ const props = defineProps({
   isError: {
     type: Boolean,
     default: false
+  },
+  ASSearchMode: {
+    type: String,
+    default: ''
+  },
+  ASSearchFiled: {
+    type: String,
+    default: ''
+  },
+  ASSearchObj: {
+    type: Object
   }
 })
 
@@ -78,7 +89,10 @@ const handleSearch = _.debounce((val?) => {
         term: searchVal.value ? searchVal.value : '',
         cp: state.currentPage,
         ps: state.pageSize,
-        rc: '-1'
+        rc: '-1',
+        search_field: props.ASSearchFiled,
+        search_mode: props.ASSearchMode,
+        ...props.ASSearchObj
       })
       .then((res: any) => {
         if (res.code == 200) {
@@ -108,7 +122,10 @@ const handleCurrentChange = () => {
         term: searchVal.value ? searchVal.value : '',
         cp: state.currentPage,
         ps: state.pageSize,
-        rc: state.total
+        rc: state.total,
+        search_field: props.ASSearchFiled,
+        search_mode: props.ASSearchMode,
+        ...props.ASSearchObj
       })
       .then((res: any) => {
         if (res.code == 200) {

src/components/SelectTableSelect/src/SelectTableSelect.vue

@@ -17,6 +17,8 @@ interface Props {
   ASPlaceholder: string
   DateTypeoptions: dateoptions[]
   selectedPartyTypeoptions: Array<string>
+  TablesearchTableQeury: Object
+  TablesearchMode: String
 }
 interface optionsItem {
   value: string
@@ -82,7 +84,7 @@ const changeAutoSelect = (val: any, value: any) => {
   }
   AutoSelectObj[val] = value.join()
   emit('changeAutoSelect', AutoSelectObj, errorBoolean.value)
-} 
+}
 const typeSelectFocus = (index: any, e: any) => {
   typeSelectIndex.value = index
 }
@@ -172,6 +174,9 @@ const checkdestination = (row: any, index: any) => {
     <div style="margin-top: 16px">
       <div class="ETD_title">Places Details</div>
       <SelectTable
+        :ASSearchFiled="AddType[index].placesType"
+        :ASSearchObj="props.TablesearchTableQeury"
+        :ASSearchMode="props.TablesearchMode"
         :key-val="
           AddType[index].placesType && AddType[index].placesType === 'Port of Loading'
             ? 'uncode'

src/components/selectAutoSelect/src/selectAutoSelect.vue

@@ -20,6 +20,8 @@ interface Props {
   ASPlaceholder: string
   DateTypeoptions: dateoptions[]
   selectedPartyTypeoptions: Array<string>
+  ASSearchMode: String
+  ASSearchObj: Object
 }
 interface optionsItem {
   value: string
@@ -59,7 +61,9 @@ watch(
 )
 const ErrorNumber = ref(true)
 const str = ref()
+const search_field = ref()
 const InputAutoSelect = (val: any) => {
+  search_field.value = val
   if (val.includes('Agent')) {
     str.value = 'apex'
   } else {
@@ -73,7 +77,10 @@ const remoteMethod = (query: string) => {
       $api
         .getMoreFiltersData({
           term: query,
-          type: str.value
+          type: str.value,
+          search_field: search_field.value,
+          search_mode: props.ASSearchMode,
+          ...props.ASSearchObj
         })
         .then((res: any) => {
           if (res.code == 200) {

src/styles/elementui.scss

@@ -579,12 +579,18 @@ div .el-select__wrapper.is-disabled,
 div .scoreDialog header.el-dialog__header {
   background: linear-gradient(
     251deg,
-    rgba(255, 255, 255, 0.3),
-    rgba(255, 244, 235, 0.5) 22.66%,
-    rgba(240, 243, 255, 0.5) 44.57%,
-    rgba(224, 247, 249, 0.6) 80.46%,
-    rgba(255, 255, 255, 0.3)
+    rgba(255, 255, 255),
+    rgba(255, 244, 235) 22.66%,
+    rgba(240, 243, 255) 44.57%,
+    rgba(224, 247, 249) 80.46%,
+    rgba(255, 255, 255)
   );
+  position: fixed;
+  width: 632px;
+  height: 48px;
+}
+div .scoreDialog .el-dialog__body {
+  margin-top: 40px;
 }
 
 div .el-textarea__inner:hover {

src/styles/theme.scss

@@ -53,7 +53,7 @@
   --color-tag-booked: #bf66ea;
   --color-tag-all: #ed6d00;
   --color-tag-cargo-received: #5963c0;
-  --color-tag-departure: #40a6e5;
+  --color-tag-departure: #d9edfa;
   --color-tag-arrived: #01b7a1;
   --color-tag-completed: #5bb462;
   --color-tag-Departed: #d9edfa;
@@ -64,7 +64,7 @@
   --color-tag-booked-bg: #f3e6fa;
   --color-tag-all-bg: #ffe5cf;
   --color-tag-cargo-received-bg: #eaecff;
-  --color-tag-departure-bg: #ecf7ff;
+  --color-tag-departure-bg: #0090e9;
   --color-tag-arrived-bg: #e7faf8;
   --color-tag-completed-bg: #e8fbe4;
   --color-tag-Departed-bg: #0090e9;

src/views/Booking/src/BookingView.vue

@@ -26,11 +26,11 @@ const handleClose = (tag: any) => {
   if (tag.includes('Transport')) {
     delete searchTableQeury.transport_mode
   } else if (tag.includes('ETD')) {
-    delete searchTableQeury.m_etd_start
-    delete searchTableQeury.m_etd_end
+    delete searchTableQeury.f_etd_start
+    delete searchTableQeury.f_etd_end
   } else if (tag.includes('ETA')) {
-    delete searchTableQeury.f_eta_start
-    delete searchTableQeury.f_eta_end
+    delete searchTableQeury.m_eta_start
+    delete searchTableQeury.m_eta_end
   } else if (tag.includes('Creation')) {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
@@ -85,6 +85,14 @@ const DateRangeSearch = (val: any, value: any) => {
     let str = `${key}:${val[key]}`
     filterData.daterangeData.push(str)
   }
+  if (Object.keys(value).length == 0) {
+    delete searchTableQeury.f_etd_start
+    delete searchTableQeury.f_etd_end
+    delete searchTableQeury.m_eta_start
+    delete searchTableQeury.m_eta_end
+    delete searchTableQeury.created_time_start
+    delete searchTableQeury.created_time_end
+  }
   for (const key in value) {
     if (key == 'ETD') {
       searchTableQeury.f_etd_start = value[key].data[0]
@@ -233,34 +241,6 @@ const SearchInput = () => {
   BookingTable_ref.value.searchTableData(searchTableQeury)
   getbookingdata()
 }
-const propsPartyTypeoptions = ref([
-  {
-    value: 'Origin Agent',
-    label: 'Origin Agent'
-  },
-  {
-    value: 'Destination Agent',
-    label: 'Destination Agent'
-  },
-  {
-    value: 'Sales',
-    label: 'Sales'
-  }
-])
-const propsPlaceTypeoptions = ref([
-  {
-    value: 'Place of Receipt',
-    label: 'Place of Receipt'
-  },
-  {
-    value: 'Port of Loading',
-    label: 'Port of Loading'
-  },
-  {
-    value: 'Place of delivery',
-    label: 'Place of delivery'
-  }
-])
 </script>
 
 <template>
@@ -293,10 +273,9 @@ const propsPlaceTypeoptions = ref([
       ></DateRange>
       <MoreFilters
         :isShipment="false"
+        :searchTableQeury="searchTableQeury"
         @MoreFiltersSearch="MoreFiltersSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"
-        :propsPartyTypeoptions="propsPartyTypeoptions"
-        :propsPlaceTypeoptions="propsPlaceTypeoptions"
       ></MoreFilters>
       <el-button class="el-button--dark" style="margin-left: 8px" @click="SearchInput"
         >Search</el-button

src/views/Dashboard/src/DashboardView.vue

@@ -215,11 +215,13 @@ const GetPendingArrivalEcharts = () => {
 const containerObj = reactive({
   bar_title: '',
   barList: [],
-  barSeries: [{ name: '' }],
+  barSeries: [],
   Max: 0,
   interval: 0
 })
+const containerType = ref([])
 const GetContainerCountEcharts = (val: any) => {
+  containerType.value = []
   $api
     .GetContainerCountEcharts({
       b_date: '',
@@ -233,6 +235,10 @@ const GetContainerCountEcharts = (val: any) => {
         containerObj.barSeries = res.data.ContainerCounSeries
         containerObj.Max = res.data.Max
         containerObj.interval = res.data.interval
+        for (let i = 0; i < res.data.ContainerCounSeries.length; i++) {
+          containerType.value.push(res.data.ContainerCounSeries[i].name)
+        }
+        containerType.value.push('All')
       }
     })
 }
@@ -621,7 +627,11 @@ const ClickParams = (val: any) => {
         </el-popover>
         <el-popover width="142" :visible="SaveVisible">
           <template #reference>
-            <el-button class="el-button--default" @click="SaveVisible = !SaveVisible">
+            <el-button
+              class="el-button--default"
+              @click="SaveVisible = !SaveVisible"
+              @blur="SaveFilters"
+            >
               <span class="iconfont_icon">
                 <svg class="iconfont" aria-hidden="true">
                   <use xlink:href="#icon-icon_save_b"></use>
@@ -893,10 +903,10 @@ const ClickParams = (val: any) => {
                       @change="changeType"
                     >
                       <el-option
-                        v-for="item in containerObj.barSeries"
-                        :key="item.name"
-                        :label="item.name"
-                        :value="item.name"
+                        v-for="item in containerType"
+                        :key="item"
+                        :label="item"
+                        :value="item"
                       />
                     </el-select>
                   </div>
@@ -904,7 +914,7 @@ const ClickParams = (val: any) => {
               </template>
               <template #content>
                 <BarChart
-                  ref="seller_chart"
+                  ref="seller_chart_Container_count"
                   :BarData="containerObj"
                   style="height: 300px"
                   :barHeight="{ height: '300px' }"
@@ -919,7 +929,7 @@ const ClickParams = (val: any) => {
           >
             <VBox_Dashboard @changeCancel="changeCancel(item.id)" style="width: 100%">
               <template #header>
-                <div class="Title_flex" style="align-items: start">
+                <div class="Title_flex">
                   <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleTabClick">
                     <el-tab-pane :label="item.title1" name="first"></el-tab-pane>
                     <el-tab-pane :label="item.title2" name="second"></el-tab-pane>
@@ -1268,4 +1278,7 @@ const ClickParams = (val: any) => {
   background-color: white;
   padding-bottom: 40px;
 }
+:deep(.el-tabs__header) {
+  height: 48px;
+}
 </style>

src/views/Dashboard/src/components/BarChart.vue

@@ -15,6 +15,7 @@ watch(
     initOption.title.text = bar_title.value
     initOption.xAxis.data = barName.value
     initOption.series = bar_series.value
+    console.log(initOption.series)
     initOption.legend.data = Name.value
     initOption.yAxis.max = Max.value
     initOption.yAxis.interval = interval.value
@@ -162,21 +163,20 @@ const initOption = reactive({
     max: Max.value, // 最大值
     interval: interval.value // 刻度
   },
-  series: bar_series.value,
   legend: {
     data: Name.value,
     top: '3%',
     itemGap: 30,
     left: '40%',
-    itemHeight: 8.5, //修改icon图形大小
-    itemWidth: 8.5, //修改icon图形大小
+    itemHeight: 8, //修改icon图形大小
+    itemWidth: 8, //修改icon图形大小
     textStyle: {
       fontSize: 12,
       fontFamily: 'Lato-Light',
       color: '#646A73'
     }
   },
-
+  series: bar_series.value,
   toolbox: {
     iconStyle: {
       borderColor: '#2B2F36'

src/views/Dashboard/src/components/RecentStatus.vue

@@ -1,4 +1,7 @@
 <script lang="ts" setup>
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
 interface RecentItem {
   Title: string
   name: string
@@ -18,6 +21,16 @@ interface Props {
   RecentStatusList: RecentItem[]
 }
 const props = withDefaults(defineProps<Props>(), {})
+const RouteToDetail = (val: any) => {
+  console.log(val)
+  router.push({
+    path: '/tracking/detail',
+    query: {
+      a: val.a,
+      _schemas: val._schemas
+    }
+  })
+}
 </script>
 <template>
   <div class="recent_route" v-for="(item, index) in props.RecentStatusList" :key="index">
@@ -31,7 +44,7 @@ const props = withDefaults(defineProps<Props>(), {})
             </svg>
           </span>
         </div>
-        <div class="recent-title">{{ item.Title }}</div>
+        <div class="recent-title" @click="RouteToDetail(item)">{{ item.Title }}</div>
         <div class="recent-name">{{ item.name }}</div>
         <div class="recent-booking">
           Booking No.:
@@ -147,6 +160,10 @@ const props = withDefaults(defineProps<Props>(), {})
   font-weight: 700;
   font-size: var(--font-size-5);
   margin: 0 4px 0 8px;
+  cursor: pointer;
+}
+.recent-title:hover {
+  color: var(--color-theme);
 }
 .recent-name {
   border: 1px solid var(--color-border-2);

src/views/Dashboard/src/components/ScoringSystem.vue

@@ -491,7 +491,7 @@ const submitDetails = (val: any) => {
 }
 .buttom {
   display: flex;
-  width: 540px;
+  width: 592px;
   align-items: center;
   margin-top: 8px;
   justify-content: space-between;

src/views/Dashboard/src/components/TopMap.vue

@@ -49,46 +49,48 @@ onMounted(() => {
 
 <style lang="scss" >
 @import 'leaflet/dist/leaflet.css';
-.leaflet-popup-content-wrapper {
-  width: 58px !important;
-  height: 58px;
-  background: transparent !important;
-  box-shadow: none !important;
-}
-.leaflet-popup-tip {
-  width: 0;
-  height: 0;
-  background: transparent !important;
-  box-shadow: none !important;
-  color: transparent;
-}
-.leaflet-popup-tip-container {
-  width: 0;
-  height: 0;
-  color: transparent;
-}
-.leaflet-popup-content {
-  width: 58px;
-  height: 58px;
-  margin: 0;
-  .popup-content {
+#map {
+  .leaflet-popup-content-wrapper {
+    width: 58px !important;
+    height: 58px;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+  .leaflet-popup-tip {
+    width: 0;
+    height: 0;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: transparent;
+  }
+  .leaflet-popup-tip-container {
+    width: 0;
+    height: 0;
+    color: transparent;
+  }
+  .leaflet-popup-content {
     width: 58px;
     height: 58px;
-    border-radius: 50%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    p {
-      margin: 0;
-      text-align: center;
-    }
-    .popup-label {
-      font-size: 10px;
-      font-weight: 400;
-    }
-    .popup-value {
-      font-size: 12px;
-      font-weight: 700;
+    margin: 0;
+    .popup-content {
+      width: 58px;
+      height: 58px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      p {
+        margin: 0;
+        text-align: center;
+      }
+      .popup-label {
+        font-size: 10px;
+        font-weight: 400;
+      }
+      .popup-value {
+        font-size: 12px;
+        font-weight: 700;
+      }
     }
   }
 }

src/views/Tracking/src/TrackingView.vue

@@ -30,8 +30,8 @@ const handleClose = (tag: any) => {
     delete searchTableQeury.etd_start
     delete searchTableQeury.etd_end
   } else if (tag.includes('ETA')) {
-    delete searchTableQeury.f_eta_start
-    delete searchTableQeury.f_eta_end
+    delete searchTableQeury.eta_start
+    delete searchTableQeury.eta_end
   } else if (tag.includes('Creation')) {
     delete searchTableQeury.created_time_start
     delete searchTableQeury.created_time_end
@@ -105,6 +105,14 @@ const DateRangeSearch = (val: any, value: any) => {
     let str = `${key}:${val[key]}`
     filterData.daterangeData.push(str)
   }
+  if (Object.keys(value).length == 0) {
+    delete searchTableQeury.etd_start
+    delete searchTableQeury.etd_end
+    delete searchTableQeury.eta_start
+    delete searchTableQeury.eta_end
+    delete searchTableQeury.created_time_start
+    delete searchTableQeury.created_time_end
+  }
   for (const key in value) {
     if (key == 'ETD') {
       searchTableQeury.etd_start = value[key].data[0]
@@ -321,6 +329,7 @@ const SearchInput = () => {
       ></DateRange>
       <MoreFilters
         :isShipment="true"
+        :searchTableQeury="searchTableQeury"
         @MoreFiltersSearch="MoreFiltersSearch"
         @clearMoreFiltersTags="clearMoreFiltersTags"
       ></MoreFilters>
@@ -359,13 +368,13 @@ const SearchInput = () => {
   border-width: 1px 0 1px 0;
   font-size: var(--font-size-6);
   font-weight: 700;
-  padding-left: 23.32px;
+  padding: 0 24px;
   align-items: center;
 }
 .display {
   border: 1px solid var(--color-border);
   border-width: 0 0 1px 0;
-  padding-left: 23.52px;
+  padding: 0 24px;
 }
 .heaer_top {
   margin-top: 6.57px;

src/views/Tracking/src/components/TrackingTable/src/TrackingTable.vue

@@ -447,7 +447,7 @@ defineExpose({
 </script>
 
 <template>
-  <div style="padding: 0px 20px" class="tracking-table">
+  <div style="padding: 0px 24px" class="tracking-table">
     <div class="table-tools">
       <div class="left-total-records">{{ selectedNumber }} Selected</div>
       <div class="right-tools-btn">