@things-factory/operato-wms 3.7.2 → 3.7.7

package/client/pages/outbound/picking-product.js

@@ -3,6 +3,7 @@ import '@things-factory/grist-ui'
 import './outbound-reusable-pallet'
 import './picking-replacement-popup'
 import './show-my-worksheet-list-popup'
+import './serial-number-popup'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
@@ -11,13 +12,13 @@ import { connect } from 'pwa-helpers/connect-mixin.js'
 import { MultiColumnFormStyles, SingleColumnFormStyles } from '@things-factory/form-ui'
 import { i18next, localize } from '@things-factory/i18n-base'
 import { openPopup } from '@things-factory/layout-base'
-import { client, CustomAlert, navigate, PageView, store } from '@things-factory/shell'
+import { client, CustomAlert, gqlContext, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 import { isMobileDevice } from '@things-factory/utils'
 
 import { fetchLocationSortingRule } from '../../fetch-location-sorting-rule'
 import { fetchSettingRule } from '../../fetch-setting-value'
-import { BATCH_PICKING, LOCATION_SORTING_RULE, PICKING, WORKSHEET_STATUS } from '../constants'
+import { BATCH_PICKING, LOCATION_SORTING_RULE, PICKING } from '../constants'
 
 const PICKING_TYPES = { PICKING, BATCH_PICKING }
 class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
@@ -27,22 +28,24 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       worksheetNo: String,
       config: Object,
       data: Object,
+      isWholePicking: Boolean,
+      refPickingType: String,
+      locationNameSplit: Array,
+      locations: Array,
+      orderNo: String,
       _productName: String,
       _productSku: String,
-      _selectedTaskStatus: String,
+      _isRequireSerialNumberScanning: Boolean,
+      // _selectedTaskStatus: String,
       _reusablePalletList: Object,
       _hasBinPicking: Boolean,
       _isCartonLabel: Boolean,
       _enableProductScanning: Boolean,
-      isWholePicking: Boolean,
-      isReplacement: Boolean,
-      refPickingType: String,
-      crossDocking: Boolean,
-      incompleteLocationName: Boolean,
-      locationNameSplit: Array,
-      locations: Array,
-      orderNo: String,
-      _isExecuting: Boolean
+      _isReplacement: Boolean,
+      _crossDocking: Boolean,
+      _incompleteLocationName: Boolean,
+      _isExecuting: Boolean,
+      _currentBinLocation: String
     }
   }
 
@@ -105,7 +108,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           padding-top: var(--grist-title-with-grid-padding);
         }
 
-        div.reusable_pallet {
+        div.full_width {
           grid-column: span 12 / auto;
           display: inline-flex;
           align-items: center;
@@ -119,41 +122,23 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           :host {
             display: block;
           }
-        }
-      `
-    ]
-  }
-
-  get context() {
-    var actions = []
-
-    actions.push({
-      title: i18next.t('button.my_worksheet_list'),
-      action: this.showWorksheetList.bind(this),
-      ...CommonButtonStyles.inspect
-    })
-
-    if ((this.releaseGoodNo && this.completed) || (this.taskNo && this.completed)) {
-      actions.push({
-        title: i18next.t('button.complete'),
-        action: this._complete.bind(this),
-        ...CommonButtonStyles.submit
-      })
-    }
 
-    return {
-      title: i18next.t('title.picking'),
-      help: 'operato-wms/outbound/picking-product',
-      actions
-    }
-  }
+          ////// For Small Mobile View temporarily disabled
+          // .grist {
+          //   display: block;
+          //   flex: none;
+          // }
 
-  get releaseGoodNoInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=releaseGoodNo]').shadowRoot.querySelector('input')
-  }
+          // data-grist {
+          //   max-width: 90%;
+          // }
 
-  get taskNoInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=taskNo]').shadowRoot.querySelector('input')
+          // .left-column {
+          //   max-height: 200px;
+          // }
+        }
+      `
+    ]
   }
 
   get infoForm() {
@@ -168,26 +153,40 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('data-grist')
   }
 
+  get releaseGoodNoInput() {
+    return this.shadowRoot
+      .querySelector('barcode-scanable-input[name=releaseGoodNo]')
+      ?.shadowRoot?.querySelector('input')
+  }
+
+  get taskNoInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=taskNo]')?.shadowRoot.querySelector('input')
+  }
+
+  get binLocationInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=binLocation]')?.shadowRoot.querySelector('input')
+  }
+
   get palletInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=palletId]').shadowRoot.querySelector('input')
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=palletId]')?.shadowRoot.querySelector('input')
   }
 
   get cartonInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=cartonId]').shadowRoot.querySelector('input')
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=cartonId]')?.shadowRoot.querySelector('input')
   }
 
   get locationInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=locationName]').shadowRoot.querySelector('input')
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=locationName]')?.shadowRoot.querySelector('input')
   }
 
   get productBarcodeInput() {
     return this.shadowRoot
-      .querySelector('barcode-scanable-input[name=productBarcode]')
-      .shadowRoot.querySelector('input')
+      ?.querySelector('barcode-scanable-input[name=productBarcode]')
+      ?.shadowRoot.querySelector('input')
   }
 
-  get binLocationInput() {
-    return this.shadowRoot.querySelector('barcode-scanable-input[name=binLocation]').shadowRoot.querySelector('input')
+  get serialInput() {
+    return this.shadowRoot.querySelector('barcode-scanable-input[name=serialNumber]')?.shadowRoot.querySelector('input')
   }
 
   get newLocationInput() {
@@ -202,51 +201,123 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     return this.shadowRoot.querySelector('input[name=releaseProgress]')
   }
 
-  get scannable() {
-    if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-      return this._selectedTaskStatus && this._selectedTaskStatus === WORKSHEET_STATUS.EXECUTING.value
-    } else {
-      return (
-        this._selectedOrderInventory &&
-        this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty
-      )
-    }
-  }
-
-  get completed() {
-    return this.data.records.every(record => record.completed)
-  }
-
   _focusOnNewLocationInput() {
-    setTimeout(() => this.newLocationInput.focus(), 100)
+    setTimeout(() => this.newLocationInput.focus(), 50)
   }
 
   _focusOnLocationNameInput() {
-    setTimeout(() => this.locationInput.focus(), 100)
+    setTimeout(() => this.locationInput.focus(), 50)
   }
 
   _focusOnReleaseGoodNoInput() {
-    setTimeout(() => this.releaseGoodNoInput.focus(), 100)
+    setTimeout(() => this.releaseGoodNoInput.focus(), 50)
   }
 
   _focusOnTaskNoInput() {
-    setTimeout(() => this.taskNoInput.focus(), 100)
+    setTimeout(() => this.taskNoInput.focus(), 50)
+  }
+
+  _focusOnBinLocationInput() {
+    setTimeout(() => this.binLocationInput.focus(), 50)
   }
 
   _focusOnLotNoInput() {
-    setTimeout(() => this.palletInput.focus(), 100)
+    if (this.palletInput) {
+      setTimeout(() => this.palletInput.focus(), 50)
+    }
   }
 
   _focusOnCartonNoInput() {
-    setTimeout(() => this.cartonInput.focus(), 100)
+    if (this.cartonInput) {
+      setTimeout(() => this.cartonInput.focus(), 50)
+    }
   }
 
   _focusOnProductBarcodeInput() {
-    setTimeout(() => this.productBarcodeInput.focus(), 100)
+    if (this._enableProductScanning && this?.productBarcodeInput) {
+      setTimeout(() => this.productBarcodeInput.focus(), 50)
+    }
+  }
+
+  _focusOnSerialInput() {
+    if (this.serialInput) {
+      setTimeout(() => this.serialInput.focus(), 50)
+    }
   }
 
   _focusOnReleaseQtyInput() {
-    setTimeout(() => this.releaseQtyInput.focus(), 100)
+    if (this.releaseQtyInput) {
+      setTimeout(() => this.releaseQtyInput.focus(), 50)
+    }
+  }
+
+  get context() {
+    var actions = []
+    if (this._hasBinPicking) {
+      actions.push({
+        title: i18next.t('button.get_task'),
+        action: this.getTask.bind(this),
+        ...CommonButtonStyles.assignment
+      })
+    }
+
+    actions.push({
+      title: i18next.t('button.my_worksheet_list'),
+      action: this.showWorksheetList.bind(this),
+      ...CommonButtonStyles.inspect
+    })
+
+    if ((this.releaseGoodNo && this.completed) || (this.taskNo && this.completed)) {
+      actions.push({
+        title: i18next.t('button.complete'),
+        action: this.complete.bind(this),
+        ...CommonButtonStyles.submit
+      })
+    }
+
+    return {
+      title: i18next.t('title.picking'),
+      help: 'operato-wms/outbound/picking-product',
+      actions
+    }
+  }
+
+  get scannable() {
+    let result =
+      this._selectedOrderInventory && this._selectedOrderInventory.pickedQty != this._selectedOrderInventory.releaseQty
+    return result
+  }
+
+  get completed() {
+    return this.data.records.every(record => record.completed)
+  }
+
+  constructor() {
+    super()
+
+    this.data = { records: [] }
+    this._reusablePalletList = { records: [] }
+
+    this.taskNo = ''
+    this.releaseGoodNo = ''
+    this._selectedOrderInventory = null
+    this.locationSortingRules = []
+    this.locationNameSplit = []
+
+    this._productName = ''
+
+    this.refPickingType = PICKING_TYPES.PICKING.value
+
+    this._crossDocking = false
+    this._isReplacement = false
+    this._hasBinPicking = false
+    this._isCartonLabel = false
+    this._enableProductScanning = false
+    this._isRequireSerialNumberScanning = false
+    this._incompleteLocationName = false
+
+    /* A flag to indicate either PICKING process is executing */
+    this._isExecuting = false
   }
 
   render() {
@@ -256,52 +327,40 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           <legend>${i18next.t('title.scan_area')}</legend>
           <label>${i18next.t('label.picking_type')}</label>
           <select name="pickingType" @change="${e => this.pickingTypeChangeHandler(e.currentTarget.value)}">
-            ${Object.keys(PICKING_TYPES).map(key =>
-              this.refPickingType === PICKING_TYPES[key].value
-                ? html`
-                    <option value="${PICKING_TYPES[key].value}" selected>
-                      ${i18next.t(`label.${PICKING_TYPES[key].name}`)}
-                    </option>
-                  `
-                : html`
-                    <option value="${PICKING_TYPES[key].value}">
-                      ${i18next.t(`label.${PICKING_TYPES[key].name}`)}
-                    </option>
-                  `
+            ${Object.keys(PICKING_TYPES).map(
+              key =>
+                html`
+                  <option
+                    value="${PICKING_TYPES[key].value}"
+                    ?selected=${this.refPickingType === PICKING_TYPES[key].value}
+                  >
+                    ${i18next.t(`label.${PICKING_TYPES[key].name}`)}
+                  </option>
+                `
             )}
           </select>
 
-          ${this.refPickingType === PICKING_TYPES.PICKING.value
-            ? html`
-                <label>${i18next.t('label.release_good_no')}</label>
-                <barcode-scanable-input
-                  name="releaseGoodNo"
-                  custom-input
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      if (this.releaseGoodNoInput.value) {
-                        this._fetchInventories(this.releaseGoodNoInput.value)
-                        this._fetchPalletsHandler(this.releaseGoodNoInput.value)
-                      }
-                    }
-                  }}"
-                ></barcode-scanable-input>
-              `
-            : html` <label>${i18next.t('label.task_no')}</label>
-                <barcode-scanable-input
-                  name="taskNo"
-                  custom-input
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      if (this.taskNoInput.value) {
-                        this._fetchInventories(this.taskNoInput.value)
-                        this._fetchPalletsHandler(this.taskNoInput.value)
-                      }
-                    }
-                  }}"
-                ></barcode-scanable-input>`}
+          <label>
+            ${this.refPickingType === PICKING_TYPES.PICKING.value
+              ? i18next.t('label.release_good_no')
+              : i18next.t('label.task_no')}
+          </label>
+          <barcode-scanable-input
+            name=${this.refPickingType === PICKING_TYPES.PICKING.value ? 'releaseGoodNo' : 'taskNo'}
+            custom-input
+            @keypress="${async e => {
+              if (e.keyCode === 13) {
+                e.preventDefault()
+                this._currentBinLocation = null
+                if (this.releaseGoodNoInput.value) {
+                  this.releaseGoodNo = this.releaseGoodNoInput.value
+                  await this.fetchAll(this.releaseGoodNo)
+                  this.completeHandler()
+                }
+              }
+            }}"
+          >
+          </barcode-scanable-input>
         </fieldset>
 
         <fieldset>
@@ -313,7 +372,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
                 <label>${i18next.t('label.ref_no_2')}</label>
                 <input name="refNo2" readonly />`
-            : html`<legend>${`${i18next.t('title.task_no')}: ${this.taskNo}`}</legend>`}
+            : html` <legend>${`${i18next.t('title.task_no')}: ${this.taskNo}`}</legend>`}
 
           <label>${i18next.t('label.company')}</label>
           <input name="bizplaceName" readonly />
@@ -321,9 +380,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           <label>${i18next.t('label.started_at')}</label>
           <input name="startedAt" type="datetime-local" readonly />
 
-          ${this.crossDocking
+          ${this._crossDocking
             ? html`
-                <input name="crossDocking" type="checkbox" .checked="${this.crossDocking}" disabled />
+                <input name="_crossDocking" type="checkbox" .checked="${this._crossDocking}" disabled />
                 <label>${i18next.t('label.cross_docking')}</label>
               `
             : ''}
@@ -341,7 +400,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         </div>
 
         <div class="right-column">
-          <form id="input-form" class="single-column-form" @keypress="${this._picking.bind(this)}">
+          <form id="input-form" class="single-column-form" @keypress="${this.picking.bind(this)}">
             <fieldset>
               <legend>${i18next.t('label.product')}: ${this._productName}</legend>
 
@@ -368,11 +427,11 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               <input name="releaseProgress" readonly />
             </fieldset>
 
-            ${this.releaseGoodNo
+            ${this.releaseGoodNo || ''
               ? html`
                   <fieldset>
                     <legend>${i18next.t('title.reusable_pallet')}</legend>
-                    <div class="reusable_pallet" @click="${this._openPalletOutbound.bind(this)}">
+                    <div class="full_width" @click="${this.openPalletOutbound.bind(this)}">
                       <mwc-icon>apps</mwc-icon>Plastic Pallets
                     </div>
                   </fieldset>
@@ -382,6 +441,21 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               ? html`
                   <fieldset>
                     <legend>${i18next.t('title.input_section')}</legend>
+                    ${this._hasBinPicking
+                      ? html`
+                          <label>${i18next.t('label.bin_location')}</label>
+                          <barcode-scanable-input
+                            name="binLocation"
+                            custom-input
+                            @keypress="${e => {
+                              if (e.keyCode === 13) {
+                                e.preventDefault()
+                                this._currentBinLocation = this.binLocationInput.value
+                              }
+                            }}"
+                          ></barcode-scanable-input>
+                        `
+                      : ''}
                     ${this._isCartonLabel
                       ? html`
                           <label>${i18next.t('label.carton_id')}</label>
@@ -397,26 +471,28 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                           <barcode-scanable-input name="productBarcode" custom-input></barcode-scanable-input>
                         `
                       : html`
-                          <label>${i18next.t('label.picked_qty')}</label>
-                          <input type="number" min="1" name="confirmedQty" />
+                          ${this._isRequireSerialNumberScanning
+                            ? ''
+                            : html`
+                                <label>${i18next.t('label.picked_qty')}</label>
+                                <input type="number" min="1" name="confirmedQty" />
+                              `}
                         `}
-                    ${this._hasBinPicking
-                      ? html`
-                          <label>${i18next.t('label.bin_location')}</label>
-                          <barcode-scanable-input name="binLocation" custom-input></barcode-scanable-input>
-                        `
-                      : ''}
-                    ${this.isWholePicking || this.crossDocking || this._isCartonLabel || this._enableProductScanning
+                    ${this.isWholePicking ||
+                    this._crossDocking ||
+                    this._isCartonLabel ||
+                    this._enableProductScanning ||
+                    this._isRequireSerialNumberScanning
                       ? ''
                       : html`
-                          ${this.incompleteLocationName
+                          ${this._incompleteLocationName
                             ? ''
                             : html`
                                 <label>${i18next.t('label.return_location')}</label>
                                 <barcode-scanable-input name="locationName" custom-input></barcode-scanable-input>
                               `}
                           <select
-                            ?hidden="${!this.incompleteLocationName}"
+                            ?hidden="${!this._incompleteLocationName}"
                             name="newLocationCode"
                             @change="${e => (this.locationInput.value = e.currentTarget.value)}"
                           >
@@ -432,44 +508,32 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                             )}
                           </select>
                         `}
+                    ${this._isRequireSerialNumberScanning
+                      ? html`
+                          <label>${i18next.t('label.serial_number')}</label>
+                          <barcode-scanable-input name="serialNumber" custom-input></barcode-scanable-input>
+                        `
+                      : ``}
                   </fieldset>
                 `
               : ''}
+            ${this._selectedOrderInventory && this._isRequireSerialNumberScanning
+              ? html`
+                  <fieldset>
+                    <fieldset>
+                      <div class="full_width" @click="${this.openSerialNumberPopup.bind(this)}">
+                        <mwc-icon>list</mwc-icon>${i18next.t('label.serial_number_list')}
+                      </div>
+                    </fieldset>
+                  </fieldset>
+                `
+              : ``}
           </form>
         </div>
       </div>
     `
   }
 
-  constructor() {
-    super()
-    this.data = { records: [] }
-    this._productName = ''
-    this.releaseGoodNo = ''
-    this.taskNo = ''
-    this._selectedOrderInventory = null
-    this._selectedTaskStatus = null
-    this._reusablePalletList = { records: [] }
-    this.locationSortingRules = []
-    this.refPickingType = PICKING_TYPES.PICKING.value
-    this.crossDocking = false
-    this.isReplacement = false
-    this._hasBinPicking = false
-    this._isCartonLabel = false
-    this._enableProductScanning = false
-    this.incompleteLocationName = false
-    this.locationNameSplit = []
-
-    /* A flag to indicate either PICKING process is executing */
-    this._isExecuting = false
-  }
-
-  updated(changedProps) {
-    if (changedProps.has('_selectedTaskStatus') && this._selectedTaskStatus) {
-      this.updateContext()
-    }
-  }
-
   pageUpdated(changes, lifecycle) {
     if (this.active) {
       this.orderNo = lifecycle.params?.orderNo || null
@@ -479,35 +543,55 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async pageInitialized() {
+    const [enableBinPickingTask, locationSortingTask] = [
+      fetchSettingRule('enable-bin-picking'),
+      fetchLocationSortingRule(LOCATION_SORTING_RULE.PICKING_PRODUCT.value)
+    ]
+
     this.config = {
       rows: {
         appendable: false,
+        classifier: (record, rowIndex) => {
+          return {
+            emphasized: record.completed == true
+          }
+        },
         handlers: {
           click: async (columns, data, column, record, rowIndex) => {
-            if (data.records.length && record) {
-              this._isExecuting = false
-              this._selectedOrderInventory = record
-              if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-                this._selectedTaskStatus = record.status
-              }
-              this._isCartonLabel = record.hasCartonLabel
-              this._productName = record.product?.name
-                ? `${record.product.sku + ' - ' + record.product.name} ${
-                    record.product?.description ? `(${record.product.description})` : ''
-                  }`
-                : ''
-              this.isWholePicking = this._selectedOrderInventory.releaseQty === this._selectedOrderInventory.qty
-              this.isReplacement = false
-
-              this._fillUpForm(this.inputForm, record)
-              await this.updateComplete
-              if (this.scannable) {
-                if (this._enableProductScanning) this.productBarcodeInput.value = ''
-                if (this._isCartonLabel) {
-                  this.cartonInput.value = ''
-                  this._focusOnCartonNoInput()
-                } else this._focusOnLotNoInput()
+            try {
+              this.grist.showSpinner()
+              if (data.records.length && record) {
+                this.inputForm.reset()
+                this._isReplacement = false
+
+                if (this.binLocationInput) this.binLocationInput.value = ''
+                if (this.productBarcodeInput) this.productBarcodeInput.value = ''
+                if (this.cartonInput) this.cartonInput.value = ''
+                if (this.palletInput) this.palletInput.value = ''
+                if (this.serialInput) this.serialInput.value = ''
+
+                this._selectedOrderInventory = record
+                await this.fetchInventories(this.releaseGoodNo)
+                let updatedRecords = this._selectedOrderInventory
+                if (updatedRecords.releaseQty === updatedRecords.pickedQty) {
+                  updatedRecords.status = 'DONE'
+                } else {
+                  updatedRecords.status = 'PICKING'
+                }
+
+                // this._isCartonLabel = updatedRecords.hasCartonLabel
+                // this._productName = updatedRecords.product?.name
+                //   ? `${updatedRecords.product.sku + ' - ' + updatedRecords.product.name} ${
+                //       updatedRecords.product?.description ? `(${updatedRecords.product.description})` : ''
+                //     }`
+                //   : ''
+                // this._isRequireSerialNumberScanning = updatedRecords?.product?.isRequireSerialNumberScanning
+                // this.isWholePicking = updatedRecords.releaseQty === updatedRecords.qty
               }
+            } catch (ex) {
+              console.log(ex)
+            } finally {
+              this.grist.hideSpinner()
             }
           }
         }
@@ -563,16 +647,18 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       ]
     }
 
-    this.locationSortingRules = await fetchLocationSortingRule(LOCATION_SORTING_RULE.PICKING_PRODUCT.value)
+    let data = [await locationSortingTask, await enableBinPickingTask]
+
+    this.locationSortingRules = await locationSortingTask
+    this._hasBinPicking = await enableBinPickingTask
   }
 
   autoFetchPickingTasks(orderNo) {
     this.releaseGoodNoInput.value = orderNo
-    this._fetchInventories(this.releaseGoodNoInput.value)
-    this._fetchPalletsHandler(this.releaseGoodNoInput.value)
+    this.fetchAll(this.releaseGoodNoInput.value)
   }
 
-  async _fetchInventories(pickingRefNo) {
+  async fetchInventories(pickingRefNo) {
     if (!pickingRefNo) return
 
     let response
@@ -583,6 +669,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             query pickingWorksheet($releaseGoodNo: String!, $locationSortingRules: [Sorting]) {
               pickingWorksheet(releaseGoodNo: $releaseGoodNo, locationSortingRules: $locationSortingRules) {
                 worksheetInfo {
+                  releaseGood {
+                    name
+                  }
                   bizplaceName
                   partnerDomainId
                   refNo
@@ -602,6 +691,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     sku
                     name
                     description
+                    isRequireSerialNumberScanning
                   }
                   qty
                   releaseQty
@@ -616,14 +706,24 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     name
                     description
                   }
+                  binLocation {
+                    name
+                    description
+                  }
                   relatedOrderInv {
+                    id
                     batchId
                     batchIdRef
                     packingType
+                    binLocation {
+                      id
+                      name
+                    }
                     product {
                       sku
                       name
                       description
+                      isRequireSerialNumberScanning
                     }
                   }
                 }
@@ -634,34 +734,42 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         })
 
         if (!response.errors) {
-          if (!this._selectedOrderInventory) this._clearView()
-          this.releaseGoodNo = pickingRefNo
+          if (!this._selectedOrderInventory) this.clearView()
+          this.releaseGoodNo = response.data.pickingWorksheet.worksheetInfo.releaseGood.name
           if (!response.data?.pickingWorksheet) return
 
           const { worksheetInfo, worksheetDetailInfos } = response.data.pickingWorksheet
-          this.crossDocking = worksheetInfo.releaseGood?.crossDocking
-          this._fillUpForm(this.infoForm, { ...worksheetInfo, crossDocking: this.crossDocking })
+          this._crossDocking = worksheetInfo.releaseGood?._crossDocking
+          this.fillUpForm(this.infoForm, { ...worksheetInfo, _crossDocking: this._crossDocking })
           this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+
           if (this._selectedOrderInventory) {
             const record = this.data.records.find(record => record.name === this._selectedOrderInventory.name)
+            this.updateSelectedItemProp(record)
+            await this.updateComplete
+            this.fillUpForm(this.inputForm, {
+              ...record,
+              binLocation: record?.binLocation ? record.binLocation : ''
+            })
+
             if (record.pickedQty == record.releaseQty) {
-              if (this._isCartonLabel && this.scannable) {
-                this.cartonInput.value = ''
-                this._focusOnCartonNoInput()
-              }
-              this._selectedOrderInventory = null
-              this._selectedTaskStatus = null
-              this.inputForm.reset()
+              if (this.cartonInput) this.cartonInput.value = ''
+              if (this.palletInput) this.palletInput.value = ''
+              // this.isWholePicking = true
             } else {
-              if (this._enableProductScanning) this._focusOnProductBarcodeInput()
-              this._fillUpForm(this.inputForm, record)
+              // pre-set bin location from last scan if none was set
+              if (
+                this._hasBinPicking &&
+                this.binLocationInput &&
+                (!this._currentBinLocation || this._currentBinLocation == '')
+              ) {
+                this._currentBinLocation = record?.binLocation ? record.binLocation : ''
+              }
+              this.focusOnInput()
             }
           }
-          this._completeHandler()
 
           this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
-
-          this._hasBinPicking = await fetchSettingRule('enable-bin-picking', worksheetInfo.partnerDomainId)
         }
         break
 
@@ -684,6 +792,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                     name
                     description
                     sku
+                    isRequireSerialNumberScanning
                   }
                   qty
                   releaseQty
@@ -716,49 +825,54 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
         })
 
         if (!response.errors) {
-          if (!this._selectedOrderInventory) this._clearView()
+          if (!this._selectedOrderInventory) this.clearView()
           this.taskNo = pickingRefNo
           if (!response.data?.batchPickingWorksheet) return
 
           const { worksheetInfo, worksheetDetailInfos } = response.data.batchPickingWorksheet
-          this._fillUpForm(this.infoForm, { ...worksheetInfo })
+          await this.updateComplete
+          this.fillUpForm(this.infoForm, { ...worksheetInfo })
           this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+
+          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
+
           if (this._selectedOrderInventory) {
             const record = this.data.records.find(
               record => record.product.sku === this._selectedOrderInventory.product.sku
             )
+
+            this.updateSelectedItemProp(record)
+
             if (record.pickedQty == record.releaseQty) {
               if (this._isCartonLabel) {
                 this.cartonInput.value = ''
                 this._focusOnCartonNoInput()
               }
-              this._selectedOrderInventory = null
               this.inputForm.reset()
             } else {
-              if (this._enableProductScanning) this._focusOnProductBarcodeInput()
-              this._fillUpForm(this.inputForm, record)
+              this._focusOnProductBarcodeInput()
+              this.fillUpForm(this.inputForm, record)
             }
           }
-          this._completeHandler()
-
-          this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
-
-          this._hasBinPicking = await fetchSettingRule('enable-bin-picking', worksheetInfo.partnerDomainId)
         }
         break
     }
+
+    this.updateContext()
   }
 
   formatWorksheetDetailInfos(wsdInfos) {
     return wsdInfos
       .map(record => {
-        record.completed = Boolean(record?.status)
-          ? record.status === WORKSHEET_STATUS.DONE.value
-          : record.pickedQty == record.releaseQty
+        if (record.pickedQty == record.releaseQty) {
+          record.completed = true
+        } else {
+          record.completed = false
+        }
         record.locationName = record?.location?.name
         record.product = record?.relatedOrderInv && record?.relatedOrderInv?.product
 
-        if (this.crossDocking) {
+        if (this._crossDocking) {
           record.batchId = record.relatedOrderInv.batchId
           record.packingType = record.relatedOrderInv.packingType
         }
@@ -779,7 +893,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       .sort((a, b) => a.completed - b.completed)
   }
 
-  async _fetchPalletsHandler(releaseGoodNo) {
+  async fetchPalletsHandler(releaseGoodNo) {
     const response = await client.query({
       query: gql`
         query pallets($filters: [Filter], $pagination: Pagination) {
@@ -813,21 +927,23 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  _clearView() {
+  clearView() {
     this.data = { records: [] }
     this.infoForm.reset()
     this.inputForm.reset()
     this._productName = ''
-    this.releaseGoodNo = ''
-    this.taskNo = ''
-    this.crossDocking = false
+    this._isRequireSerialNumberScanning = false
+    this.releaseGoodNo = null
+    this.taskNo = null
+    this._crossDocking = false
     this._selectedOrderInventory = null
-    this._selectedTaskStatus = null
-    this.incompleteLocationName = false
+    // this._selectedTaskStatus = null
+    this._incompleteLocationName = false
+    this._isExecuting = false
   }
 
-  _fillUpForm(form, data) {
-    this.incompleteLocationName = false
+  fillUpForm(form, data) {
+    this._incompleteLocationName = false
     form.reset()
     for (let key in data) {
       Array.from(form.querySelectorAll('input')).forEach(field => {
@@ -849,46 +965,51 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async _picking(e) {
+  async picking(e) {
     if (e.keyCode === 13) {
       try {
-        await this._validatePicking()
+        await this.validatePicking()
 
-        let response
+        let response = {}
         if (this.crossDocking) {
           response = await this.pickCrossDocking()
         } else if (this._enableProductScanning || this._isCartonLabel) {
           response = await this.productBarcodePicking()
         } else {
-          if (this.isReplacement) {
+          if (this._isReplacement) {
             this.openPalletReplacementPopup()
+            return
           } else {
             response = await this.pickCommonPicking()
           }
         }
 
         if (!response.errors) {
-          this._isExecuting = false
-          if (this._enableProductScanning) this.productBarcodeInput.value = ''
+          if (this._isRequireSerialNumberScanning) this.serialInput.value = ''
+          else if (this._enableProductScanning && !this._isRequireSerialNumberScanning)
+            this.productBarcodeInput.value = ''
           else this.releaseQtyInput.value = ''
 
-          if (!this._isCartonLabel) {
+          if (!this._isCartonLabel && !this._isRequireSerialNumberScanning) {
             this.palletInput.value = ''
-            this._selectedTaskStatus = null
+            // this._selectedTaskStatus = null
             this._selectedOrderInventory = null
           }
 
-          if (!this.isWholePicking && !this.crossDocking && !this._isCartonLabel) this.locationInput.value = ''
+          if (!this.isWholePicking && !this._crossDocking && !this._isCartonLabel && this.locationInput)
+            this.locationInput.value = ''
           if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-            this._fetchInventories(this.releaseGoodNo)
+            this.fetchInventories(this.releaseGoodNo)
           } else {
-            this._fetchInventories(this.taskNo)
+            this.fetchInventories(this.taskNo)
           }
         }
 
         this.isReplacement = false
       } catch (e) {
         this._showToast(e)
+      } finally {
+        this._isExecuting = false
       }
     }
   }
@@ -902,15 +1023,16 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           .replacePalletId="${this.palletInput.value}"
           @completed="${() => {
             if (this.refPickingType === PICKING_TYPES.PICKING.value) {
-              this._fetchInventories(this.releaseGoodNoInput.value)
-              this._fetchPalletsHandler(this.releaseGoodNoInput.value)
+              this.fetchInventories(this.releaseGoodNoInput.value)
+              this.fetchPalletsHandler(this.releaseGoodNoInput.value)
             } else {
-              this._fetchInventories(this.taskNoInput.value)
-              this._fetchPalletsHandler(this.taskNoInput.value)
+              this.fetchInventories(this.taskNoInput.value)
+              this.fetchPalletsHandler(this.taskNoInput.value)
             }
-            this._selectedTaskStatus = null
+            // this._selectedTaskStatus = null
             this._selectedOrderInventory = null
             this.isReplacement = false
+            this._isExecuting = false
           }}"
         ></picking-replacement-popup>
       `,
@@ -922,8 +1044,34 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 
-  async pickCrossDocking() {
-    this._isExecuting = true
+  openSerialNumberPopup() {
+    openPopup(
+      html`
+        <serial-number-popup
+          .orderInventory="${this?._selectedOrderInventory?.relatedOrderInv}"
+          @completed="${() => {
+            // if (this.refPickingType === PICKING_TYPES.PICKING.value) {
+            //   this.fetchInventories(this.releaseGoodNoInput.value)
+            //   this.fetchPalletsHandler(this.releaseGoodNoInput.value)
+            // } else {
+            //   this.fetchInventories(this.taskNoInput.value)
+            //   this.fetchPalletsHandler(this.taskNoInput.value)
+            // }
+            // // this._selectedTaskStatus = null
+            // this._selectedOrderInventory = null
+            // this._isReplacement = false
+          }}"
+        ></serial-number-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.serial_number_list')
+      }
+    )
+  }
+
+  async pick_crossDocking() {
     return await client.mutate({
       mutation: gql`
         mutation crossDockPicking(
@@ -950,7 +1098,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async pickCommonPicking() {
-    const locationName = this.isWholePicking ? this._selectedOrderInventory.location.name : this.locationInput.value
+    const locationName =
+      this.isWholePicking || !this.locationInput ? this._selectedOrderInventory.location.name : this.locationInput.value
     // 1. Check whether location is changed
     if (this._selectedOrderInventory.location.name !== locationName) {
       this.locationNameSplit = this.locationInput.value.split('-')
@@ -959,27 +1108,26 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       const columnPortions = this.locationNameSplit[2].match(/[a-zA-Z0-9]+/g)
 
       if (this.locationNameSplit.length === 3) {
-        this.incompleteLocationName = true
-        this.locations = await this._fetchLocations(zonePortions[0], rowPortions[0], columnPortions[0])
+        this._incompleteLocationName = true
+        this.locations = await this.fetchLocations(zonePortions[0], rowPortions[0], columnPortions[0])
         this._focusOnNewLocationInput()
         throw new Error(i18next.t('text.please_select_the_location_again'))
       } else if (this.locationNameSplit.length === 4) {
-        const result = await CustomAlert({
+        let relocateConfirmation = await CustomAlert({
           title: i18next.t('title.relocate'),
           text: i18next.t('text.are_you_sure'),
           confirmButton: { text: i18next.t('button.relocate') },
           cancelButton: { text: i18next.t('button.cancel') }
         })
 
-        if (!result.value) {
-          this.incompleteLocationName = false
+        if (!relocateConfirmation.isConfirmed) {
+          this._incompleteLocationName = false
           this.locationNameSplit = []
-          return
+          return false
         }
       }
     }
 
-    this._isExecuting = true
     switch (this.refPickingType) {
       case PICKING_TYPES.PICKING.value:
         return await client.mutate({
@@ -990,6 +1138,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               $palletId: String
               $locationName: String!
               $releaseQty: Int!
+              $binLocation: String
+              $serialNumber: String
             ) {
               picking(
                 worksheetDetailName: $worksheetDetailName
@@ -997,6 +1147,8 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 palletId: $palletId
                 locationName: $locationName
                 releaseQty: $releaseQty
+                binLocation: $binLocation
+                serialNumber: $serialNumber
               )
             }
           `,
@@ -1005,7 +1157,9 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             worksheetType: this.refPickingType,
             palletId: this.palletInput.value.trim(),
             locationName,
-            releaseQty: parseInt(this.releaseQtyInput.value)
+            releaseQty: this._isRequireSerialNumberScanning ? 1 : parseInt(this.releaseQtyInput.value),
+            binLocation: this._hasBinPicking ? this.binLocationInput.value : null,
+            serialNumber: this._isRequireSerialNumberScanning ? this.serialInput.value : null
           }
         })
 
@@ -1043,7 +1197,6 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
   }
 
   async productBarcodePicking() {
-    this._isExecuting = true
     switch (this.refPickingType) {
       case PICKING_TYPES.PICKING.value:
         return await client.mutate({
@@ -1054,6 +1207,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
               $productBarcode: String!
               $cartonId: String!
               $binLocation: String
+              $serialNumber: String
             ) {
               scanProductPicking(
                 worksheetDetailName: $worksheetDetailName
@@ -1061,6 +1215,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
                 productBarcode: $productBarcode
                 cartonId: $cartonId
                 binLocation: $binLocation
+                serialNumber: $serialNumber
               )
             }
           `,
@@ -1069,6 +1224,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
             worksheetType: this.refPickingType,
             productBarcode: this.productBarcodeInput.value.trim(),
             cartonId: this.cartonInput.value.trim(),
+            serialNumber: this._isRequireSerialNumberScanning ? this.serialInput.value : null,
             binLocation: this._hasBinPicking ? this.binLocationInput.value : null
           }
         })
@@ -1111,10 +1267,12 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async _validatePicking() {
+  async validatePicking() {
     // validate for previous picking execution (multiple picking scanning)
     if (this._isExecuting) throw new Error(i18next.t('text.previous_picking_is_still_executing_please_wait'))
 
+    this._isExecuting = true
+
     // validate for order selection
     if (!this._selectedOrderInventory) throw new Error(i18next.t('text.target_is_not_selected'))
 
@@ -1128,39 +1286,41 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
           const isInProgressing = await this.checkProgressingPallet(this.palletInput.value)
           if (isInProgressing) throw new Error(i18next.t('text.pallet_is_in_progressing'))
 
-          this.isReplacement = await this.checkProductIdenticality(
+          this._isReplacement = await this.checkProductIdenticality(
             this._selectedOrderInventory.palletId,
             this.palletInput.value
           )
 
-          if (!this.isReplacement) {
+          if (!this._isReplacement) {
             this._focusOnLotNoInput()
             throw new Error(i18next.t('text.wrong_lot_id'))
-          } else {
-            this.openPalletReplacementPopup()
           }
         }
       }
 
       // Release qty existing
-      if (!this.isReplacement) {
-        if (!parseInt(this.releaseQtyInput?.value)) {
-          this._focusOnReleaseQtyInput()
-          throw new Error(i18next.t('text.release_qty_is_empty'))
-        }
+      if (!this._isReplacement) {
+        if (!this._isRequireSerialNumberScanning) {
+          if (!parseInt(this.releaseQtyInput?.value)) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.release_qty_is_empty'))
+          }
 
-        if (!this.releaseQtyInput.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
+          if (!this.releaseQtyInput.checkValidity()) throw new Error(i18next.t('text.release_qty_invalid'))
 
-        // typed qty should be matched with release qty.
-        if (parseInt(this.releaseQtyInput.value) !== this._selectedOrderInventory.releaseQty) {
-          this._focusOnReleaseQtyInput()
-          throw new Error(i18next.t('text.wrong_release_qty'))
+          // typed qty should be matched with release qty.
+          if (parseInt(this.releaseQtyInput.value) !== this._selectedOrderInventory.releaseQty) {
+            this._focusOnReleaseQtyInput()
+            throw new Error(i18next.t('text.wrong_release_qty'))
+          }
         }
 
         // location id existing
-        if (!this.isWholePicking && !this.locationInput.value) {
-          this._focusOnLocationNameInput()
-          throw new Error(i18next.t('text.location_id_is_empty'))
+        if (!this.isWholePicking && this.locationInput) {
+          if (!this.locationInput.value) {
+            this._focusOnLocationNameInput()
+            throw new Error(i18next.t('text.location_id_is_empty'))
+          }
         }
       }
     } else {
@@ -1171,13 +1331,13 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
       if (this._selectedOrderInventory.cartonId) {
         if (this._selectedOrderInventory.cartonId !== this.cartonInput.value) {
-          this.isReplacement = await this.checkCartonIdenticality(
+          this._isReplacement = await this.checkCartonIdenticality(
             this._selectedOrderInventory.cartonId,
             this._selectedOrderInventory.palletId,
             this.cartonInput.value
           )
 
-          if (!this.isReplacement) {
+          if (!this._isReplacement) {
             this.cartonInput.value = ''
             this._focusOnCartonNoInput()
             throw new Error(i18next.t('text.wrong_carton_id'))
@@ -1193,7 +1353,14 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       }
     }
 
-    if (this.crossDocking) {
+    if (this._isRequireSerialNumberScanning) {
+      if (!this.serialInput?.value) {
+        this._focusOnSerialInput()
+        throw new Error(i18next.t('text.empty_serial_number'))
+      }
+    }
+
+    if (this._crossDocking) {
       // typed qty should be smaller than release qty.
       if (parseInt(this.releaseQtyInput.value) > this._selectedOrderInventory.releaseQty) {
         this._focusOnReleaseQtyInput()
@@ -1247,7 +1414,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async _fetchLocations(zone, row, column) {
+  async fetchLocations(zone, row, column) {
     const sortings = [{ name: 'name', desc: false }]
     const filters = [
       { name: 'zone', operator: 'eq', value: zone },
@@ -1281,7 +1448,7 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  async _completeHandler() {
+  async completeHandler() {
     if (!this.data?.records?.length || this.data.records.some(record => !record.completed)) return
 
     this.updateContext()
@@ -1292,14 +1459,14 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
       cancelButton: { text: i18next.t('button.cancel') }
     })
 
-    if (!result.value) {
+    if (!result?.value) {
       return
     }
 
-    this._complete()
+    this.complete()
   }
 
-  async _complete() {
+  async complete() {
     let response
     switch (this.refPickingType) {
       case PICKING_TYPES.PICKING.value:
@@ -1326,27 +1493,29 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     }
 
     if (!response.errors) {
-      this._clearView()
+      this.clearView()
+      this._currentBinLocation = ''
+      this._selectedOrderInventory = null
       await CustomAlert({
         title: i18next.t('title.picking'),
         text: i18next.t('text.picking_is_completed'),
         confirmButton: { text: i18next.t('button.confirm') }
       })
 
-      this._clearView()
       if (!this.orderNo) {
         if (this.refPickingType === PICKING_TYPES.PICKING.value) {
           this.releaseGoodNoInput.value = ''
-          navigate('single_outbound_worksheets')
+          // navigate('single_outbound_worksheets')
         } else {
           this.taskNoInput.value = ''
-          navigate('merged_outbound_worksheets')
+          // navigate('merged_outbound_worksheets')
         }
       }
+      this.updateContext()
     }
   }
 
-  _openPalletOutbound() {
+  openPalletOutbound() {
     openPopup(
       html`
         <outbound-reusable-pallet
@@ -1367,12 +1536,110 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
 
   pickingTypeChangeHandler(currentType) {
     this.refPickingType = currentType
-    this._clearView()
+    this.clearView()
 
     if (this.refPickingType === PICKING_TYPES.PICKING.value) this._focusOnReleaseGoodNoInput()
     else this._focusOnTaskNoInput()
   }
 
+  async getTask() {
+    try {
+      const response = await client.mutate({
+        mutation: gql`
+          mutation fetchAndAssignPickingTask {
+            fetchAndAssignPickingTask {
+              worksheetInfo {
+                bizplaceName
+                partnerDomainId
+                refNo
+                refNo2
+                startedAt
+                releaseGood {
+                  name
+                  crossDocking
+                }
+              }
+              worksheetDetailInfos {
+                name
+                palletId
+                cartonId
+                batchId
+                batchIdRef
+                product {
+                  sku
+                  name
+                  description
+                }
+                qty
+                releaseQty
+                pickedQty
+                expirationDate
+                status
+                description
+                targetName
+                packingType
+                packingSize
+                location {
+                  name
+                  description
+                }
+                relatedOrderInv {
+                  batchId
+                  batchIdRef
+                  packingType
+                  product {
+                    sku
+                    name
+                    description
+                  }
+                }
+              }
+            }
+          }
+        `,
+        variables: {},
+        context: gqlContext()
+      })
+
+      if (!response.errors) {
+        if (!this._selectedOrderInventory) this.clearView()
+        // this.releaseGoodNo = pickingRefNo
+        if (!response.data?.fetchAndAssignPickingTask) return
+
+        const { worksheetInfo, worksheetDetailInfos } = response.data.fetchAndAssignPickingTask
+        this._crossDocking = worksheetInfo.releaseGood?._crossDocking
+        this.releaseGoodNo = worksheetInfo.releaseGood?.name
+        this.data = { records: this.formatWorksheetDetailInfos(worksheetDetailInfos) }
+
+        this._enableProductScanning = await fetchSettingRule('enable-product-scanning', worksheetInfo.partnerDomainId)
+
+        if (this._selectedOrderInventory) {
+          const record = this.data.records.find(record => record.name === this._selectedOrderInventory.name)
+          if (record.pickedQty == record.releaseQty) {
+            if (this._isCartonLabel && this.scannable) {
+              this.cartonInput.value = ''
+              this._focusOnCartonNoInput()
+            }
+            this._selectedOrderInventory = null
+            // this._selectedTaskStatus = null
+            this.inputForm.reset()
+          } else {
+            this._focusOnProductBarcodeInput()
+            this.fillUpForm(this.inputForm, record)
+          }
+        }
+        this.fillUpForm(this.infoForm, { ...worksheetInfo, _crossDocking: this._crossDocking })
+      }
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async fetchAll(orderNo) {
+    await this.fetchInventories(orderNo)
+    await this.fetchPalletsHandler(orderNo)
+  }
+
   showWorksheetList() {
     openPopup(html` <show-my-worksheet-list-popup></show-my-worksheet-list-popup> `, {
       backdrop: true,
@@ -1381,6 +1648,71 @@ class PickingProduct extends connect(store)(localize(i18next)(PageView)) {
     })
   }
 
+  // Prioritized input focus
+  focusOnInput() {
+    if (this.scannable) {
+      // set bin location value if already has value else focus on bin input if bin picking setting is active
+      if (this._currentBinLocation) {
+        this.binLocationInput.value = this._currentBinLocation
+      }
+
+      if (this._hasBinPicking && this.binLocationInput && this.binLocationInput.value == '') {
+        this._focusOnBinLocationInput()
+        return true
+      } else {
+        if (this._isCartonLabel) {
+          if (!this._enableProductScanning) this.cartonInput.value = ''
+
+          if (this.cartonInput.value == '') {
+            this._focusOnCartonNoInput()
+            return true
+          }
+        } else {
+          if (!this._enableProductScanning && !this._isRequireSerialNumberScanning) this.palletInput.value = ''
+
+          if (this.palletInput.value == '') {
+            this._focusOnLotNoInput()
+            return true
+          }
+        }
+      }
+
+      if (this._enableProductScanning && !this._isRequireSerialNumberScanning) {
+        this.productBarcodeInput.value = ''
+        this._focusOnProductBarcodeInput()
+        return true
+      }
+
+      if (this._isRequireSerialNumberScanning) {
+        this.serialInput.value = ''
+        this._focusOnSerialInput()
+        return true
+      }
+
+      return true
+    }
+  }
+
+  updateSelectedItemProp(selectedRecords) {
+    if (selectedRecords.releaseQty === selectedRecords.qty) {
+      this.isWholePicking = true
+      this._selectedOrderInventory = selectedRecords
+    } else {
+      this.isWholePicking = false
+      this._selectedOrderInventory = selectedRecords
+    }
+
+    this._isCartonLabel = selectedRecords.hasCartonLabel
+    this._productName = selectedRecords.product?.name
+      ? `${selectedRecords.product.sku + ' - ' + selectedRecords.product.name} ${
+          selectedRecords.product?.description ? `(${selectedRecords.product.description})` : ''
+        }`
+      : ''
+    this._isRequireSerialNumberScanning = selectedRecords?.product?.isRequireSerialNumberScanning
+
+    // this.isWholePicking = selectedRecords.releaseQty === selectedRecords.qty
+  }
+
   _showToast({ type, message }) {
     document.dispatchEvent(
       new CustomEvent('notify', {