@things-factory/operato-wms 4.3.767 → 4.3.770

package/client/pages/inbound/unload-product.js

@@ -4,25 +4,28 @@ import '../components/popup-note'
 import '../components/popup-reusable-pallet'
 import './palletizing-pallets-popup'
 import '../components/worksheet-information-popup'
+import '../components/unloading-worksheet-information-popup'
 import './unloaded-inventories-popup'
 import './undo-unload-popup'
+import './condition-of-goods-popup'
 import './select-product-batch'
 import './serial-number-list-popup'
+import '../components/list-view/product-list-view'
 
 import gql from 'graphql-tag'
 import { css, html } from 'lit-element'
 import orderBy from 'lodash-es/orderBy'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 
-import { MultiColumnFormStyles } from '@things-factory/form-ui'
+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, PageView, store } from '@things-factory/shell'
+import { client, CustomAlert, navigate, PageView, store } from '@things-factory/shell'
 import { CommonButtonStyles } from '@things-factory/styles'
 import { isMobileDevice, sleep } from '@things-factory/utils'
 
 import { fetchSettingRule } from '../../fetch-setting-value'
-import { ARRIVAL_NOTICE, RETURN_ORDER, VAS_TYPE } from '../constants'
+import { ARRIVAL_NOTICE, RETURN_ORDER, VAS_TYPE, CONDITION_OF_GOODS } from '../constants'
 
 const AVAIL_ORDER_TYPES = { ARRIVAL_NOTICE, RETURN_ORDER }
 class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
@@ -60,13 +63,15 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
       _pageSettings: Object,
       _productBarcode: String,
       _productBarcodeScanned: String,
-      _packingTypeScanned: String
+      _packingTypeScanned: String,
+      _conditionOfGoods: String
     }
   }
 
   static get styles() {
     return [
       MultiColumnFormStyles,
+      SingleColumnFormStyles,
       css`
         data-grist {
           overflow: auto;
@@ -93,6 +98,135 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
           color: var(--grist-title-icon-color);
           cursor: pointer;
         }
+
+        /* Mobile form styles - matching landing page design */
+        .mobile-form {
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          padding: 8px 0;
+        }
+        .mobile-form fieldset {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start !important;
+          border: none;
+          margin: 0;
+          padding: 0;
+          width: 100%;
+          box-sizing: border-box;
+        }
+        .mobile-form label {
+          display: block;
+          grid-column: unset !important;
+          text-align: left !important;
+          align-self: flex-start !important;
+          margin-bottom: 4px;
+          color: #333;
+          font-weight: bold;
+          font-size: 14px;
+          width: 100%;
+          text-transform: capitalize;
+        }
+        .mobile-form select,
+        .mobile-form input[type="text"],
+        .mobile-form input[type="date"] {
+          grid-column: unset !important;
+          width: 100%;
+          max-width: 100%;
+          height: 24px;
+          min-height: 24px;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: 4px;
+          padding: 4px 8px;
+          font-size: 12px;
+          background-color: white;
+          box-sizing: border-box;
+        }
+        .mobile-form input[type="number"] {
+          grid-column: unset !important;
+          width: 100%;
+          max-width: 100%;
+          height: 24px;
+          min-height: 24px;
+          border: 1px solid rgba(0, 0, 0, 0.2);
+          border-radius: 4px;
+          padding: 4px 8px;
+          padding-right: 24px;
+          font-size: 12px;
+          background-color: white;
+          box-sizing: border-box;
+          -moz-appearance: textfield;
+        }
+        .mobile-form input[type="number"]::-webkit-inner-spin-button,
+        .mobile-form input[type="number"]::-webkit-outer-spin-button {
+          opacity: 1;
+          height: 16px;
+        }
+        .mobile-form select:focus,
+        .mobile-form input:focus {
+          outline: none;
+          border-color: #017E7F;
+        }
+        .mobile-form [custom-input] {
+          grid-column: unset !important;
+          width: 100%;
+          box-sizing: border-box;
+          border: var(--input-field-border, 1px solid rgba(0, 0, 0, 0.2));
+          border-radius: var(--input-field-border-radius, 4px);
+        }
+        .mobile-form barcode-scanable-input {
+          width: 100%;
+          max-width: 100%;
+          box-sizing: border-box;
+          min-width: 0;
+          height: 24px;
+          min-height: 24px;
+        }
+        .mobile-form input[disabled] {
+          background-color: #f5f5f5;
+          cursor: not-allowed;
+        }
+        .mobile-form .side-by-side-row {
+          display: flex;
+          flex-direction: row;
+          gap: 10px;
+        }
+        .mobile-form .side-by-side-row fieldset {
+          flex: 1;
+          min-width: 0;
+        }
+        /* End of mobile form styles - matching landing page design */
+        
+        .order-no {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+        }
+        .order-info {
+          border: none;
+          background: none;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 8px;
+          color: #017E7F;
+          font-weight: bold;
+        }
+        .hr-line {
+          border: none;
+          border-top: 1px solid #017E7F;
+          margin: 0px;
+        }
+        product-list-view {
+          display: flex;
+          flex-direction: column;
+          flex: 1;
+          min-height: 0;
+          overflow-y: auto;
+          --product-item-active-bg: #F0FFFA;
+        }
       `
     ]
   }
@@ -159,10 +293,21 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     }
 
     if (this._unloadedInventories && this._unloadedInventories.length > 0) {
+      actions.push(
+        {
+          title: i18next.t('button.undo'),
+          action: this._openUndoUnloadPopup.bind(this),
+          ...CommonButtonStyles.undo
+        }
+      )
+    }
+
+    if (this._worksheetInfo) {
       actions.push({
-        title: i18next.t('button.undo'),
-        action: this._openUndoUnloadPopup.bind(this),
-        ...CommonButtonStyles.undo
+        title: i18next.t('button.condition'),
+        action: this._openConditionPopup.bind(this),
+        ...CommonButtonStyles.undo,
+        icon: 'search'
       })
     }
 
@@ -232,182 +377,239 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
       ?.shadowRoot?.querySelector('input')
   }
 
-  render() {
-    return html`
-      <form id="info-form" class="multi-column-form">
-        <fieldset>
-          <label>${i18next.t('label.order_type')}</label>
-          <select name="orderType" @change="${this.orderTypeChangeHandler.bind(this)}">
-            ${Object.keys(AVAIL_ORDER_TYPES).map(key =>
-              this.refOrderType === AVAIL_ORDER_TYPES[key].value
-                ? html`
-                    <option value="${AVAIL_ORDER_TYPES[key].value}" selected>
-                      ${i18next.t(`label.${AVAIL_ORDER_TYPES[key].name}`)}
-                    </option>
-                  `
-                : html`
-                    <option value="${AVAIL_ORDER_TYPES[key].value}">
-                      ${i18next.t(`label.${AVAIL_ORDER_TYPES[key].name}`)}
-                    </option>
-                  `
-            )}
-          </select>
+  get unloadingMobileListConfig() {
+    return {
+      selectable: false,
+      onRecordClick: (record, e, index) => {
+        if (record && record.batchId) {
+          const unflattenedRecord = this._unflattenData(record)
+          this._selectedOrderProduct = unflattenedRecord
+          this._isRequiredCheckExpiry = unflattenedRecord.product?.isRequiredCheckExpiry
+          this._isRequiredCheckManufactureDate = unflattenedRecord.product?.isRequiredCheckManufactureDate
+          this._isRequireSerialNumberScanningInbound = unflattenedRecord.product?.isRequireSerialNumberScanningInbound
+          this._isQtyChecked = false
+
+          this.inputForm.reset()
+          
+          if (this._isRequiredCheckManufactureDate && unflattenedRecord?.manufactureDate && this.refOrderType === AVAIL_ORDER_TYPES.ARRIVAL_NOTICE.value) {
+            setTimeout(() => {
+              if (this.manufactureDateInput) {
+                this.manufactureDateInput.value = this._formatDateForInput(unflattenedRecord.manufactureDate)
+              }
+            }, 0)
+          }
 
-          <label>${i18next.t('label.order_no')}</label>
-          <barcode-scanable-input
-            name="orderNo"
-            custom-input
-            @keypress="${e => {
-              if (e.keyCode === 13) {
-                e.preventDefault()
-                if (this.orderNoInput.value) {
-                  this._clearView()
-                  this._scanning = false
-                  this._fetchProducts(this.orderNoInput.value)
-                  this.orderNoInput.value = ''
+          if (this._isRequiredCheckManufactureDate && unflattenedRecord?.inventory?.manufactureDate && this.refOrderType === AVAIL_ORDER_TYPES.RETURN_ORDER.value) {
+            setTimeout(() => {
+              if (this.manufactureDateInput) {
+                this.manufactureDateInput.value = this._formatDateForInput(unflattenedRecord.inventory.manufactureDate)
+              }
+            }, 0)
+          }
+          
+          if (this._enableCartonLabel) {
+            if (this._enableProductScanning) {
+              this.productBarcodeInput.readOnly = false
+              this.productBarcodeInput.value = ''
+            }
+            if (unflattenedRecord.product?.isRequireSerialNumberScanningInbound) {
+              this.serialNumberInput.value = ''
+            }
+            this.cartonInput.value = ''
+            this._focusOnCartonInput()
+          } else {
+            this.lotInput.value = ''
+            this._focusOnLotInput()
+          }
+        }
+      },
+      columnLeft: {
+        size: 9,
+        fields: [
+          {
+            type: 'row',
+            content: [{ header: 'SKU No.', field: 'sku', type: 'string' }]
+          },
+          {
+            type: 'row',
+            content: [
+              {
+                header: 'Product Name',
+                field: 'product.name',
+                type: 'string',
+                style: '-webkit-line-clamp: 2;'
+              }
+            ]
+          },
+          {
+            type: 'row',
+            content: [
+              { header: 'Packing Type', field: 'packingType', type: 'string' },
+              { header: 'Packing Size', field: 'packingSize', type: 'string' }
+            ]
+          },
+          {
+            type: 'row',
+            content: [
+              { header: 'Mfg Date', field: 'displayManufactureDate', type: 'string' },
+              { header: 'Batch No', field: 'batchId', type: 'string' }
+            ]
+          },
+          {
+            type: 'row',
+            content: [{ header: 'Issue Note', field: 'issue', type: 'string' }]
+          }
+        ]
+      },
+      columnRight: {
+        size: 3,
+        fields: [
+          {
+            type: 'valueBox',
+            content: { header: 'Lot  Qty.', field: 'actualPalletQty', field2: 'palletQty', type: 'string' }
+          },
+          {
+            type: 'valueBox',
+            content: { header: 'Pack Qty.', field: 'actualPackQty', field2: 'packQty', type: 'string' }
+          },
+          {
+            type: 'actionBox',
+            content: [
+              {
+                header: 'View',
+                callback: (item, e) => {
+                  if (!this._unloadedInventories?.length) return
+
+                  const { sku, batchId, packingType, packingSize } = item
+                  openPopup(
+                    html`
+                      <unloaded-inventories-popup
+                        .unloadedInventories="${this._unloadedInventories.filter(
+                          inventory =>
+                            inventory.batchId == batchId &&
+                            inventory?.product.sku == sku &&
+                            inventory.packingType == packingType &&
+                            inventory.packingSize == packingSize
+                        )}"
+                      ></unloaded-inventories-popup>
+                    `,
+                    {
+                      backdrop: true,
+                      size: 'large',
+                      title: i18next.t('title.unloaded_inventories')
+                    }
+                  )
+                },
+                btnClass: 'btn-success',
+                condition: (item) => {
+                  return this._unloadedInventories?.length > 0
                 }
               }
-            }}"
-          ></barcode-scanable-input>
-        </fieldset>
-      </form>
+            ]
+          }
+        ]
+      }
+    }
+  }
 
-      <form id="input-form" class="multi-column-form">
-        <fieldset>
-          ${this._enableCartonLabel
-            ? html`<label>${i18next.t('label.carton_id')}</label>
-                <barcode-scanable-input
-                  name="cartonId"
-                  .value=${this._cartonId}
-                  without-enter
-                  custom-input
-                  ?scan-only=${this._pageSettings?.cameraScanOnly}
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      await this._transactionHandler(e)
-                    }
-                  }}"
-                ></barcode-scanable-input>`
-            : html`<label>${i18next.t('label.lot_id')}</label>
-                <barcode-scanable-input
-                  name="lotId"
-                  .value=${this._palletId}
-                  without-enter
-                  custom-input
-                  ?scan-only=${this._pageSettings?.cameraScanOnly}
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      await this._transactionHandler(e)
-                    }
-                  }}"
-                ></barcode-scanable-input>`}
-          ${this._enableProductScanning
-            ? html`
-                <label>${i18next.t('label.product_barcode')}</label>
+  render() {
+    const isMobileDeviceCheck = isMobileDevice()
+
+    return html`
+      ${!isMobileDeviceCheck
+        ? html`
+            <form id="info-form" class="multi-column-form">
+              <fieldset>
+                <label>${i18next.t('label.order_type')}</label>
+                <select name="orderType" @change="${this.orderTypeChangeHandler.bind(this)}">
+                  ${Object.keys(AVAIL_ORDER_TYPES).map(key =>
+                    this.refOrderType === AVAIL_ORDER_TYPES[key].value
+                      ? html`
+                          <option value="${AVAIL_ORDER_TYPES[key].value}" selected>
+                            ${i18next.t(`label.${AVAIL_ORDER_TYPES[key].name}`)}
+                          </option>
+                        `
+                      : html`
+                          <option value="${AVAIL_ORDER_TYPES[key].value}">
+                            ${i18next.t(`label.${AVAIL_ORDER_TYPES[key].name}`)}
+                          </option>
+                        `
+                  )}
+                </select>
+
+                <label>${i18next.t('label.order_no')}</label>
                 <barcode-scanable-input
-                  name="productBarcode"
-                  .value=${this._productBarcode}
-                  without-enter
+                  name="orderNo"
                   custom-input
-                  ?scan-only=${this._pageSettings?.cameraScanOnly}
-                  @keypress="${async e => {
+                  @keypress="${e => {
                     if (e.keyCode === 13) {
                       e.preventDefault()
-                      await this._transactionHandler(e)
+                      if (this.orderNoInput.value) {
+                        this._clearView()
+                        this._scanning = false
+                        this._fetchProducts(this.orderNoInput.value)
+                        this.orderNoInput.value = ''
+                      }
                     }
                   }}"
                 ></barcode-scanable-input>
-                <label>${i18next.t('label.packing_type')}</label>
-                <input name="packingType" type="text" value="${this._packingTypeScanned}" disabled="true" />
-              `
-            : ''}
-          ${this._enableInputQty >= 0 && this._enableInputQty < 4 && !this._isRequireSerialNumberScanningInbound
-            ? html`
-                <label>${i18next.t('label.actual_qty')}</label>
-                <input
-                  name="qty"
-                  type="number"
-                  min="1"
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      await this._transactionHandler(e)
-                    }
-                  }}"
-                />
-              `
-            : ''}
-          ${this._isRequiredCheckManufactureDate
-            ? html`
-                <label>${i18next.t('label.manufacture_date')}</label>
-                <input
-                  name="manufactureDate"
-                  type="date"
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      await this._transactionHandler(e)
-                    }
-                  }}"
-                />
-              `
-            : ''}
-          ${this._isRequiredCheckExpiry
-            ? html`
-                <label>${i18next.t('label.expiry_date')}</label>
-                <input
-                  name="expDate"
-                  type="date"
-                  @keypress="${async e => {
-                    if (e.keyCode === 13) {
-                      e.preventDefault()
-                      await this._transactionHandler(e)
-                    }
-                  }}"
-                />
-              `
-            : ''}
-        </fieldset>
-        ${this._isRequireSerialNumberScanningInbound
-          ? html`<fieldset>
-              <label>${i18next.t('label.serial_number')}</label>
-              <barcode-scanable-input
-                name="serialNumber"
-                without-enter
-                custom-input
-                ?scan-only=${this._pageSettings?.cameraScanOnly}
-                @keypress="${async e => {
-                  if (e.keyCode === 13) {
-                    e.preventDefault()
-                    await this._transactionHandler(e)
-                  }
-                }}"
-              ></barcode-scanable-input>
-            </fieldset>`
-          : ''}
-      </form>
-
-      <data-grist
-        .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
-        .config=${this.orderProductConfig}
-        .data=${this.orderProductData}
-      >
-        <div slot="headroom" id="form-section">
-          <form id="info-form" class="multi-column-form">
-            <fieldset>
-              <legend>
-                ${this._orderNo}
-                ${this._orderNo
-                  ? html`(${this._bizplaceName})
-                      <mwc-icon @click="${this._openWorksheetInformation.bind(this)}">info</mwc-icon>`
-                  : ''}
-              </legend>
-            </fieldset>
+              </fieldset>
+            </form>
+
+            <form id="input-form" class="multi-column-form">
+              ${this._renderFormFields(false)}
+            </form>
+
+            <data-grist
+              .mode=${'GRID'}
+              .config=${this.orderProductConfig}
+              .data=${this.orderProductData}
+            >
+              <div slot="headroom" id="form-section">
+                <form id="info-form" class="multi-column-form">
+                    <fieldset>
+                    <legend>
+                      ${this._orderNo}
+                      ${this._orderNo
+                        ? html`(${this._bizplaceName})
+                            <mwc-icon @click="${this._openWorksheetInformation.bind(this)}">info</mwc-icon>`
+                        : ''}
+                    </legend>
+                    </fieldset>
+                </form>
+                </div>
+            </data-grist>
+          `
+        : html`
+            <form id="input-form" class="mobile-form">
+              ${this._renderFormFields(true)}
           </form>
-        </div>
-      </data-grist>
+
+          ${this._orderNo ? 
+            html`
+              <button
+                class="order-info text-center"
+                ?disabled=${!Boolean(this._orderNo)}
+                    @click=${this._openWorksheetInformation.bind(this)}
+              >
+                <label class="text-14 font-bold order-no"
+                  >GAN No.: ${this._orderNo || ''}</label
+                >
+                <mwc-icon style="color:#007E7F;">info</mwc-icon>
+              </button>
+            ` : html``}
+
+            <hr class="hr-line">
+
+            <product-list-view
+              id="unloading"
+              style="--product-item-selected-bg: #F0FFFA;"
+              .config=${this.unloadingMobileListConfig}
+              .data=${this.orderProductData?.records || []}
+              .selectedRecordId=${this._selectedOrderProduct?.id || null}
+            ></product-list-view>
+          `
+      }
     `
   }
 
@@ -431,6 +633,7 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     this.orderProductData = { records: [] }
     this.orderVasData = { records: [] }
     this.reusablePalletIdData = { records: [] }
+    this._conditionOfGoods = CONDITION_OF_GOODS.GOOD.value
   }
 
   updated(changedProps) {
@@ -444,9 +647,54 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
-  pageUpdated() {
+  pageUpdated(changes, lifecycle, before) {
     if (this.active) {
-      this._focusOnOrderNoField()
+      // Mobile: Check if we have params from landing page and auto-load
+      if (isMobileDevice() && lifecycle?.params) {
+        const orderType = lifecycle.params.orderType
+        const orderNo = lifecycle.params.orderNo
+        
+        if (orderType && orderNo) {
+          this.refOrderType = orderType
+          this._clearView()
+          this._scanning = false
+          this._fetchProducts(orderNo)
+          
+          requestAnimationFrame(() => {
+            const currentState = history.state || {}
+            // Only create overlay if it doesn't exist yet
+            if (!currentState.overlay) {
+              const beforeOverlay = currentState.overlay
+              const beforeSequence = beforeOverlay?.sequence || 0
+              const afterSequence = beforeSequence + 1
+
+              const newState = {
+                ...currentState,
+                overlay: {
+                  name: 'unloading-page',
+                  sequence: afterSequence,
+                  escapable: true
+                }
+              }
+
+              // Replace current state with overlay (preserves URL)
+              history.replaceState(newState, '', window.location.href)
+              
+              // Trigger popstate to update toolbar
+              window.dispatchEvent(
+                new PopStateEvent('popstate', {
+                  state: newState
+                })
+              )
+            }
+          })
+        }
+      } else if (isMobileDevice() && !this._worksheetInfo && !lifecycle?.params) {
+        // Mobile: If no order loaded and no params, redirect to landing page
+        navigate('unloading_landing')
+      } else {
+        this._focusOnOrderNoField()
+      }
     }
   }
 
@@ -1092,6 +1340,7 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
             inventoryItems {
               serialNumber
             }
+            conditionOfGoods
           }
         }
       `,
@@ -1141,6 +1390,10 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     }
   }
 
+  conditionOfGoodsChangeHandler(e) {
+    this._conditionOfGoods = e.target.value
+  }
+
   _resetInput() {
     if (this._selectedOrderProduct?.isRequiredCheckExpiry && !this._isRequireSerialNumberScanningInbound)
       this.expDateInput.value = null
@@ -1268,6 +1521,7 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
             cartonId: this._enableCartonLabel ? this.cartonInput.value.trim() : null,
             expirationDate: this._isRequiredCheckExpiry ? this.expDateInput.value : null,
             manufactureDate: this._getManufactureDateValue(),
+            conditionOfGoods: this._conditionOfGoods || CONDITION_OF_GOODS.GOOD.value
           }
         }
       })
@@ -1326,6 +1580,7 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
             cartonId: this._enableCartonLabel ? this.cartonInput.value.trim() : null,
             expirationDate: this._isRequiredCheckExpiry ? this.expDateInput.value : null,
             manufactureDate: this._getManufactureDateValue(),
+            conditionOfGoods: this._conditionOfGoods || CONDITION_OF_GOODS.GOOD.value
           }
         }
       })
@@ -1421,7 +1676,8 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
             qty: qty, // Use the validated qty
             expirationDate: this._isRequiredCheckExpiry ? this.expDateInput.value : null,
             manufactureDate: this._getManufactureDateValue(),
-            reusablePallet: this._usingReusablePallet ? this._reusablePallet : null
+            reusablePallet: this._usingReusablePallet ? this._reusablePallet : null,
+            conditionOfGoods: this._conditionOfGoods || CONDITION_OF_GOODS.GOOD.value
           },
           productBarcode: this._enableProductScanning
             ? this._productBarcodeScanned
@@ -1994,10 +2250,42 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 
+  async _openConditionPopup() {
+    if (!this.orderProductData || !this.orderProductData.records || this.orderProductData.records.length === 0) {
+      this._showToast({ message: i18next.t('text.no_products_found'), type: 'warning' })
+      return
+    }
+
+    const worksheetDetailNames = this.orderProductData.records.map(record => record.name)
+    
+    await sleep(1010)
+    openPopup(
+      html`
+        <condition-of-goods-popup
+          .unloadedInventories="${this._unloadedInventories}"
+          .worksheetDetailNames="${worksheetDetailNames}"
+          @condition-updated="${async e => {
+            this._showToast({ message: i18next.t('text.info_update_successfully') })
+            await this._fetchProducts(this._orderNo)
+          }}"
+        ></condition-of-goods-popup>
+      `,
+      {
+        backdrop: true,
+        size: 'large',
+        title: i18next.t('title.condition_of_goods')
+      }
+    )
+  }
+
   _openWorksheetInformation() {
     openPopup(
       html`
-        <worksheet-information-popup .worksheetInformation="${this._worksheetInfo}"></worksheet-information-popup>
+        <unloading-worksheet-information-popup 
+          .worksheetInformation="${this._worksheetInfo}"
+          .unloadedInventories="${this._unloadedInventories || []}"
+          .orderProductData="${this.orderProductData?.records || []}"
+        ></unloading-worksheet-information-popup>
       `,
       {
         backdrop: true,
@@ -2031,6 +2319,31 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     )
   }
 
+  _unflattenData(flattenedData) {
+    if (!flattenedData || typeof flattenedData !== 'object') return flattenedData
+
+    const unflattened = {}
+    const nested = {}
+
+    Object.keys(flattenedData).forEach(key => {
+      if (key.includes('.')) {
+        const [rootKey, ...rest] = key.split('.')
+        const restKeys = rest.join('.')
+
+        if (!nested[rootKey]) nested[rootKey] = {}
+        nested[rootKey][restKeys] = flattenedData[key]
+      } else {
+        unflattened[key] = flattenedData[key]
+      }
+    })
+
+    Object.keys(nested).forEach(key => {
+      unflattened[key] = this._unflattenData(nested[key])
+    })
+
+    return unflattened
+  }
+
   async _openSerialNumberList() {
     await sleep(1010)
     openPopup(
@@ -2165,6 +2478,225 @@ class UnloadProduct extends connect(store)(localize(i18next)(PageView)) {
     this.orderNoInput.select()
   }
 
+  _getFieldSequence(isMobile = false) {
+    const conditions = {
+      carton: this._enableCartonLabel,
+      product: this._enableProductScanning,
+      qty: this._enableInputQty >= 0 && this._enableInputQty < 4 && !this._isRequireSerialNumberScanningInbound,
+      mfg: this._isRequiredCheckManufactureDate,
+      exp: this._isRequiredCheckExpiry,
+      serial: this._isRequireSerialNumberScanningInbound
+    }
+
+    const conditionKey = [
+      conditions.carton ? 'carton' : 'lot',
+      conditions.product ? 'product' : '',
+      conditions.qty ? 'qty' : '',
+      conditions.mfg ? 'mfg' : '',
+      conditions.exp ? 'exp' : '',
+      conditions.serial ? 'serial' : ''
+    ].filter(Boolean).join('_')
+
+    if (isMobile) {
+      const getConditionRow = () => 
+        conditions.product ? ['conditionOfGoods', 'packingType'] : ['conditionOfGoods']
+
+      // Predefined sequences for mobile (supports nested arrays for side-by-side)
+      const sequences = {
+        'carton_product': ['cartonId', 'productBarcode', getConditionRow()],
+        'carton_product_qty': ['cartonId', 'productBarcode', getConditionRow(), 'qty'],
+        'carton_product_exp_serial': ['cartonId', 'productBarcode', ['expDate', 'serialNumber'], getConditionRow()],
+        'lot_qty_mfg_exp': [['lotId', 'qty'], ['manufactureDate', 'expiryDate'], getConditionRow()],
+        'carton_product_serial': ['cartonId', 'productBarcode', 'serialNumber', getConditionRow()],
+        'carton_product_mfg_exp': ['cartonId', 'productBarcode', ['manufactureDate', 'expiryDate'], getConditionRow()],
+        'carton_product_mfg_exp_serial': ['cartonId', ['productBarcode', 'serialNumber'], ['manufactureDate', 'expiryDate'], getConditionRow()],
+        'lot_qty_exp': ['lotId', ['expiryDate', 'qty'], getConditionRow()],
+        'carton_product_exp': ['cartonId', 'productBarcode', 'expiryDate', getConditionRow()],
+        'carton_product_qty_exp': ['cartonId', 'productBarcode', ['expiryDate', 'qty'], getConditionRow()],
+        'carton_product_qty_mfg_exp': ['cartonId', ['productBarcode', 'qty'], ['manufactureDate', 'expiryDate'], getConditionRow()],
+        'lot_qty': [['lotId', 'qty'], getConditionRow()],
+        'carton_product_qty_mfg': ['cartonId', 'productBarcode', ['qty', 'manufactureDate'], getConditionRow()],
+      }
+
+      return sequences[conditionKey] || this._buildDynamicSequence(conditions, getConditionRow, isMobile)
+    } else {
+      // Web sequences (simple flat arrays, you can add specific combos here later)
+      const sequences = {
+        'carton_product': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods'],
+        'carton_product_qty': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'qty'],
+        'carton_product_exp_serial': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'expiryDate', 'serialNumber'],
+        'lotId_qty_mfg_exp': ['lotId', 'conditionOfGoods', 'packingType', 'manufactureDate', 'expiryDate', 'qty'],
+        'carton_product_sn': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'serialNumber'],
+        'carton_product_mfg_exp': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'manufactureDate', 'expiryDate'],
+        'carton_product_mfg_exp_serial': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'manufactureDate', 'expiryDate', 'serialNumber'],
+        'lotId_qty_exp': ['lotId', 'conditionOfGoods', 'packingType', 'expiryDate', 'qty'],
+        'carton_product_exp': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'expiryDate'],
+        'carton_product_qty_exp': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'expiryDate', 'qty'],
+        'carton_product_qty_mfg_exp': ['cartonId', 'productBarcode', 'packingType', 'conditionOfGoods', 'manufactureDate', 'expiryDate', 'qty'],
+        'lotId_qty': ['lotId', 'conditionOfGoods', 'packingType', 'qty'],
+      }
+
+      return sequences[conditionKey] || this._buildDynamicSequence(conditions, null, isMobile)
+    }
+  }
+
+  _buildDynamicSequence(conditions, getConditionRow, isMobile = false) {
+    if (isMobile) {
+      const fields = [
+        conditions.carton ? 'cartonId' : 'lotId',
+        conditions.product && 'productBarcode',
+        conditions.qty && 'qty',
+        conditions.mfg && 'manufactureDate',
+        conditions.exp && 'expiryDate',
+        conditions.serial && 'serialNumber'
+      ].filter(Boolean)
+
+      return [...fields, getConditionRow()]
+    } else {
+      const fields = [
+        conditions.carton ? 'cartonId' : 'lotId',
+        conditions.product && 'productBarcode',
+        conditions.product && 'packingType',
+        conditions.qty && 'qty',
+        conditions.mfg && 'manufactureDate',
+        conditions.exp && 'expiryDate',
+        conditions.serial && 'serialNumber',
+        'conditionOfGoods'
+      ].filter(Boolean)
+      
+      return fields
+    }
+  }
+
+  _renderFormFields(isMobile = false) {
+    const sequence = this._getFieldSequence(isMobile)
+    const keypressHandler = async e => {
+      if (e.keyCode === 13) {
+        e.preventDefault()
+        await this._transactionHandler(e)
+      }
+    }
+
+    if (isMobile) {
+      return sequence.map(item => {
+        if (Array.isArray(item)) {
+          return html`
+            <fieldset class="side-by-side-row">
+              ${item.map(fieldName => html`<fieldset>${this._renderFieldContent(fieldName, keypressHandler)}</fieldset>`)}
+            </fieldset>
+          `
+        }
+        return html`<fieldset>${this._renderFieldContent(item, keypressHandler)}</fieldset>`
+      })
+    } else {
+      return html`
+        <fieldset>
+          ${sequence.map(fieldName => this._renderFieldContent(fieldName, keypressHandler))}
+        </fieldset>
+      `
+    }
+  }
+
+  _renderFieldContent(fieldName, keypressHandler) {
+    switch (fieldName) {
+      case 'cartonId':
+        return html`
+          <label>${i18next.t('label.carton_id')}</label>
+          <barcode-scanable-input
+            name="cartonId"
+            .value=${this._cartonId}
+            without-enter
+            custom-input
+            ?scan-only=${this._pageSettings?.cameraScanOnly}
+            @keypress="${keypressHandler}"
+          ></barcode-scanable-input>
+        `
+      case 'lotId':
+        return html`
+          <label>${i18next.t('label.lot_id')}</label>
+          <barcode-scanable-input
+            name="lotId"
+            .value=${this._palletId}
+            without-enter
+            custom-input
+            ?scan-only=${this._pageSettings?.cameraScanOnly}
+            @keypress="${keypressHandler}"
+          ></barcode-scanable-input>
+        `
+      case 'productBarcode':
+        return html`
+          <label>${i18next.t('label.product_barcode')}</label>
+          <barcode-scanable-input
+            name="productBarcode"
+            .value=${this._productBarcode}
+            without-enter
+            custom-input
+            ?scan-only=${this._pageSettings?.cameraScanOnly}
+            @keypress="${keypressHandler}"
+          ></barcode-scanable-input>
+        `
+      case 'packingType':
+        return html`
+          <label>${i18next.t('label.packing_type')}</label>
+          <input name="packingType" type="text" value="${this._packingTypeScanned}" disabled="true" />
+        `
+      case 'qty':
+        return html`
+          <label>${i18next.t('label.actual_qty')}</label>
+          <input
+            name="qty"
+            type="number"
+            min="1"
+            @keypress="${keypressHandler}"
+          />
+        `
+      case 'manufactureDate':
+        return html`
+          <label>${i18next.t('label.manufacture_date')}</label>
+          <input
+            name="manufactureDate"
+            type="date"
+            @keypress="${keypressHandler}"
+          />
+        `
+      case 'expiryDate':
+        return html`
+          <label>${i18next.t('label.expiry_date')}</label>
+          <input
+            name="expDate"
+            type="date"
+            @keypress="${keypressHandler}"
+          />
+        `
+      case 'serialNumber':
+        return html`
+          <label>${i18next.t('label.serial_number')}</label>
+          <barcode-scanable-input
+            name="serialNumber"
+            without-enter
+            custom-input
+            ?scan-only=${this._pageSettings?.cameraScanOnly}
+            @keypress="${keypressHandler}"
+          ></barcode-scanable-input>
+        `
+      case 'conditionOfGoods':
+        return html`
+          <label>${i18next.t('label.condition')}</label>
+          <select name="conditionOfGoods" .value="${this._conditionOfGoods || CONDITION_OF_GOODS.GOOD.value}" @change="${this.conditionOfGoodsChangeHandler.bind(this)}">
+            ${Object.keys(CONDITION_OF_GOODS).map(key =>
+              html`
+                <option value="${CONDITION_OF_GOODS[key].value}" ?selected="${this._conditionOfGoods === CONDITION_OF_GOODS[key].value}">
+                  ${i18next.t(`label.${CONDITION_OF_GOODS[key].name}`)}
+                </option>
+              `
+            )}
+          </select>
+        `
+      default:
+        return html``
+    }
+  }
+
   async _exportableData() {
     try {
       let records = this.orderProductData.records