@things-factory/operato-wms 4.3.752 → 4.3.755

package/client/pages/outbound/route-label-popup.js

@@ -1,6 +1,8 @@
 import '@things-factory/barcode-ui'
 import '@things-factory/grist-ui'
 import '@material/mwc-icon'
+import '@material/mwc-button'
+import './route-label-history-dialog'
 
 import gql from 'graphql-tag'
 import { css, html, LitElement } from 'lit-element'
@@ -9,6 +11,7 @@ import { connect } from 'pwa-helpers/connect-mixin'
 import { DirectPrinter } from '@things-factory/barcode-base'
 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, store } from '@things-factory/shell'
 import { isMobileDevice } from '@things-factory/utils'
 
@@ -63,14 +66,9 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           color: var(--search-form-icon-color);
         }
 
-        .checkbox-container {
-          display: flex;
-          align-items: center;
-          gap: 10px; /* Adjust gap as needed */
-        }
-
-        .checkbox-container label {
-          margin-left: 5px; /* Adjust margin as needed */
+        .grid-break {
+          grid-column: span 24;
+          height: 0;
         }
       `
     ]
@@ -83,6 +81,7 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
       partnerId: String,
       refNoFilter: String,
       worksheetType: String,
+      sourceWorksheetType: String,
       _binNumberList: Array,
       _searchFields: Array,
       _priorityList: Array,
@@ -91,7 +90,12 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
       _selectedBinNumber: String,
       _enableToteScanning: Boolean,
       _enableBinScanning: Boolean,
-      orderInventories: Object
+      orderInventories: Object,
+      _viewMode: String,
+      _appendSeqField: String,
+      _historyTarget: Object,
+      _historyLogs: Array,
+      _historyReprintSeq: String
     }
   }
 
@@ -119,84 +123,160 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
 
   constructor() {
     super()
+    this._viewMode = 'SKU_TOTE'
+    this._appendSeqField = 'refNo'
+  }
+
+  async _sleep(ms = 0) {
+    await new Promise(resolve => setTimeout(resolve, ms))
+  }
+
+  _formatDateTime(value) {
+    try {
+      if (!value) return ''
+      if (value instanceof Date) return value.toLocaleString()
+      const d = new Date(value)
+      if (!Number.isNaN(d.getTime())) return d.toLocaleString()
+      const n = typeof value === 'number' ? value : parseInt(value, 10)
+      if (Number.isFinite(n)) {
+        const dn = new Date(n)
+        if (!Number.isNaN(dn.getTime())) return dn.toLocaleString()
+      }
+      return String(value)
+    } catch (e) {
+      return ''
+    }
   }
 
   render() {
     return html`
       <div>
         <form class="multi-column-form">
-          ${this.worksheetType == 'merged'
+          <label>${i18next.t('field.filter_by')}</label>
+          <select
+            name="viewMode"
+            @change="${e => {
+              this._viewMode = e.currentTarget.value
+              this._setupConfig()
+              this.requestUpdate()
+              this.dataGrist.fetch()
+            }}"
+          >
+            <option value="SKU_TOTE" ?selected=${this._viewMode === 'SKU_TOTE'}>SKU/Tote</option>
+            <option value="RO" ?selected=${this._viewMode === 'RO'}>RO</option>
+          </select>
+          <span class="grid-break"></span>
+
+          ${this._viewMode === 'SKU_TOTE'
             ? html`
-                <label>${i18next.t('field.priority')}</label>
-                <select
-                  name="priority"
-                  @change="${e => {
-                    this._selectedPriority = this._priorityList.filter(itm => itm.value == e.currentTarget.value)
+                ${this.worksheetType == 'merged'
+                  ? html`
+                      <label>${i18next.t('field.priority')}</label>
+                      <select
+                        name="priority"
+                        @change="${e => {
+                          this._selectedPriority = this._priorityList.filter(itm => itm.value == e.currentTarget.value)
+                        }}"
+                      >
+                        ${(this._priorityList || []).map(
+                          list => html` <option value=${list?.value}>${list?.name}</option> `
+                        )}
+                      </select>
+                    `
+                  : ''}
+                ${this._enableBinScanning
+                  ? html`
+                      <label>${i18next.t('field.bin_number')}</label>
+                      <select
+                        name="binNumber"
+                        @change="${e => {
+                          this._selectedBinNumber = this._binNumberList.filter(itm => itm.id == e.currentTarget.value)
+                          if (this._selectedBinNumber.length == 0) this._selectedBinNumber = e.currentTarget.value
+                          this._changeCheckbox()
+                        }}"
+                      >
+                        <option value="" selected></option>
+                        <option value="all">Show All</option>
+                        ${(this._binNumberList || []).map(
+                          list => html` <option value=${list.id}>${list.name}</option> `
+                        )}
+                      </select>
+                    `
+                  : ''}
+
+                <label for="refNo">${i18next.t('field.ref_no')}</label>
+                <input
+                  type="text"
+                  name="refNo"
+                  @input="${e => {
+                    this.refNoFilter = e.currentTarget.value
                   }}"
-                >
-                  ${(this._priorityList || []).map(list => html` <option value=${list?.value}>${list?.name}</option> `)}
-                </select>
+                  @keypress="${e => {
+                    if (e.key === 'Enter') {
+                      this.dataGrist.fetch()
+                      e.preventDefault()
+                    }
+                  }}"
+                />
+
+                <div options-wrap>
+                  <input
+                    type="checkbox"
+                    checked
+                    id="withSku"
+                    name="withSku"
+                    @change="${() => this._changeCheckbox()}"
+                  />
+                  <label for="withSku">${i18next.t('field.sku')}</label>
+
+                  ${this._enableToteScanning
+                    ? html`
+                        <input
+                          type="checkbox"
+                          id="withTote"
+                          name="withTote"
+                          @change="${() => this._changeCheckbox()}"
+                        />
+                        <label for="withTote">${i18next.t('field.tote')}</label>
+                      `
+                    : ''}
+                </div>
               `
-            : ''}
-          ${this._enableBinScanning
-            ? html`
-                <label>${i18next.t('field.bin_number')}</label>
+            : html`
+                <label>${i18next.t('field.sequence_reference')}</label>
                 <select
-                  name="binNumber"
-                  @change="${e => {
-                    this._selectedBinNumber = this._binNumberList.filter(itm => itm.id == e.currentTarget.value)
-                    if (this._selectedBinNumber.length == 0) this._selectedBinNumber = e.currentTarget.value
-                    this._changeCheckbox()
+                  name="appendSeqField"
+                  @change="${async e => {
+                    this._appendSeqField = e.currentTarget.value
+                    await this.dataGrist.fetch()
                   }}"
                 >
-                  <option value="" selected></option>
-                  <option value="all">Show All</option>
-                  ${(this._binNumberList || []).map(list => html` <option value=${list.id}>${list.name}</option> `)}
+                  <option value="refNo" ?selected=${this._appendSeqField === 'refNo'}>
+                    ${i18next.t('field.ref_no')}
+                  </option>
+                  <option value="refNo2" ?selected=${this._appendSeqField === 'refNo2'}>
+                    ${i18next.t('field.ref_no_2')}
+                  </option>
+                  <option value="refNo3" ?selected=${this._appendSeqField === 'refNo3'}>
+                    ${i18next.t('field.ref_no_3')}
+                  </option>
                 </select>
-              `
-            : ''}
-
-          <label for="refNo">${i18next.t('field.ref_no')}</label>
-          <input
-            type="text"
-            name="refNo"
-            @input="${e => {
-              this.refNoFilter = e.currentTarget.value
-            }}"
-            @keypress="${e => {
-              if (e.key === 'Enter') {
-                this.dataGrist.fetch()
-                e.preventDefault()
-              }
-            }}"
-            }}
-          />
-          <div class="checkbox-container">
-            <input
-              type="checkbox"
-              checked
-              id="withSku"
-              name="withSku"
-              @change="${e => {
-                this._changeCheckbox()
-              }}"
-            />
-            <label for="withSku">${i18next.t('field.sku')}</label>
-
-            ${this._enableToteScanning
-              ? html`
-                  <input
-                    type="checkbox"
-                    id="withTote"
-                    name="withTote"
-                    @change="${e => {
-                      this._changeCheckbox()
-                    }}"
-                  />
-                  <label for="withTote">${i18next.t('field.tote')}</label>
-                `
-              : ''}
-          </div>
+
+                <label for="refNo">${i18next.t('field.ref_no')}</label>
+                <input
+                  type="text"
+                  name="refNo"
+                  @input="${e => {
+                    this.refNoFilter = e.currentTarget.value
+                  }}"
+                  @keypress="${e => {
+                    if (e.key === 'Enter') {
+                      this.dataGrist.fetch()
+                      e.preventDefault()
+                    }
+                  }}"
+                />
+              `}
         </form>
         <mwc-icon id="search" @click=${e => this.dataGrist.fetch()} search>search</mwc-icon>
       </div>
@@ -206,7 +286,7 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
           .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
           .config=${this.config}
           .fetchHandler=${this.fetchHandler.bind(this)}
-          @field-change="${this._packingSizeChange.bind(this)}"
+          @field-change="${this._onFieldChange.bind(this)}"
         ></data-grist>
       </div>
 
@@ -232,7 +312,7 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
 
   async firstUpdated() {
     await this.fetchLocations()
-    this._enableToteScanning = await fetchSettingRule('enable-tote-scanning')
+    this._enableToteScanning = parseInt((await fetchSettingRule('enable-tote-scanning')) || '0', 10) >= 1
     this._enableBinScanning = await fetchSettingRule('enable-bin-picking')
 
     this._priorityList = [
@@ -247,6 +327,47 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
       }
     ]
 
+    this._setupConfig()
+  }
+
+  _setupConfig() {
+    if (this._viewMode === 'RO') {
+      this.config = {
+        rows: { appendable: false, selectable: { multiple: true } },
+        pagination: { infinite: true },
+        list: {
+          fields: ['name', 'refNo', 'refNo2', 'refNo3', 'printQty', 'lastSeq', 'history']
+        },
+        columns: [
+          { type: 'gutter', gutterName: 'sequence' },
+          { type: 'gutter', gutterName: 'row-selector', multiple: true },
+          {
+            type: 'gutter',
+            gutterName: 'button',
+            icon: 'history',
+            handlers: {
+              click: (_columns, _data, _column, record) => this._openHistoryDialog(record)
+            }
+          },
+          { type: 'string', name: 'name', header: i18next.t('field.ro'), sortable: true, width: 160 },
+          { type: 'string', name: 'refNo', header: i18next.t('field.ref_no'), sortable: true, width: 150 },
+          { type: 'string', name: 'refNo2', header: i18next.t('field.ref_no_2'), sortable: true, width: 150 },
+          { type: 'string', name: 'refNo3', header: i18next.t('field.ref_no_3'), sortable: true, width: 150 },
+          {
+            type: 'string',
+            name: 'printQty',
+            header: i18next.t('field.print_qty'),
+            record: { editable: true },
+            width: 120
+          },
+          { type: 'integer', name: 'lastSeq', header: i18next.t('field.last_seq'), sortable: true, width: 110 },
+          { type: 'string', name: 'history', header: i18next.t('field.last_printed_by'), width: 220 }
+        ]
+      }
+      return
+    }
+
+    // Default: SKU/Tote mode (existing behavior)
     let configColumns = [
       { type: 'gutter', gutterName: 'sequence' },
       { type: 'gutter', gutterName: 'row-selector', multiple: true }
@@ -381,6 +502,62 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
   }
 
   async fetchHandler({ sorters = [] }) {
+    if (this._viewMode === 'RO') {
+      try {
+        const response = await client.query({
+          query: gql`
+            query routeLabelReleaseGoodsInExecutingWorksheet(
+              $partnerId: String!
+              $refNo: String
+              $worksheetType: String!
+              $seqField: String
+            ) {
+              routeLabelReleaseGoodsInExecutingWorksheet(
+                partnerId: $partnerId
+                refNo: $refNo
+                worksheetType: $worksheetType
+                seqField: $seqField
+              ) {
+                id
+                name
+                refNo
+                refNo2
+                refNo3
+                routeId
+                storeId
+                storeName
+                stopId
+                createdAt
+                lastSeq
+                lastPrintedBy
+              }
+            }
+          `,
+          variables: {
+            partnerId: this.partnerId,
+            refNo: this.refNoFilter || null,
+            worksheetType: this.sourceWorksheetType || 'PICKING',
+            seqField: this._appendSeqField
+          }
+        })
+
+        if (!response.errors) {
+          const items = response.data.routeLabelReleaseGoodsInExecutingWorksheet || []
+          return {
+            total: items.length,
+            records: items.map(rg => ({
+              ...rg,
+              printQty: 1,
+              history: rg.lastPrintedBy || ''
+            }))
+          }
+        }
+      } catch (e) {
+        this._showToast(e)
+      }
+      return { total: 0, records: [] }
+    }
+
     const filters = []
 
     if (this.worksheetType == 'merged') {
@@ -492,12 +669,76 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
     }
   }
 
-  async _packingSizeChange(e) {
-    const selectedColumn = e.detail.column.name
+  async _onFieldChange(e) {
+    const { column, row, after, before } = e.detail
 
-    if (selectedColumn === 'packingType') {
-      this.dataGrist._data.records[e.detail.row].packingSize = e.detail.record.productDetails.find(
-        item => item.packingType == e.detail.after
+    // Handle printQty validation for RO mode
+    if (this._viewMode === 'RO' && column.name === 'printQty') {
+      const printQtyStr = String(after || '').trim()
+      const previousValue = before !== undefined && before !== null ? before : 1
+
+      // Check if empty
+      if (!printQtyStr || printQtyStr === '') {
+        this.dataGrist._data.records[row].printQty = previousValue
+        this.dataGrist.render()
+        this._showToast({
+          type: 'error',
+          message: i18next.t('text.print_qty_is_required')
+        })
+        return
+      }
+
+      // Check if it contains decimal point
+      if (printQtyStr.includes('.')) {
+        this.dataGrist._data.records[row].printQty = previousValue
+        this.dataGrist.render()
+        this._showToast({
+          type: 'error',
+          message: i18next.t('text.print_qty_must_be_integer')
+        })
+        return
+      }
+
+      const qtyNum = parseInt(printQtyStr, 10)
+      if (isNaN(qtyNum)) {
+        this.dataGrist._data.records[row].printQty = previousValue
+        this.dataGrist.render()
+        this._showToast({
+          type: 'error',
+          message: i18next.t('text.print_qty_must_be_valid_number')
+        })
+        return
+      }
+
+      // Check if the parsed value matches the original (to catch cases like "123abc")
+      if (qtyNum.toString() !== printQtyStr) {
+        this.dataGrist._data.records[row].printQty = previousValue
+        this.dataGrist.render()
+        this._showToast({
+          type: 'error',
+          message: i18next.t('text.print_qty_must_be_valid_integer')
+        })
+        return
+      }
+
+      if (qtyNum < 1) {
+        this.dataGrist._data.records[row].printQty = previousValue
+        this.dataGrist.render()
+        this._showToast({
+          type: 'error',
+          message: i18next.t('text.print_qty_must_be_at_least_one')
+        })
+        return
+      }
+
+      // If validation passes, convert to integer
+      this.dataGrist._data.records[row].printQty = qtyNum
+    }
+
+    // Handle packingSize change for SKU_TOTE mode
+    if (this._viewMode === 'SKU_TOTE' && column.name === 'packingType') {
+      this.dataGrist._data.records[row].packingSize = e.detail.record.productDetails.find(
+        item => item.packingType == after
       ).packingSize
     }
   }
@@ -508,73 +749,259 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
 
     if (!records || records.length == 0) {
       this._showToast({ message: i18next.t('text.there_is_no_selected_items') })
+      return
     }
     if (!labelId) {
       this._showToast({
         type: 'error',
         message: `${i18next.t('text.no_label_setting_was_found')}. ${i18next.t('text.please_check_your_setting')}`
       })
-    } else {
-      let index = 1
-      for (let record of records) {
-        let max = record.releaseQty ? record.releaseQty / record.packingSize : 1
-        let commands
-        for (let qty = 1; qty <= max; qty++) {
-          let searchParams = new URLSearchParams()
-
-          /* for pallet record mapping */
-          searchParams.append('roName', record.roName)
-          if (record?.binNumber) {
-            searchParams.append('binNumber', record.binNumber)
+      return
+    }
+
+    // Validate printQty for RO mode
+    if (this._viewMode === 'RO') {
+      for (const record of records) {
+        const printQty = record.printQty
+        if (printQty === undefined || printQty === null || printQty === '') {
+          this._showToast({
+            type: 'error',
+            message: i18next.t('text.print_qty_is_required')
+          })
+          return
+        }
+
+        // Check if it contains decimal point
+        if (String(printQty).includes('.')) {
+          this._showToast({
+            type: 'error',
+            message: i18next.t('text.print_qty_must_be_integer')
+          })
+          return
+        }
+
+        const qtyNum = parseInt(printQty, 10)
+        if (isNaN(qtyNum)) {
+          this._showToast({
+            type: 'error',
+            message: i18next.t('text.print_qty_must_be_valid_number')
+          })
+          return
+        }
+
+        // Check if the parsed value matches the original (to catch cases like "123abc")
+        if (qtyNum.toString() !== String(printQty).trim()) {
+          this._showToast({
+            type: 'error',
+            message: i18next.t('text.print_qty_must_be_valid_integer')
+          })
+          return
+        }
+
+        if (qtyNum < 1) {
+          this._showToast({
+            type: 'error',
+            message: i18next.t('text.print_qty_must_be_at_least_one')
+          })
+          return
+        }
+      }
+
+      await this._printRouteLabelByRo(records, labelId)
+      return
+    }
+
+    let index = 1
+    for (let record of records) {
+      let max = record.releaseQty ? record.releaseQty / record.packingSize : 1
+      let commands = ''
+      for (let qty = 1; qty <= max; qty++) {
+        let searchParams = new URLSearchParams()
+
+        /* for pallet record mapping */
+        searchParams.append('roName', record.roName)
+        if (record?.binNumber) {
+          searchParams.append('binNumber', record.binNumber)
+        }
+        searchParams.append('locationName', record.locationName)
+        if (!record?.toteNumber) {
+          searchParams.append('qty', record.qty)
+          searchParams.append('releaseQty', record.releaseQty)
+          searchParams.append('counter', `${qty} of ${max}`)
+          searchParams.append('productSku', record.productSku)
+          searchParams.append('productName', record.productName)
+        } else {
+          searchParams.append('productName', record.toteNumber)
+          searchParams.append('counter', `${index} of ${records.length}`)
+        }
+        searchParams.append('stopId', record.stopId)
+        searchParams.append('routeId', record.routeId)
+        searchParams.append('storeId', record.storeId)
+        searchParams.append('storeName', record.storeName)
+        searchParams.append('str', `STR: ${record.storeId}`)
+        searchParams.append('createdAt', `P/D: ${record.createdAt}`)
+        searchParams.append(
+          'storeInformation',
+          `(Store ID) ${record.storeId}, (Store Name) ${record.storeName}, (Route ID) ${record.routeId}, (Stop ID) ${record.stopId}`
+        )
+        try {
+          const response = await fetch(`label-command/${labelId}?${searchParams.toString()}`, {
+            method: 'GET'
+          })
+
+          if (response.status !== 200) {
+            throw `Error : Can't get label command from server (response: ${response.status})`
           }
-          searchParams.append('locationName', record.locationName)
-          if (!record?.toteNumber) {
-            searchParams.append('qty', record.qty)
-            searchParams.append('releaseQty', record.releaseQty)
-            searchParams.append('counter', `${qty} of ${max}`)
-            searchParams.append('productSku', record.productSku)
-            searchParams.append('productName', record.productName)
-          } else {
-            searchParams.append('productName', record.toteNumber)
-            searchParams.append('counter', `${index} of ${records.length}`)
+
+          let command = await response.text()
+
+          if (!this.printer) {
+            this.printer = new DirectPrinter()
           }
-          searchParams.append('stopId', record.stopId)
-          searchParams.append('routeId', record.routeId)
-          searchParams.append('storeId', record.storeId)
-          searchParams.append('storeName', record.storeName)
-          searchParams.append('str', `STR: ${record.storeId}`)
-          searchParams.append('createdAt', `P/D: ${record.createdAt}`)
-          searchParams.append(
-            'storeInformation',
-            `(Store ID) ${record.storeId}, (Store Name) ${record.storeName}, (Route ID) ${record.routeId}, (Stop ID) ${record.stopId}`
-          )
-          try {
-            const response = await fetch(`label-command/${labelId}?${searchParams.toString()}`, {
-              method: 'GET'
-            })
 
-            if (response.status !== 200) {
-              throw `Error : Can't get label command from server (response: ${response.status})`
-            }
+          commands += command + ' '
+        } catch (e) {
+          this._showToast(e)
+
+          delete this.printer
+          break
+        }
+      }
+      if (commands && this.printer) {
+        this.printer.print(commands)
+        await this._sleep(50)
+      }
+      index++
+    }
+  }
 
-            let command = await response.text()
+  async _printRouteLabelByRo(records, labelId) {
+    try {
+      const pad3 = n => String(n).padStart(3, '0')
 
-            if (!this.printer) {
-              this.printer = new DirectPrinter()
+      const parseSeqInput = input => {
+        if (!input || typeof input !== 'string') return []
+        const cleaned = input.replace(/\s/g, '')
+        if (!cleaned) return []
+        const parts = cleaned.split(',')
+        const numbers = new Set()
+        for (const part of parts) {
+          if (!part) continue
+          const range = part.split('-')
+          if (range.length === 1) {
+            const n = parseInt(range[0], 10)
+            if (Number.isFinite(n) && n > 0) numbers.add(n)
+          } else if (range.length === 2) {
+            const a = parseInt(range[0], 10)
+            const b = parseInt(range[1], 10)
+            if (Number.isFinite(a) && Number.isFinite(b) && a > 0 && b > 0) {
+              const from = Math.min(a, b)
+              const to = Math.max(a, b)
+              for (let i = from; i <= to; i++) numbers.add(i)
             }
+          }
+        }
+        return Array.from(numbers).sort((x, y) => x - y)
+      }
 
-            commands += command + ' '
-          } catch (e) {
-            this._showToast(e)
+      for (const record of records) {
+        const field = this._appendSeqField || 'refNo'
+        const base = (record[field] || '').toString()
 
-            delete this.printer
-            break
+        let seqsToPrint = []
+
+        // Check if reprintSeq is provided (for reprinting specific sequences)
+        if (record.reprintSeq) {
+          const reprintSeqs = parseSeqInput(record.reprintSeq)
+          if (reprintSeqs.length > 0) {
+            // Reprint specific sequence numbers (does not increment counter).
+            seqsToPrint = reprintSeqs
           }
         }
-        this.printer.print(commands)
-        index++
-        setTimeout(50)
+
+        // If no reprint sequences, reserve a new range (increments counter).
+        if (seqsToPrint.length === 0) {
+          const printQtyRaw = Number(record.printQty ?? 1)
+          const printQty = Number.isFinite(printQtyRaw) && printQtyRaw > 0 ? Math.floor(printQtyRaw) : 1
+
+          const reserveResp = await client.mutate({
+            mutation: gql`
+              mutation reserveRouteLabelSequence($releaseGoodId: String!, $field: String!, $qty: Int!) {
+                reserveRouteLabelSequence(releaseGoodId: $releaseGoodId, field: $field, qty: $qty) {
+                  releaseGoodId
+                  field
+                  from
+                  to
+                }
+              }
+            `,
+            variables: { releaseGoodId: record.id, field, qty: printQty }
+          })
+
+          if (reserveResp.errors) {
+            throw reserveResp.errors[0]
+          }
+
+          const { from, to } = reserveResp.data.reserveRouteLabelSequence
+          for (let n = from; n <= to; n++) seqsToPrint.push(n)
+
+          // Update UI fields locally (best-effort) only when reserving new range
+          record.lastSeq = to
+          record.history = [record.history, `${from}-${to}`].filter(Boolean).join(', ')
+        }
+
+        let commands = ''
+
+        for (let idx = 0; idx < seqsToPrint.length; idx++) {
+          const seq = seqsToPrint[idx]
+          const seqPadded = pad3(seq)
+          const appendedValue = `${base}-${seqPadded}`
+          const searchParams = new URLSearchParams()
+          searchParams.append('roName', record.name)
+          searchParams.append('refNo', record.refNo || '')
+          searchParams.append('refNo2', record.refNo2 || '')
+          searchParams.append('refNo3', record.refNo3 || '')
+
+          // Override the selected field with appended sequence
+          if (field === 'refNo') searchParams.set('refNo', appendedValue)
+          if (field === 'refNo2') searchParams.set('refNo2', appendedValue)
+          if (field === 'refNo3') searchParams.set('refNo3', appendedValue)
+
+          searchParams.append('seq', String(seq))
+          searchParams.append('seqPadded', seqPadded)
+          searchParams.append('counter', `${idx + 1} of ${seqsToPrint.length}`)
+
+          if (record.stopId != null) searchParams.append('stopId', record.stopId)
+          if (record.routeId != null) searchParams.append('routeId', record.routeId)
+          if (record.storeId != null) searchParams.append('storeId', record.storeId)
+          if (record.storeName != null) searchParams.append('storeName', record.storeName)
+          if (record.storeId != null) searchParams.append('str', `STR: ${record.storeId}`)
+          if (record.createdAt) searchParams.append('createdAt', `P/D: ${record.createdAt}`)
+          searchParams.append(
+            'storeInformation',
+            `(Store ID) ${record.storeId || ''}, (Store Name) ${record.storeName || ''}, (Route ID) ${
+              record.routeId || ''
+            }, (Stop ID) ${record.stopId || ''}`
+          )
+
+          const response = await fetch(`label-command/${labelId}?${searchParams.toString()}`, { method: 'GET' })
+          if (response.status !== 200) {
+            throw `Error : Can't get label command from server (response: ${response.status})`
+          }
+          commands += (await response.text()) + ' '
+        }
+
+        if (commands) {
+          if (!this.printer) {
+            this.printer = new DirectPrinter()
+          }
+          this.printer.print(commands)
+          await this._sleep(50)
+        }
       }
+    } catch (e) {
+      this._showToast(e)
+      delete this.printer
     }
   }
 
@@ -700,6 +1127,85 @@ class RouteLabelPopup extends connect(store)(localize(i18next)(LitElement)) {
       })
     )
   }
+
+  async _openHistoryDialog(record) {
+    try {
+      if (!record?.id) return
+
+      const resp = await client.query({
+        query: gql`
+          query routeLabelSequenceLogs($releaseGoodId: String!, $field: String!) {
+            routeLabelSequenceLogs(releaseGoodId: $releaseGoodId, field: $field) {
+              id
+              releaseGoodId
+              field
+              from
+              to
+              qty
+              createdAt
+              creatorName
+            }
+          }
+        `,
+        variables: { releaseGoodId: record.id, field: this._appendSeqField || 'refNo' }
+      })
+
+      if (resp.errors) throw resp.errors[0]
+      const historyLogs = (resp.data.routeLabelSequenceLogs || []).map(l => {
+        return {
+          ...l,
+          range: `${l.from}-${l.to}`,
+          printedAt: this._formatDateTime(l.createdAt)
+        }
+      })
+
+      openPopup(
+        html`
+          <route-label-history-dialog
+            .target="${record}"
+            .logs="${historyLogs}"
+            .appendSeqField="${this._appendSeqField || 'refNo'}"
+            .routeLabel="${this._routeLabel}"
+            .onReprint="${async reprintSeq => {
+              await this._reprintSelectedFromHistory(record, reprintSeq)
+            }}"
+          ></route-label-history-dialog>
+        `,
+        {
+          backdrop: true,
+          size: 'medium',
+          title: i18next.t('text.print_history')
+        }
+      )
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
+
+  async _reprintSelectedFromHistory(target, reprintSeq) {
+    try {
+      if (!target) return
+
+      if (!reprintSeq || !reprintSeq.trim()) {
+        this._showToast({ message: i18next.t('text.please_enter_reprint_seq') })
+        return
+      }
+
+      const labelId = this._routeLabel && this._routeLabel.id
+      if (!labelId) {
+        this._showToast({
+          type: 'error',
+          message: `${i18next.t('text.no_label_setting_was_found')}. ${i18next.t('text.please_check_your_setting')}`
+        })
+        return
+      }
+
+      await this._printRouteLabelByRo([{ ...target, reprintSeq: reprintSeq.trim() }], labelId)
+      history.back()
+    } catch (e) {
+      this._showToast(e)
+    }
+  }
 }
 
 window.customElements.define('route-label-popup', RouteLabelPopup)