补齐人工复核转换和列表筛选

2026-07-09 18:38:29 +08:00
parent e12bfd77e1
commit 1282d4aede
12 changed files with 983 additions and 15 deletions
--- a/client/src/components/reservation/ReservationManualReviewConversionPanel.vue
+++ b/client/src/components/reservation/ReservationManualReviewConversionPanel.vue
@@ -0,0 +1,465 @@
+<template>
+  <section class="manual-conversion">
+    <header>
+      <div>
+        <h2>{{ t('task.manualConversion.title') }}</h2>
+        <p>{{ t('task.manualConversion.description') }}</p>
+      </div>
+    </header>
+
+    <div class="manual-conversion-form">
+      <label>
+        <span>{{ t('task.manualConversion.targetTaskType') }}</span>
+        <select
+          v-model="manualConversionForm.target_task_type"
+          name="manual_target_task_type"
+          :disabled="busy"
+          @change="handleManualTargetTypeChange"
+        >
+          <option
+            v-for="targetTaskType in manualReviewTargetTaskTypes"
+            :key="targetTaskType"
+            :value="targetTaskType"
+          >
+            {{ formatReservationTaskCard(t, targetTaskType) }}
+          </option>
+        </select>
+      </label>
+
+      <label
+        v-if="manualConversionNeedsTargetOrder"
+        class="manual-conversion-search"
+      >
+        <span>{{ t('task.manualConversion.targetOrderKeyword') }}</span>
+        <div class="manual-conversion-search-row">
+          <input
+            v-model="manualConversionForm.target_order_keyword"
+            name="manual_target_order_keyword"
+            type="search"
+            :disabled="busy"
+            :placeholder="t('task.manualConversion.targetOrderKeywordPlaceholder')"
+          >
+          <button
+            type="button"
+            class="secondary-button"
+            :disabled="busy || targetOrderLoading"
+            @click="searchTargetOrders"
+          >
+            {{ t('task.manualConversion.searchTargetOrders') }}
+          </button>
+        </div>
+      </label>
+
+      <label class="manual-conversion-reason">
+        <span>{{ t('task.manualConversion.reason') }}</span>
+        <textarea
+          v-model="manualConversionForm.reason"
+          name="manual_conversion_reason"
+          rows="3"
+          :disabled="busy"
+          :placeholder="t('task.manualConversion.reasonPlaceholder')"
+        />
+      </label>
+    </div>
+
+    <div
+      v-if="manualConversionNeedsTargetOrder"
+      class="target-order-panel"
+    >
+      <div class="target-order-heading">
+        <strong>{{ t('task.manualConversion.targetOrder') }}</strong>
+        <span>{{ t('task.manualConversion.targetOrderHelp') }}</span>
+      </div>
+
+      <div
+        v-if="targetOrderLoading"
+        class="target-order-state"
+      >
+        {{ t('common.loading') }}
+      </div>
+      <div
+        v-else-if="targetOrderErrorMessage"
+        class="target-order-state target-order-state--error"
+      >
+        {{ targetOrderErrorMessage }}
+      </div>
+      <div
+        v-else-if="!targetOrders.length"
+        class="target-order-state"
+      >
+        {{ t('task.manualConversion.noTargetOrderCandidates') }}
+      </div>
+      <div
+        v-else
+        class="target-order-list"
+      >
+        <label
+          v-for="order in targetOrders"
+          :key="order.order_id"
+          class="target-order-option"
+          :class="{ 'target-order-option--disabled': isDeletedTargetOrder(order) }"
+        >
+          <input
+            v-model="manualConversionForm.target_order_id"
+            type="radio"
+            name="manual_target_order_id"
+            :value="order.order_id"
+            :disabled="busy || isDeletedTargetOrder(order)"
+          >
+          <span>
+            <strong>{{ formatOrderCandidateKey(order) }}</strong>
+            <small>{{ formatOrderCandidateMeta(order) }}</small>
+            <small
+              v-if="isDeletedTargetOrder(order)"
+              class="target-order-warning"
+            >
+              {{ t('task.manualConversion.orderDeletedDisabled') }}
+            </small>
+          </span>
+          <ReservationStatusBadge :status="order.order_status" />
+        </label>
+      </div>
+    </div>
+    <p
+      v-else
+      class="manual-conversion-hint"
+    >
+      {{ t('task.manualConversion.newBookingHint') }}
+    </p>
+
+    <div
+      v-if="conversionErrorMessage"
+      class="manual-conversion-error"
+    >
+      {{ conversionErrorMessage }}
+    </div>
+
+    <footer class="manual-conversion-actions">
+      <button
+        type="button"
+        class="primary-button"
+        :disabled="busy"
+        @click="submitManualReviewConversion"
+      >
+        <i
+          class="pi pi-arrow-right-arrow-left"
+          aria-hidden="true"
+        />
+        {{ t('task.manualConversion.submit') }}
+      </button>
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
+import { fetchReservationOrders } from '@/services/reservationService'
+import type {
+  ReservationManualReviewConversionRequest,
+  ReservationManualReviewTargetTaskType,
+  ReservationOrderListItem,
+} from '@/types/reservation'
+import { formatReservationTaskCard } from '@/utils/reservationDisplay'
+
+withDefaults(
+  defineProps<{
+    busy?: boolean
+  }>(),
+  {
+    busy: false,
+  },
+)
+
+const emit = defineEmits<{
+  submit: [request: ReservationManualReviewConversionRequest]
+}>()
+
+const { t } = useI18n()
+const targetOrders = ref<ReservationOrderListItem[]>([])
+const targetOrderLoading = ref(false)
+const targetOrderErrorMessage = ref('')
+const conversionErrorMessage = ref('')
+const manualReviewTargetTaskTypes: ReservationManualReviewTargetTaskType[] = [
+  'NEW_BOOKING',
+  'UPDATE_BOOKING',
+  'CANCEL_BOOKING',
+]
+const manualConversionForm = ref({
+  target_task_type: 'NEW_BOOKING' as ReservationManualReviewTargetTaskType,
+  target_order_id: '',
+  target_order_keyword: '',
+  reason: '',
+})
+const manualConversionNeedsTargetOrder = computed(() => manualConversionForm.value.target_task_type !== 'NEW_BOOKING')
+
+async function searchTargetOrders(): Promise<void> {
+  targetOrderLoading.value = true
+  targetOrderErrorMessage.value = ''
+  conversionErrorMessage.value = ''
+  try {
+    const result = await fetchReservationOrders({
+      keyword: manualConversionForm.value.target_order_keyword.trim(),
+      page_num: 1,
+      page_size: 8,
+    })
+    targetOrders.value = result.items
+    const selectedOrder = targetOrders.value.find((order) => order.order_id === manualConversionForm.value.target_order_id)
+    if (!selectedOrder || isDeletedTargetOrder(selectedOrder)) {
+      manualConversionForm.value.target_order_id = ''
+    }
+  } catch (error) {
+    targetOrders.value = []
+    targetOrderErrorMessage.value = error instanceof Error ? error.message : String(error)
+  } finally {
+    targetOrderLoading.value = false
+  }
+}
+
+function submitManualReviewConversion(): void {
+  conversionErrorMessage.value = ''
+  if (manualConversionNeedsTargetOrder.value && !manualConversionForm.value.target_order_id) {
+    conversionErrorMessage.value = t('task.manualConversion.targetOrderRequired')
+    return
+  }
+  emit('submit', buildManualReviewConversionRequest())
+}
+
+function buildManualReviewConversionRequest(): ReservationManualReviewConversionRequest {
+  const request: ReservationManualReviewConversionRequest = {
+    target_task_type: manualConversionForm.value.target_task_type,
+  }
+  if (manualConversionNeedsTargetOrder.value) {
+    request.target_order_id = manualConversionForm.value.target_order_id
+  }
+  const reason = manualConversionForm.value.reason.trim()
+  if (reason) {
+    request.reason = reason
+  }
+  return request
+}
+
+function handleManualTargetTypeChange(): void {
+  conversionErrorMessage.value = ''
+  if (!manualConversionNeedsTargetOrder.value) {
+    manualConversionForm.value.target_order_id = ''
+  }
+}
+
+function isDeletedTargetOrder(order: ReservationOrderListItem): boolean {
+  return normalizeStableCode(order.order_status) === 'LOGIC_DELETED'
+}
+
+function normalizeStableCode(code: string | null | undefined): string {
+  return code?.trim().replace(/[\s-]+/g, '_').toUpperCase() ?? ''
+}
+
+function formatOrderCandidateKey(order: ReservationOrderListItem): string {
+  return order.display_order_key ?? order.group_code ?? order.confirmation_number ?? order.temporary_order_no ?? order.order_id
+}
+
+function formatOrderCandidateMeta(order: ReservationOrderListItem): string {
+  return [
+    order.group_code ? `${t('orderList.groupCode')}: ${order.group_code}` : '',
+    order.confirmation_number ? `${t('orderList.confirmationNumber')}: ${order.confirmation_number}` : '',
+    `${t('task.manualConversion.orderId')}: ${order.order_id}`,
+  ]
+    .filter(Boolean)
+    .join(' · ')
+}
+</script>
+
+<style scoped>
+.manual-conversion {
+  display: grid;
+  gap: 16px;
+  border: 1px solid var(--th-color-blue-100);
+  border-radius: var(--th-radius-md);
+  background: var(--th-color-blue-100);
+  padding: 16px;
+}
+
+.manual-conversion header {
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.manual-conversion h2,
+.manual-conversion p {
+  margin: 0;
+}
+
+.manual-conversion h2 {
+  color: var(--th-color-slate-900);
+  font-size: 15px;
+}
+
+.manual-conversion p,
+.manual-conversion-hint,
+.target-order-heading span,
+.target-order-state {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+.manual-conversion-form {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.manual-conversion-form label {
+  display: grid;
+  gap: 7px;
+}
+
+.manual-conversion-form span {
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.manual-conversion-form input,
+.manual-conversion-form select,
+.manual-conversion-form textarea {
+  min-height: 38px;
+  min-width: 0;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-900);
+  padding: 8px 10px;
+}
+
+.manual-conversion-form textarea {
+  resize: vertical;
+}
+
+.manual-conversion-reason {
+  grid-column: 1 / -1;
+}
+
+.manual-conversion-search-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 8px;
+}
+
+.target-order-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.target-order-heading {
+  display: grid;
+  gap: 4px;
+}
+
+.target-order-heading strong {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+}
+
+.target-order-state,
+.manual-conversion-error {
+  border: 1px dashed var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  padding: 12px;
+}
+
+.target-order-state--error,
+.target-order-warning,
+.manual-conversion-error {
+  color: var(--th-color-danger);
+}
+
+.target-order-list {
+  display: grid;
+  gap: 8px;
+}
+
+.target-order-option {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  border: 1px solid var(--th-color-slate-200);
+  border-radius: var(--th-radius-sm);
+  background: var(--th-color-white);
+  padding: 10px 12px;
+}
+
+.target-order-option strong,
+.target-order-option small {
+  display: block;
+}
+
+.target-order-option strong {
+  color: var(--th-color-slate-900);
+  font-size: 13px;
+}
+
+.target-order-option small {
+  margin-top: 4px;
+  color: var(--th-color-slate-500);
+  font-size: 12px;
+  overflow-wrap: anywhere;
+}
+
+.target-order-option--disabled {
+  opacity: 0.66;
+}
+
+.manual-conversion-actions {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.primary-button,
+.secondary-button {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border-radius: var(--th-radius-sm);
+  padding: 8px 14px;
+  font-size: 13px;
+  font-weight: 800;
+  cursor: pointer;
+}
+
+.primary-button {
+  border: 1px solid var(--th-color-blue-600);
+  background: var(--th-color-blue-600);
+  color: var(--th-color-white);
+}
+
+.secondary-button {
+  border: 1px solid var(--th-color-slate-200);
+  background: var(--th-color-white);
+  color: var(--th-color-slate-900);
+}
+
+.primary-button:disabled,
+.secondary-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+@media (max-width: 640px) {
+  .manual-conversion-form,
+  .manual-conversion-search-row {
+    grid-template-columns: 1fr;
+  }
+
+  .target-order-option {
+    grid-template-columns: auto minmax(0, 1fr);
+  }
+}
+</style>
--- a/client/src/components/reservation/ReservationTaskDetailPanel.vue
+++ b/client/src/components/reservation/ReservationTaskDetailPanel.vue
@@ -104,6 +104,12 @@

      <div class="task-detail-body">
        <div class="task-card-main">
+          <ReservationManualReviewConversionPanel
+            v-if="isManualReviewTask"
+            :busy="mutationBusy !== null"
+            @submit="submitManualReviewConversion"
+          />
+
          <ReservationTaskFieldRenderer
            v-model="fieldValues"
            :fields="detail.fields"
@@ -159,16 +165,19 @@ import { RouterLink } from 'vue-router'
 import { useI18n } from 'vue-i18n'

 import ReservationAuditTimeline from '@/components/reservation/ReservationAuditTimeline.vue'
+import ReservationManualReviewConversionPanel from '@/components/reservation/ReservationManualReviewConversionPanel.vue'
 import ReservationOperaPanel from '@/components/reservation/ReservationOperaPanel.vue'
 import ReservationStatusBadge from '@/components/reservation/ReservationStatusBadge.vue'
 import ReservationTaskFieldRenderer from '@/components/reservation/ReservationTaskFieldRenderer.vue'
 import {
+  convertReservationManualReviewTask,
  confirmReservationTask,
  fetchReservationTaskAudits,
  fetchReservationTaskDetail,
  saveReservationTaskDraft,
 } from '@/services/reservationService'
 import type {
+  ReservationManualReviewConversionRequest,
  ReservationOperaOperationResult,
  ReservationRecord,
  ReservationTaskAuditLogResult,
@@ -197,10 +206,11 @@ const audits = ref<ReservationTaskAuditLogResult[]>([])
 const fieldValues = ref<ReservationRecord>({})
 const validationErrors = ref<ReservationFieldValidationErrors>({})
 const validationSummaryActive = ref(false)
-const mutationBusy = ref<'save' | 'confirm' | null>(null)
+const mutationBusy = ref<'save' | 'confirm' | 'manual-convert' | null>(null)

 const canSave = computed(() => Boolean(detail.value?.availability.editable))
 const canConfirm = computed(() => Boolean(detail.value?.availability.confirmable))
+const isManualReviewTask = computed(() => (detail.value ? taskHasManualReviewCode(detail.value) : false))
 const validationErrorMessages = computed(() => toValidationErrorMessages(validationErrors.value))

 watch(
@@ -229,11 +239,7 @@ async function loadTask(taskId: string): Promise<void> {
      fetchReservationTaskDetail(taskId),
      fetchReservationTaskAudits(taskId),
    ])
-    detail.value = nextDetail
-    audits.value = nextAudits.items
-    fieldValues.value = buildInitialFieldValues(nextDetail.fields, nextDetail.draft_payload ?? nextDetail.confirmed_payload)
-    validationErrors.value = {}
-    validationSummaryActive.value = false
+    applyTaskData(nextDetail, nextAudits.items)
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : String(error)
  } finally {
@@ -249,6 +255,36 @@ async function confirmTask(): Promise<void> {
  await mutateTaskPayload('confirm')
 }

+async function submitManualReviewConversion(request: ReservationManualReviewConversionRequest): Promise<void> {
+  if (!detail.value) {
+    return
+  }
+  actionErrorMessage.value = ''
+  notice.value = ''
+  if (request.target_task_type !== 'NEW_BOOKING' && !request.target_order_id) {
+    actionErrorMessage.value = t('task.manualConversion.targetOrderRequired')
+    return
+  }
+
+  mutationBusy.value = 'manual-convert'
+  try {
+    const result = await convertReservationManualReviewTask(detail.value.task_id, request)
+    const [nextDetail, nextAudits] = await Promise.all([
+      fetchReservationTaskDetail(detail.value.task_id),
+      fetchReservationTaskAudits(detail.value.task_id),
+    ])
+    applyTaskData(nextDetail, nextAudits.items)
+    notice.value = t('task.manualConversion.succeeded', {
+      taskType: formatReservationTaskCard(t, result.task_card_type),
+      orderId: result.order_id,
+    })
+  } catch (error) {
+    actionErrorMessage.value = error instanceof Error ? error.message : String(error)
+  } finally {
+    mutationBusy.value = null
+  }
+}
+
 async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
  if (!detail.value) {
    return
@@ -283,6 +319,30 @@ async function mutateTaskPayload(action: 'save' | 'confirm'): Promise<void> {
  }
 }

+function applyTaskData(nextDetail: ReservationTaskDetailResult, nextAudits: ReservationTaskAuditLogResult[]): void {
+  detail.value = nextDetail
+  audits.value = nextAudits
+  fieldValues.value = buildInitialFieldValues(nextDetail.fields, nextDetail.draft_payload ?? nextDetail.confirmed_payload)
+  validationErrors.value = {}
+  validationSummaryActive.value = false
+}
+
+function taskHasManualReviewCode(taskDetail: ReservationTaskDetailResult): boolean {
+  const taskCodes = [
+    taskDetail.system_task_type,
+    taskDetail.task_card_type,
+    ...taskDetail.fields.flatMap((field) => [field.result_type, field.task_type, field.task_subtype]),
+  ]
+  return taskCodes.some((code) => {
+    const normalizedCode = normalizeStableCode(code)
+    return ['MANUAL_REVIEW', 'FALLBACK', 'FALLBACK_REVIEW'].includes(normalizedCode)
+  })
+}
+
+function normalizeStableCode(code: string | null | undefined): string {
+  return code?.trim().replace(/[\s-]+/g, '_').toUpperCase() ?? ''
+}
+
 function validateBeforeConfirm(taskDetail: ReservationTaskDetailResult): boolean {
  const nextErrors = validateReservationFieldValues(taskDetail.fields, fieldValues.value)
  validationErrors.value = nextErrors
--- a/client/src/i18n/locales/en-US.ts
+++ b/client/src/i18n/locales/en-US.ts
@@ -64,6 +64,10 @@ export default {
    subtitle: 'Review Reservation work by order',
    keyword: 'Group Code / Confirmation No.',
    keywordPlaceholder: 'Group code / confirmation no.',
+    groupCode: 'Group code',
+    groupCodePlaceholder: 'Enter group code',
+    confirmationNumber: 'Confirmation no.',
+    confirmationNumberPlaceholder: 'Enter confirmation no.',
    tableTitle: 'Order data',
    totalSuffix: 'orders',
    viewDetail: 'View detail',
@@ -102,6 +106,7 @@ export default {
    keyword: 'Order / email keyword',
    keywordPlaceholder: 'Order no. / email keyword',
    taskType: 'Task type',
+    taskSubtype: 'Task subtype',
    tableTitle: 'Task data',
    totalSuffix: 'tasks',
    noSourceSubject: 'No source subject',
@@ -158,6 +163,25 @@ export default {
    sourceSender: 'Sender',
    sourceReceivedAt: 'Received at',
    sourceSummaryPending: 'Source email summary fields are pending backend support',
+    manualConversion: {
+      title: 'Manual conversion',
+      description: 'Convert a Fallback / manual review task into a processable reservation task.',
+      targetTaskType: 'Target task type',
+      targetOrder: 'Target order',
+      targetOrderHelp: 'Update or cancel tasks must select a non-deleted order.',
+      targetOrderKeyword: 'Target order search',
+      targetOrderKeywordPlaceholder: 'Group code, confirmation no., or order keyword',
+      searchTargetOrders: 'Search orders',
+      noTargetOrderCandidates: 'Enter a keyword and search for target orders',
+      orderDeletedDisabled: 'Deleted orders cannot be selected',
+      newBookingHint: 'New booking conversion does not require a target order; the backend will reassign by task context.',
+      reason: 'Reason',
+      reasonPlaceholder: 'Optional note for the manual decision',
+      submit: 'Convert task',
+      targetOrderRequired: 'Select a target order',
+      succeeded: 'Manual conversion completed: {taskType}, target order {orderId}',
+      orderId: 'Order ID',
+    },
  },
  conversation: {
    title: 'Email conversation detail',
@@ -291,6 +315,7 @@ export default {
    OPERA_EXECUTED: 'OPERA executed',
    OPERA_RETRIED: 'OPERA retried',
    MANUAL_REVIEW_CREATED: 'Manual review created',
+    MANUAL_REVIEW_CONVERT: 'Manual conversion',
  },
  operaOperation: {
    CREATE_RESERVATION: 'Create reservation',
--- a/client/src/i18n/locales/th-TH.ts
+++ b/client/src/i18n/locales/th-TH.ts
@@ -64,6 +64,10 @@ export default {
    subtitle: 'ดูงานการจองตามออเดอร์',
    keyword: 'เลขกรุ๊ป / เลขยืนยัน',
    keywordPlaceholder: 'เลขกรุ๊ป / เลขยืนยัน',
+    groupCode: 'เลขกรุ๊ป',
+    groupCodePlaceholder: 'กรอกเลขกรุ๊ป',
+    confirmationNumber: 'เลขยืนยัน',
+    confirmationNumberPlaceholder: 'กรอกเลขยืนยัน',
    tableTitle: 'ข้อมูลออเดอร์',
    totalSuffix: 'ออเดอร์',
    viewDetail: 'ดูรายละเอียด',
@@ -102,6 +106,7 @@ export default {
    keyword: 'คำค้นออเดอร์ / อีเมล',
    keywordPlaceholder: 'เลขออเดอร์ / คำค้นอีเมล',
    taskType: 'ประเภทงาน',
+    taskSubtype: 'ประเภทย่อยของงาน',
    tableTitle: 'ข้อมูลงาน',
    totalSuffix: 'งาน',
    noSourceSubject: 'ไม่มีหัวข้ออีเมลต้นทาง',
@@ -158,6 +163,25 @@ export default {
    sourceSender: 'ผู้ส่ง',
    sourceReceivedAt: 'เวลารับ',
    sourceSummaryPending: 'ข้อมูลสรุปอีเมลต้นทางยังรอหลังบ้านเพิ่มเติม',
+    manualConversion: {
+      title: 'แปลงงานด้วยคน',
+      description: 'แปลงงาน Fallback / งานตรวจสอบด้วยคนให้เป็นงานการจองที่ประมวลผลได้',
+      targetTaskType: 'ประเภทงานปลายทาง',
+      targetOrder: 'ออเดอร์ปลายทาง',
+      targetOrderHelp: 'งานแก้ไขหรือยกเลิกต้องเลือกออเดอร์ที่ยังไม่ถูกลบ',
+      targetOrderKeyword: 'ค้นหาออเดอร์ปลายทาง',
+      targetOrderKeywordPlaceholder: 'เลขกรุ๊ป เลขยืนยัน หรือคำค้นออเดอร์',
+      searchTargetOrders: 'ค้นหาออเดอร์',
+      noTargetOrderCandidates: 'กรอกคำค้นแล้วค้นหาออเดอร์ปลายทาง',
+      orderDeletedDisabled: 'เลือกออเดอร์ที่ถูกลบแล้วไม่ได้',
+      newBookingHint: 'การแปลงเป็นจองใหม่ไม่จำเป็นต้องเลือกออเดอร์ปลายทาง ระบบหลังบ้านจะจัดออเดอร์ตามบริบทงาน',
+      reason: 'เหตุผลการแปลง',
+      reasonPlaceholder: 'ไม่บังคับ ระบุเหตุผลการตัดสินใจ',
+      submit: 'แปลงงาน',
+      targetOrderRequired: 'โปรดเลือกออเดอร์ปลายทาง',
+      succeeded: 'แปลงงานสำเร็จ: {taskType}, ออเดอร์ปลายทาง {orderId}',
+      orderId: 'รหัสออเดอร์',
+    },
  },
  conversation: {
    title: 'รายละเอียดเธรดอีเมล',
@@ -291,6 +315,7 @@ export default {
    OPERA_EXECUTED: 'ดำเนินการ OPERA',
    OPERA_RETRIED: 'ลอง OPERA ใหม่',
    MANUAL_REVIEW_CREATED: 'สร้างงานตรวจสอบด้วยคน',
+    MANUAL_REVIEW_CONVERT: 'แปลงงานด้วยคน',
  },
  operaOperation: {
    CREATE_RESERVATION: 'สร้างการจอง',
--- a/client/src/i18n/locales/zh-CN.ts
+++ b/client/src/i18n/locales/zh-CN.ts
@@ -64,6 +64,10 @@ export default {
    subtitle: '按订单查看预订处理入口',
    keyword: '团队号 / 确认号',
    keywordPlaceholder: '团队号 / 确认号',
+    groupCode: '团队号',
+    groupCodePlaceholder: '输入团队号',
+    confirmationNumber: '确认号',
+    confirmationNumberPlaceholder: '输入确认号',
    tableTitle: '订单数据',
    totalSuffix: '条订单',
    viewDetail: '查看详情',
@@ -102,6 +106,7 @@ export default {
    keyword: '订单 / 邮件关键词',
    keywordPlaceholder: '订单号 / 邮件关键词',
    taskType: '任务类型',
+    taskSubtype: '任务细分',
    tableTitle: '任务数据',
    totalSuffix: '条任务',
    noSourceSubject: '暂无来源主题',
@@ -158,6 +163,25 @@ export default {
    sourceSender: '发件人',
    sourceReceivedAt: '接收时间',
    sourceSummaryPending: '来源邮件摘要字段待后端补充',
+    manualConversion: {
+      title: '人工转换',
+      description: '将人工复核任务转换为可处理的预订任务。',
+      targetTaskType: '目标任务类型',
+      targetOrder: '目标订单',
+      targetOrderHelp: '修改或取消预订必须选择一个未删除订单。',
+      targetOrderKeyword: '目标订单搜索',
+      targetOrderKeywordPlaceholder: '团队号、确认号或订单关键词',
+      searchTargetOrders: '搜索订单',
+      noTargetOrderCandidates: '请输入关键词并搜索目标订单',
+      orderDeletedDisabled: '已删除订单不可选',
+      newBookingHint: '转为新预订时不强制选择目标订单，后端会按当前任务重新归属。',
+      reason: '转换原因',
+      reasonPlaceholder: '可选，说明人工判断依据',
+      submit: '转换任务',
+      targetOrderRequired: '请选择目标订单',
+      succeeded: '人工转换已完成：{taskType}，目标订单 {orderId}',
+      orderId: '订单编号',
+    },
  },
  conversation: {
    title: '邮件会话详情',
@@ -291,6 +315,7 @@ export default {
    OPERA_EXECUTED: 'OPERA 执行',
    OPERA_RETRIED: 'OPERA 重试',
    MANUAL_REVIEW_CREATED: '创建人工复核',
+    MANUAL_REVIEW_CONVERT: '人工转换',
  },
  operaOperation: {
    CREATE_RESERVATION: '创建预订',
--- a/client/src/services/reservationService.ts
+++ b/client/src/services/reservationService.ts
@@ -5,6 +5,8 @@ import {
 import { reservationHotelId } from '@/config/reservationConfig'
 import { getJson, sendJson } from '@/services/httpClient'
 import type {
+  ReservationManualReviewConversionRequest,
+  ReservationManualReviewConversionResult,
  ReservationOperaOperationResult,
  ReservationOperaSimulationRequest,
  ReservationOrderDetailResult,
@@ -78,6 +80,17 @@ export async function confirmReservationTask(
  return sendJson<ReservationTaskPayloadMutationResult>(`/api/reservation/tasks/${taskId}/confirm`, 'POST', request)
 }

+export async function convertReservationManualReviewTask(
+  taskId: string,
+  request: ReservationManualReviewConversionRequest,
+): Promise<ReservationManualReviewConversionResult> {
+  return sendJson<ReservationManualReviewConversionResult>(
+    `/api/reservation/tasks/${encodeURIComponent(taskId)}/manual-review-conversions`,
+    'POST',
+    request,
+  )
+}
+
 export async function executeReservationOperaOperation(
  taskId: string,
  operationId: string,
--- a/client/src/tests/reservationService.spec.ts
+++ b/client/src/tests/reservationService.spec.ts
@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest'

 import {
+  convertReservationManualReviewTask,
  fetchReservationOrderDetail,
  fetchReservationOrders,
  fetchReservationTaskDetail,
@@ -76,6 +77,31 @@ describe('reservationService real API mode', () => {
    expect(result.items[0]?.source_subject).toBe('Booking Request')
  })

+  it('passes task subtype and terminal task status filters to the backend', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [],
+        page: {
+          page_num: 1,
+          page_size: 20,
+          total: 0,
+        },
+      }),
+    )
+
+    await fetchReservationTaskList({
+      task_subtype: 'RATE_CHANGE',
+      task_status: 'FAILED',
+      page_num: 1,
+      page_size: 20,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/tasks?hotel_id=HOTEL-TEST&task_subtype=RATE_CHANGE&task_status=FAILED&page_num=1&page_size=20',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
  it('fetches the order list from the backend by default', async () => {
    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
      mockJsonResponse({
@@ -117,6 +143,70 @@ describe('reservationService real API mode', () => {
    expect(result.items[0]?.next_processable_task_id).toBe('10002')
  })

+  it('passes order status and business-key filters to the backend', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        items: [],
+        page: {
+          page_num: 2,
+          page_size: 10,
+          total: 0,
+        },
+      }),
+    )
+
+    await fetchReservationOrders({
+      order_status: 'LOGIC_DELETED',
+      group_code: 'GRP-001',
+      confirmation_number: 'CNF-001',
+      keyword: 'VIP',
+      page_num: 2,
+      page_size: 10,
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/orders?hotel_id=HOTEL-TEST&order_status=LOGIC_DELETED&group_code=GRP-001&confirmation_number=CNF-001&keyword=VIP&page_num=2&page_size=10',
+      expect.objectContaining({ method: 'GET' }),
+    )
+  })
+
+  it('converts a manual review task through the backend endpoint', async () => {
+    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
+      mockJsonResponse({
+        task_id: '10001',
+        order_id: '20002',
+        original_order_id: '20001',
+        system_task_type: 'UPDATE_BOOKING',
+        task_card_type: 'UPDATE_BOOKING',
+        task_status: 'PENDING_CONFIRM',
+        original_order_logic_deleted: true,
+      }),
+    )
+
+    const result = await convertReservationManualReviewTask('10001', {
+      target_task_type: 'UPDATE_BOOKING',
+      target_order_id: '20002',
+      reason: 'Matched by group code',
+    })
+
+    expect(fetchMock).toHaveBeenCalledWith(
+      '/api/reservation/tasks/10001/manual-review-conversions',
+      expect.objectContaining({
+        method: 'POST',
+        headers: expect.objectContaining({
+          'Content-Type': 'application/json',
+        }),
+        body: JSON.stringify({
+          target_task_type: 'UPDATE_BOOKING',
+          target_order_id: '20002',
+          reason: 'Matched by group code',
+        }),
+      }),
+    )
+    expect(result.system_task_type).toBe('UPDATE_BOOKING')
+    expect(result.original_order_logic_deleted).toBe(true)
+  })
+
  it('fetches order detail from the backend by default', async () => {
    const fetchMock = vi.spyOn(globalThis, 'fetch').mockResolvedValue(
      mockJsonResponse({
--- a/client/src/tests/reservationTaskDetailPanel.spec.ts
+++ b/client/src/tests/reservationTaskDetailPanel.spec.ts
@@ -6,6 +6,9 @@ import { createMemoryHistory, createRouter } from 'vue-router'
 import zhCN from '@/i18n/locales/zh-CN'
 import ReservationTaskDetailPanel from '@/components/reservation/ReservationTaskDetailPanel.vue'
 import type {
+  ReservationManualReviewConversionResult,
+  ReservationOrderListItem,
+  ReservationOrderListResult,
  ReservationTaskAuditLogResult,
  ReservationTaskDetailResult,
  ReservationTaskFieldResult,
@@ -18,6 +21,8 @@ vi.mock('@/services/reservationService', async (importOriginal) => {
    ...actual,
    fetchReservationTaskDetail: vi.fn(),
    fetchReservationTaskAudits: vi.fn(),
+    fetchReservationOrders: vi.fn(),
+    convertReservationManualReviewTask: vi.fn(),
    saveReservationTaskDraft: vi.fn(),
    confirmReservationTask: vi.fn(),
  }
@@ -70,6 +75,50 @@ function createMutationResult(taskStatus = 'PENDING_CONFIRM'): ReservationTaskPa
  }
 }

+function createManualReviewConversionResult(
+  overrides: Partial<ReservationManualReviewConversionResult> = {},
+): ReservationManualReviewConversionResult {
+  return {
+    task_id: '10001',
+    order_id: '20001',
+    original_order_id: '20001',
+    system_task_type: 'NEW_BOOKING',
+    task_card_type: 'NEW_BOOKING',
+    task_status: 'PENDING_CONFIRM',
+    original_order_logic_deleted: false,
+    ...overrides,
+  }
+}
+
+function createOrderCandidate(overrides: Partial<ReservationOrderListItem> = {}): ReservationOrderListItem {
+  return {
+    order_id: '20002',
+    hotel_id: 'HOTEL-TEST',
+    order_status: 'ACTIVE',
+    display_order_key: 'GRP-001',
+    temporary_order_no: null,
+    confirmation_number: 'CNF-001',
+    group_code: 'GRP-001',
+    display_name: 'GRP-001',
+    open_task_count: 1,
+    next_processable_task_id: null,
+    created_at: '2026-07-08T03:00:00Z',
+    updated_at: '2026-07-08T03:10:00Z',
+    ...overrides,
+  }
+}
+
+function createOrderCandidateResult(items: ReservationOrderListItem[]): ReservationOrderListResult {
+  return {
+    items,
+    page: {
+      page_num: 1,
+      page_size: 8,
+      total: items.length,
+    },
+  }
+}
+
 function createAudit(auditId: string, action: string): ReservationTaskAuditLogResult {
  return {
    audit_id: auditId,
@@ -162,6 +211,8 @@ describe('ReservationTaskDetailPanel', () => {
  beforeEach(() => {
    vi.mocked(service.fetchReservationTaskDetail).mockReset()
    vi.mocked(service.fetchReservationTaskAudits).mockReset()
+    vi.mocked(service.fetchReservationOrders).mockReset()
+    vi.mocked(service.convertReservationManualReviewTask).mockReset()
    vi.mocked(service.saveReservationTaskDraft).mockReset()
    vi.mocked(service.confirmReservationTask).mockReset()
    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(createTaskDetail())
@@ -169,6 +220,8 @@ describe('ReservationTaskDetailPanel', () => {
      task_id: '10001',
      items: [],
    })
+    vi.mocked(service.fetchReservationOrders).mockResolvedValue(createOrderCandidateResult([]))
+    vi.mocked(service.convertReservationManualReviewTask).mockResolvedValue(createManualReviewConversionResult())
  })

  it('shows draft save errors instead of leaving an unhandled rejection', async () => {
@@ -335,4 +388,115 @@ describe('ReservationTaskDetailPanel', () => {
    expect(wrapper.text()).toContain('查看邮件会话')
    expect(wrapper.text()).not.toContain('接口待补')
  })
+
+  it('converts a manual review task to a new booking without a target order', async () => {
+    vi.mocked(service.fetchReservationTaskDetail)
+      .mockResolvedValueOnce(
+        createTaskDetail({
+          system_task_type: 'MANUAL_REVIEW',
+          task_card_type: 'MANUAL_REVIEW',
+        }),
+      )
+      .mockResolvedValueOnce(
+        createTaskDetail({
+          system_task_type: 'NEW_BOOKING',
+          task_card_type: 'NEW_BOOKING',
+        }),
+      )
+    vi.mocked(service.fetchReservationTaskAudits)
+      .mockResolvedValueOnce({
+        task_id: '10001',
+        items: [createAudit('audit-1', 'TASK_LOADED')],
+      })
+      .mockResolvedValueOnce({
+        task_id: '10001',
+        items: [createAudit('audit-2', 'MANUAL_REVIEW_CONVERT')],
+      })
+
+    const wrapper = await mountPanel()
+    expect(wrapper.text()).toContain('人工转换')
+
+    await wrapper.find('select[name="manual_target_task_type"]').setValue('NEW_BOOKING')
+    await wrapper.find('textarea[name="manual_conversion_reason"]').setValue('识别为新预订')
+    await findButton(wrapper, '转换任务').trigger('click')
+    await flushPromises()
+
+    expect(service.convertReservationManualReviewTask).toHaveBeenCalledWith('10001', {
+      target_task_type: 'NEW_BOOKING',
+      reason: '识别为新预订',
+    })
+    expect(service.fetchReservationTaskDetail).toHaveBeenCalledTimes(2)
+    expect(service.fetchReservationTaskAudits).toHaveBeenCalledTimes(2)
+    expect(wrapper.text()).toContain('人工转换已完成')
+    expect(wrapper.text()).toContain('人工转换')
+    expect(wrapper.text()).not.toContain('MANUAL_REVIEW_CONVERT')
+  })
+
+  it('requires a non-deleted target order when converting manual review to update booking', async () => {
+    vi.mocked(service.fetchReservationTaskDetail).mockResolvedValue(
+      createTaskDetail({
+        system_task_type: 'MANUAL_REVIEW',
+        task_card_type: 'MANUAL_REVIEW',
+      }),
+    )
+    vi.mocked(service.fetchReservationOrders).mockResolvedValue(
+      createOrderCandidateResult([
+        createOrderCandidate({
+          order_id: '20002',
+          display_order_key: 'GRP-ACTIVE',
+          group_code: 'GRP-ACTIVE',
+          confirmation_number: 'CNF-ACTIVE',
+          order_status: 'ACTIVE',
+        }),
+        createOrderCandidate({
+          order_id: '20003',
+          display_order_key: 'GRP-DELETED',
+          group_code: 'GRP-DELETED',
+          confirmation_number: 'CNF-DELETED',
+          order_status: 'LOGIC_DELETED',
+        }),
+      ]),
+    )
+    vi.mocked(service.convertReservationManualReviewTask).mockResolvedValue(
+      createManualReviewConversionResult({
+        order_id: '20002',
+        original_order_id: '20001',
+        system_task_type: 'UPDATE_BOOKING',
+        task_card_type: 'UPDATE_BOOKING',
+      }),
+    )
+
+    const wrapper = await mountPanel()
+
+    await wrapper.find('select[name="manual_target_task_type"]').setValue('UPDATE_BOOKING')
+    await findButton(wrapper, '转换任务').trigger('click')
+    await flushPromises()
+
+    expect(service.convertReservationManualReviewTask).not.toHaveBeenCalled()
+    expect(wrapper.text()).toContain('请选择目标订单')
+
+    await wrapper.find('input[name="manual_target_order_keyword"]').setValue('GRP')
+    await findButton(wrapper, '搜索订单').trigger('click')
+    await flushPromises()
+
+    expect(service.fetchReservationOrders).toHaveBeenCalledWith(
+      expect.objectContaining({
+        keyword: 'GRP',
+        page_num: 1,
+        page_size: 8,
+      }),
+    )
+    expect(wrapper.text()).toContain('GRP-ACTIVE')
+    expect(wrapper.text()).toContain('GRP-DELETED')
+    expect(wrapper.find('input[value="20003"]').attributes('disabled')).toBeDefined()
+
+    await wrapper.find('input[value="20002"]').setValue()
+    await findButton(wrapper, '转换任务').trigger('click')
+    await flushPromises()
+
+    expect(service.convertReservationManualReviewTask).toHaveBeenCalledWith('10001', {
+      target_task_type: 'UPDATE_BOOKING',
+      target_order_id: '20002',
+    })
+  })
 })
--- a/client/src/tests/reservationViews.spec.ts
+++ b/client/src/tests/reservationViews.spec.ts
@@ -310,6 +310,29 @@ describe('reservation P0 views', () => {
    expect(wrapper.text()).not.toContain('接口待接入')
  })

+  it('filters order list with order status and business-key fields', async () => {
+    vi.mocked(service.fetchReservationOrders).mockResolvedValue(createOrderListResult())
+
+    const wrapper = await mountWithPlugins(ReservationOrderListView)
+    await vi.dynamicImportSettled()
+
+    await wrapper.find('select[name="order_status"]').setValue('LOGIC_DELETED')
+    await vi.dynamicImportSettled()
+    await wrapper.find('input[name="group_code"]').setValue('GRP-009')
+    await vi.dynamicImportSettled()
+    await wrapper.find('input[name="confirmation_number"]').setValue('CNF-009')
+    await vi.dynamicImportSettled()
+
+    expect(service.fetchReservationOrders).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        order_status: 'LOGIC_DELETED',
+        group_code: 'GRP-009',
+        confirmation_number: 'CNF-009',
+        page_num: 1,
+      }),
+    )
+  })
+
  it('paginates order list requests with backend page metadata', async () => {
    vi.mocked(service.fetchReservationOrders)
      .mockResolvedValueOnce(createOrderListResult('GRP-001', { page_num: 1, page_size: 20, total: 41 }))
@@ -363,26 +386,31 @@ describe('reservation P0 views', () => {
      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
+      .mockResolvedValueOnce(createTaskListResult('GRP-001', 'Booking Request', { page_num: 1, page_size: 20, total: 45 }))
      .mockResolvedValueOnce(createTaskListResult('GRP-002', 'Booking Update', { page_num: 2, page_size: 20, total: 45 }))

    const wrapper = await mountWithPlugins(ReservationTaskListView)
    await vi.dynamicImportSettled()

-    const selects = wrapper.findAll('select')
    expect(wrapper.text()).not.toContain('订单状态筛选待后端接入')
-    expect(selects[2]!.attributes('disabled')).toBeUndefined()
+    expect(wrapper.find('select[name="order_status"]').attributes('disabled')).toBeUndefined()
+    expect(wrapper.find('select[name="task_status"]').text()).toContain('执行中')
+    expect(wrapper.find('select[name="task_status"]').text()).toContain('失败')

-    await selects[1]!.setValue('READY')
+    await wrapper.find('select[name="task_status"]').setValue('FAILED')
    await vi.dynamicImportSettled()
-    await selects[2]!.setValue('ENDED')
+    await wrapper.find('select[name="task_subtype"]').setValue('RATE_CHANGE')
    await vi.dynamicImportSettled()
-    await selects[3]!.setValue('true')
+    await wrapper.find('select[name="order_status"]').setValue('ENDED')
+    await vi.dynamicImportSettled()
+    await wrapper.find('select[name="queue_participation"]').setValue('true')
    await vi.dynamicImportSettled()

    const taskListCalls = vi.mocked(service.fetchReservationTaskList).mock.calls
    const filteredTaskRequest = taskListCalls[taskListCalls.length - 1]?.[0] ?? {}
    expect(filteredTaskRequest).toMatchObject({
-      task_status: 'READY',
+      task_status: 'FAILED',
+      task_subtype: 'RATE_CHANGE',
      order_status: 'ENDED',
      queue_participation: true,
      page_num: 1,
@@ -393,7 +421,8 @@ describe('reservation P0 views', () => {

    expect(service.fetchReservationTaskList).toHaveBeenLastCalledWith(
      expect.objectContaining({
-        task_status: 'READY',
+        task_status: 'FAILED',
+        task_subtype: 'RATE_CHANGE',
        order_status: 'ENDED',
        queue_participation: true,
        page_num: 2,
--- a/client/src/types/reservation.ts
+++ b/client/src/types/reservation.ts
@@ -325,6 +325,24 @@ export interface ReservationTaskPayloadMutationResult {
  opera_operations: ReservationOperaOperationResult[]
 }

+export type ReservationManualReviewTargetTaskType = 'NEW_BOOKING' | 'UPDATE_BOOKING' | 'CANCEL_BOOKING'
+
+export interface ReservationManualReviewConversionRequest {
+  target_task_type: ReservationManualReviewTargetTaskType
+  target_order_id?: string
+  reason?: string
+}
+
+export interface ReservationManualReviewConversionResult {
+  task_id: string
+  order_id: string
+  original_order_id: string
+  system_task_type: string
+  task_card_type: ReservationTaskCardType | string
+  task_status: ReservationTaskStatus | string
+  original_order_logic_deleted: boolean
+}
+
 export interface ReservationOperaOperationResult {
  operation_id: string
  task_id: string
--- a/client/src/views/reservation/ReservationOrderListView.vue
+++ b/client/src/views/reservation/ReservationOrderListView.vue
@@ -34,14 +34,36 @@
          <span>{{ t('workbench.orderStatus') }}</span>
          <select
            v-model="filters.order_status"
+            name="order_status"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
            <option value="TEMPORARY">{{ t('status.TEMPORARY') }}</option>
            <option value="ACTIVE">{{ t('status.ACTIVE') }}</option>
            <option value="ENDED">{{ t('status.ENDED') }}</option>
+            <option value="LOGIC_DELETED">{{ t('status.LOGIC_DELETED') }}</option>
          </select>
        </label>
+        <label>
+          <span>{{ t('orderList.groupCode') }}</span>
+          <input
+            v-model="filters.group_code"
+            name="group_code"
+            type="search"
+            :placeholder="t('orderList.groupCodePlaceholder')"
+            @input="resetToFirstPage"
+          >
+        </label>
+        <label>
+          <span>{{ t('orderList.confirmationNumber') }}</span>
+          <input
+            v-model="filters.confirmation_number"
+            name="confirmation_number"
+            type="search"
+            :placeholder="t('orderList.confirmationNumberPlaceholder')"
+            @input="resetToFirstPage"
+          >
+        </label>
      </div>
    </section>

@@ -192,6 +214,8 @@ let orderListRequestSequence = 0
 const filters = reactive<ReservationOrderListFilters>({
  keyword: '',
  order_status: '',
+  group_code: '',
+  confirmation_number: '',
  page_num: 1,
  page_size: 20,
 })
@@ -232,6 +256,8 @@ async function loadOrders(): Promise<void> {
 function resetFilters(): void {
  filters.keyword = ''
  filters.order_status = ''
+  filters.group_code = ''
+  filters.confirmation_number = ''
  filters.page_num = 1
  filters.page_size = 20
 }
@@ -291,7 +317,7 @@ function formatOrderKey(order: ReservationOrderListItem): string {

 .filter-grid {
  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 0;
 }
--- a/client/src/views/reservation/ReservationTaskListView.vue
+++ b/client/src/views/reservation/ReservationTaskListView.vue
@@ -35,6 +35,7 @@
          <span>{{ t('taskList.taskType') }}</span>
          <select
            v-model="filters.task_type"
+            name="task_type"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
@@ -45,15 +46,38 @@
            <option value="INFORMATIONAL_MESSAGE">{{ t('cardType.MESSAGE_NOTIFICATION') }}</option>
          </select>
        </label>
+        <label>
+          <span>{{ t('taskList.taskSubtype') }}</span>
+          <select
+            v-model="filters.task_subtype"
+            name="task_subtype"
+            @change="resetToFirstPage"
+          >
+            <option value="">{{ t('common.all') }}</option>
+            <option value="NEW_BOOKING">{{ t('taskSubtype.NEW_BOOKING') }}</option>
+            <option value="UPDATE_BOOKING">{{ t('taskSubtype.UPDATE_BOOKING') }}</option>
+            <option value="CANCEL_BOOKING">{{ t('taskSubtype.CANCEL_BOOKING') }}</option>
+            <option value="RATE_CHANGE">{{ t('taskSubtype.RATE_CHANGE') }}</option>
+            <option value="UPDATE_STAY_DATES">{{ t('taskSubtype.UPDATE_STAY_DATES') }}</option>
+            <option value="UPDATE_ROOM_TYPE">{{ t('taskSubtype.UPDATE_ROOM_TYPE') }}</option>
+            <option value="UPDATE_FIX_CHARGE">{{ t('taskSubtype.UPDATE_FIX_CHARGE') }}</option>
+            <option value="NEW_GROUP_BLOCK">{{ t('taskSubtype.NEW_GROUP_BLOCK') }}</option>
+            <option value="NEW_FIT_RESERVATION">{{ t('taskSubtype.NEW_FIT_RESERVATION') }}</option>
+            <option value="MANUAL_REVIEW">{{ t('taskSubtype.MANUAL_REVIEW') }}</option>
+          </select>
+        </label>
        <label>
          <span>{{ t('workbench.taskStatus') }}</span>
          <select
            v-model="filters.task_status"
+            name="task_status"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
            <option value="PENDING_CONFIRM">{{ t('status.PENDING_CONFIRM') }}</option>
            <option value="READY">{{ t('status.READY') }}</option>
+            <option value="EXECUTING">{{ t('status.EXECUTING') }}</option>
+            <option value="FAILED">{{ t('status.FAILED') }}</option>
            <option value="BLOCKED">{{ t('status.BLOCKED') }}</option>
            <option value="COMPLETED">{{ t('status.COMPLETED') }}</option>
          </select>
@@ -62,6 +86,7 @@
          <span>{{ t('workbench.orderStatus') }}</span>
          <select
            v-model="filters.order_status"
+            name="order_status"
            @change="resetToFirstPage"
          >
            <option value="">{{ t('common.all') }}</option>
@@ -75,6 +100,7 @@
          <span>{{ t('taskList.queueParticipation') }}</span>
          <select
            v-model="filters.queue_participation"
+            name="queue_participation"
            @change="resetToFirstPage"
          >
            <option :value="undefined">{{ t('taskList.queueAll') }}</option>
@@ -251,6 +277,7 @@ let taskListRequestSequence = 0
 const filters = reactive<ReservationTaskListFilters>({
  keyword: '',
  task_type: '',
+  task_subtype: '',
  task_status: '',
  order_status: '',
  queue_participation: undefined,
@@ -294,6 +321,7 @@ async function loadTasks(): Promise<void> {
 function resetFilters(): void {
  filters.keyword = ''
  filters.task_type = ''
+  filters.task_subtype = ''
  filters.task_status = ''
  filters.order_status = ''
  filters.queue_participation = undefined
@@ -345,7 +373,7 @@ function createPage(pageNum: number, pageSize: number, total: number): Reservati

 .filter-grid {
  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
+  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  padding: 18px 20px 0;
 }