From 3ffaef86f4794fc431cd4035622994532199e29b Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Wed, 29 Jul 2026 09:51:32 +0600
Subject: [PATCH 1/2] refactor(vue): split OrderView into composable and dialog
 components

Extract order screen logic to useOrderView and product/customer dialogs so
OrderView.vue stays under the 1000 LOC target without changing UX.

Closes #339
---
 vueManager/src/components/OrderView.vue       | 2469 +----------------
 .../order/OrderAddProductDialog.vue           |  265 ++
 .../order/OrderDuplicateCustomerDialog.vue    |  134 +
 .../order/OrderEditProductDialog.vue          |  359 +++
 vueManager/src/composables/useOrderView.js    | 1753 ++++++++++++
 5 files changed, 2612 insertions(+), 2368 deletions(-)
 create mode 100644 vueManager/src/components/order/OrderAddProductDialog.vue
 create mode 100644 vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
 create mode 100644 vueManager/src/components/order/OrderEditProductDialog.vue
 create mode 100644 vueManager/src/composables/useOrderView.js

diff --git a/vueManager/src/components/OrderView.vue b/vueManager/src/components/OrderView.vue
index 589f7286..befa2e4c 100644
--- a/vueManager/src/components/OrderView.vue
+++ b/vueManager/src/components/OrderView.vue
@@ -1,1742 +1,85 @@
 <script setup>
 import { useLexicon } from '@vuetools/useLexicon'
-import AutoComplete from 'primevue/autocomplete'
 import Button from 'primevue/button'
 import ConfirmDialog from 'primevue/confirmdialog'
-import Dialog from 'primevue/dialog'
-import InputNumber from 'primevue/inputnumber'
-import InputText from 'primevue/inputtext'
-import Select from 'primevue/select'
 import Tab from 'primevue/tab'
 import TabList from 'primevue/tablist'
 import TabPanel from 'primevue/tabpanel'
 import TabPanels from 'primevue/tabpanels'
 import Tabs from 'primevue/tabs'
-import Textarea from 'primevue/textarea'
 import Toast from 'primevue/toast'
-import { useConfirm } from 'primevue/useconfirm'
-import { useToast } from 'primevue/usetoast'
-import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, shallowRef, watch } from 'vue'
+import { provide } from 'vue'
 
 import { ORDER_CONTEXT_KEY } from '../composables/orderContext.js'
-import { useOrderFieldHelpers } from '../composables/useOrderFieldHelpers.js'
-import { useOrderFormatters } from '../composables/useOrderFormatters.js'
-import request from '../request.js'
-import { normalizeOrderPluginTab } from '../utils/orderPluginTab.js'
-import { parseRepeaterModelValue, REPEATER_XTYPE } from '../utils/repeaterField.js'
+import { useOrderView } from '../composables/useOrderView.js'
+import OrderAddProductDialog from './order/OrderAddProductDialog.vue'
 import OrderAddressTab from './order/OrderAddressTab.vue'
+import OrderDuplicateCustomerDialog from './order/OrderDuplicateCustomerDialog.vue'
+import OrderEditProductDialog from './order/OrderEditProductDialog.vue'
 import OrderHistoryTab from './order/OrderHistoryTab.vue'
 import OrderInfoTab from './order/OrderInfoTab.vue'
 import OrderProductsTab from './order/OrderProductsTab.vue'
 
-const toast = useToast()
-const confirm = useConfirm()
 const { _ } = useLexicon()
 
-const loading = ref(true)
-const saving = ref(false)
-const order = ref(null)
-const products = ref([])
-const productsColumns = ref([])
-const logs = ref([])
-const statuses = ref([])
-const deliveries = ref([])
-const payments = ref([])
-
-// Model fields configuration
-const orderFields = ref([])
-const addressFields = ref([])
-
-// Sections
-const orderSections = ref([])
-const addressSections = ref([])
-
-// Combo options from API
-const orderComboOptions = ref({})
-const addressComboOptions = ref({})
-
-// Extra fields (from Object Extension)
-const orderExtraFields = ref([])
-const addressExtraFields = ref([])
-
-// Edit product dialog state
-const editProductDialogVisible = ref(false)
-const editingProduct = ref(null)
-const editProductForm = ref({
-  count: 1,
-  price: 0,
-  weight: 0,
-})
-const savingProduct = ref(false)
-
-// Options editing state
-const optionsEditMode = ref('table') // 'table' or 'json'
-const optionsTableData = ref([]) // Array of { type, key, value, isComplex, fieldValues, loadingValues }
-const optionsJsonText = ref('') // JSON string for json mode
-const optionsJsonError = ref('') // JSON parse error message
-
-// Product option fields (color, size, etc.)
-const productOptionFields = ref([])
-const loadingOptionFields = ref(false)
-
-// Add product dialog state
-const addProductDialogVisible = ref(false)
-const selectedProduct = ref(null)
-const productSuggestions = ref([])
-const searchingProducts = ref(false)
-const addProductForm = ref({
-  count: 1,
-  price: 0,
-  weight: 0,
-  options: {},
-})
-const savingNewProduct = ref(false)
-
-// Customer search state (for create mode)
-const selectedCustomer = ref(null)
-const customerSuggestions = ref([])
-const searchingCustomers = ref(false)
-const createCustomerFromData = ref(false)
-
-// Order tabs: built-ins (info/products/address/history) + MS3OrderTabsRegistry plugin tabs
-const orderActiveTab = ref('info')
-const pluginTabs = ref([])
-/** ExtJS plugin panels mounted lazily per tab key; destroyed in onBeforeUnmount */
-const mountedExtPluginComponents = ref({})
-
-// Duplicate customer dialog state
-const showDuplicateDialog = ref(false)
-const duplicateCustomer = ref(null)
-const pendingOrderData = ref(null)
-
-const orderId = computed(() => {
-  // Try to get from ms3.config first
-  // Note: ms3 is a global variable (not window.ms3) because it's declared with 'let'
-
-  const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
-  if (ms3Config?.order_id) {
-    const configId = ms3Config.order_id
-    // Return 'new' string as is, otherwise parse as int
-    return configId === 'new' ? 'new' : parseInt(configId) || 0
-  }
-  // Fallback: get from URL
-  const urlParams = new URLSearchParams(window.location.search)
-  const urlId = urlParams.get('id')
-  // Return 'new' string as is, otherwise parse as int
-  return urlId === 'new' ? 'new' : parseInt(urlId) || 0
-})
-
-const isCreateMode = computed(() => {
-  return orderId.value === 'new' || orderId.value === 0
-})
-
-const managerConfig = computed(() => {
-  return typeof ms3 !== 'undefined' ? ms3.config : {}
-})
-
-/** Fixed positions 0–3; must stay in sync with RESERVED_ORDER_TAB_KEYS in orderPluginTab.js */
-const builtInOrderTabs = computed(() => [
-  { key: 'info', title: _('order_info'), position: 0, hideOnCreate: false, kind: 'builtin' },
-  { key: 'products', title: _('order_products'), position: 1, hideOnCreate: true, kind: 'builtin' },
-  { key: 'address', title: _('order_address'), position: 2, hideOnCreate: false, kind: 'builtin' },
-  { key: 'history', title: _('order_history'), position: 3, hideOnCreate: true, kind: 'builtin' },
-])
-
-/** Built-in + plugin tabs, sorted by `position`; respects hideOnCreate per tab */
-const orderTabsConfig = computed(() => {
-  const builtIn = builtInOrderTabs.value.filter(t => !(t.hideOnCreate && isCreateMode.value))
-  const plugins = pluginTabs.value
-    .filter(t => !(t.hideOnCreate && isCreateMode.value))
-    .map(t => ({ ...t, kind: 'plugin' }))
-  return [...builtIn, ...plugins].sort((a, b) => (a.position ?? 100) - (b.position ?? 100))
-})
-
-// Draft status ID (typically 1)
-const draftStatusId = computed(() => {
-  const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
-  return ms3Config?.status_draft || 1
-})
-
-// Check if order is in draft status
-const isDraft = computed(() => {
-  if (!order.value) return false
-  return parseInt(order.value.status_id) === parseInt(draftStatusId.value)
-})
-
-// Finalize state
-const finalizing = ref(false)
-
-// Order cost recalculation (#212): baseline delivery/payment after load/save
-const savedBaselineDeliveryId = ref(0)
-const savedBaselinePaymentId = ref(0)
-const recalculatingCost = ref(false)
-/** @type {import('vue').ShallowRef<string[]>} Warning codes from last recalculate API */
-const costRecalcWarnings = shallowRef([])
-const manualDeliveryCost = ref(null)
-
-function syncShippingPaymentBaselineFromOrder() {
-  if (!order.value || isCreateMode.value) {
-    return
-  }
-  savedBaselineDeliveryId.value = Number.parseInt(order.value.delivery_id, 10) || 0
-  savedBaselinePaymentId.value = Number.parseInt(order.value.payment_id, 10) || 0
-}
-
-const hasUnsavedShippingPaymentChanges = computed(() => {
-  if (isCreateMode.value || !order.value) {
-    return false
-  }
-  const d = Number.parseInt(order.value.delivery_id, 10) || 0
-  const p = Number.parseInt(order.value.payment_id, 10) || 0
-
-  return d !== savedBaselineDeliveryId.value || p !== savedBaselinePaymentId.value
-})
-
-/**
- * Group fields by sections
- */
-const orderFieldsBySection = computed(() => {
-  return groupFieldsBySection(orderFields.value, orderSections.value)
-})
-
-const addressFieldsBySection = computed(() => {
-  return groupFieldsBySection(addressFields.value, addressSections.value)
-})
-
-/**
- * Helper to group fields by section
- */
-function groupFieldsBySection(fields, sections) {
-  // Create section map
-  const sectionMap = new Map()
-
-  // Add sections in order
-  for (const section of sections) {
-    sectionMap.set(section.id, {
-      ...section,
-      fields: [],
-    })
-  }
-
-  // Add "no section" group for fields without section
-  sectionMap.set(null, {
-    id: null,
-    label: _('ms3_model_field_no_section'),
-    section_key: 'no_section',
-    sort_order: 9999,
-    fields: [],
-  })
-
-  // Assign fields to sections
-  for (const field of fields) {
-    const sectionId = field.section_id || null
-    if (sectionMap.has(sectionId)) {
-      sectionMap.get(sectionId).fields.push(field)
-    } else {
-      // If section doesn't exist, put in "no section"
-      sectionMap.get(null).fields.push(field)
-    }
-  }
-
-  // Convert to array and filter out empty sections
-  return Array.from(sectionMap.values())
-    .filter(section => section.fields.length > 0)
-    .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0))
-}
-
-/**
- * Load order data
- */
-/**
- * Parse repeater extra field values from API (string JSON → array).
- */
-function hydrateRepeaterExtraFields(fields) {
-  if (!order.value || !Array.isArray(fields)) {
-    return
-  }
-
-  for (const field of fields) {
-    if (field.xtype === REPEATER_XTYPE && field.key) {
-      order.value[field.key] = parseRepeaterModelValue(order.value[field.key])
-    }
-  }
-}
-
-async function loadOrder() {
-  if (!orderId.value) {
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: _('order_id_required'),
-      life: 5000,
-    })
-    return
-  }
-
-  loading.value = true
-
-  try {
-    const response = await request.get(`/api/mgr/orders/${orderId.value}`)
-    order.value = response
-    syncShippingPaymentBaselineFromOrder()
-    costRecalcWarnings.value = []
-
-    await Promise.all([
-      loadProducts(),
-      loadProductsGridConfig(),
-      loadLogs(),
-      loadOrderFields(),
-      loadAddressFields(),
-      loadOrderExtraFields(),
-      loadAddressExtraFields(),
-      loadOrderCustomer(),
-    ])
-
-    hydrateRepeaterExtraFields(orderExtraFields.value)
-    hydrateRepeaterExtraFields(addressExtraFields.value)
-  } catch (error) {
-    console.error('[OrderView] Error loading order:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_loading_data'),
-      life: 5000,
-    })
-  } finally {
-    loading.value = false
-  }
-}
-
-/**
- * Load customer data for the order (if customer_id exists)
- */
-async function loadOrderCustomer() {
-  const customerId = order.value?.customer_id
-  if (!customerId || customerId === 0) {
-    selectedCustomer.value = null
-    return
-  }
-
-  try {
-    const response = await request.get(`/api/mgr/customers/${customerId}`)
-    if (response && response.id) {
-      selectedCustomer.value = {
-        ...response,
-        display: `${response.first_name || ''} ${response.last_name || ''} (${response.email || response.phone || ''})`,
-      }
-    }
-  } catch (error) {
-    console.error('[OrderView] Error loading customer:', error)
-    selectedCustomer.value = null
-  }
-}
-
-/**
- * Load visible fields for msOrder model (includes combo options)
- */
-async function loadOrderFields() {
-  try {
-    const response = await request.get('/api/mgr/model-fields/visible/msOrder')
-    orderFields.value = response.results || []
-    orderSections.value = response.sections || []
-    // Combo options are now returned with visible fields
-    orderComboOptions.value = response.comboOptions || {}
-
-    // Populate legacy refs for backward compatibility (extract options from new format)
-    if (orderComboOptions.value.status_id) {
-      statuses.value =
-        orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
-    }
-    if (orderComboOptions.value.delivery_id) {
-      deliveries.value =
-        orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
-    }
-    if (orderComboOptions.value.payment_id) {
-      payments.value =
-        orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
-    }
-  } catch (error) {
-    console.error('[OrderView] Error loading order fields:', error)
-    orderFields.value = []
-    orderSections.value = []
-    orderComboOptions.value = {}
-  }
-}
-
-/**
- * Load visible fields for msOrderAddress model (includes combo options)
- */
-async function loadAddressFields() {
-  try {
-    const response = await request.get('/api/mgr/model-fields/visible/msOrderAddress')
-    addressFields.value = response.results || []
-    addressSections.value = response.sections || []
-    // Combo options are now returned with visible fields
-    addressComboOptions.value = response.comboOptions || {}
-  } catch (error) {
-    console.error('[OrderView] Error loading address fields:', error)
-    addressFields.value = []
-    addressSections.value = []
-    addressComboOptions.value = {}
-  }
-}
-
-/**
- * Load extra fields for msOrder (from Object Extension)
- */
-async function loadOrderExtraFields() {
-  try {
-    const response = await request.get('/api/mgr/extra-fields', { class: 'msOrder' })
-    orderExtraFields.value = (response.fields || []).filter(f => f.active)
-  } catch (error) {
-    console.error('[OrderView] Error loading order extra fields:', error)
-    orderExtraFields.value = []
-  }
-}
-
-/**
- * Load extra fields for msOrderAddress (from Object Extension)
- */
-async function loadAddressExtraFields() {
-  try {
-    const response = await request.get('/api/mgr/extra-fields', { class: 'msOrderAddress' })
-    addressExtraFields.value = (response.fields || []).filter(f => f.active)
-  } catch (error) {
-    console.error('[OrderView] Error loading address extra fields:', error)
-    addressExtraFields.value = []
-  }
-}
-
-/**
- * Load order products
- */
-async function loadProducts() {
-  try {
-    const response = await request.get(`/api/mgr/orders/${orderId.value}/products`)
-    products.value = response.results || response || []
-  } catch (error) {
-    console.error('[OrderView] Error loading products:', error)
-    products.value = []
-  }
-}
-
-/**
- * Load products grid configuration
- */
-async function loadProductsGridConfig() {
-  try {
-    const response = await request.get('/api/mgr/grid-config/order_products')
-    productsColumns.value = response.columns || []
-  } catch (error) {
-    console.error('[OrderView] Error loading products grid config:', error)
-    productsColumns.value = getDefaultProductsColumns()
-  }
-}
-
-/**
- * Default columns for products grid (fallback)
- */
-function getDefaultProductsColumns() {
-  return [
-    {
-      name: 'name',
-      label: _('order_product_name'),
-      visible: true,
-      type: 'template',
-      template: '{name}',
-    },
-    { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
-    { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
-    { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
-  ]
-}
-
-const { formatDate, formatPrice, getFieldWidthClass } = useOrderFormatters()
-
-const fieldHelpers = useOrderFieldHelpers({
-  formatDate,
-  formatPrice,
-  order,
-  orderComboOptions,
-  addressComboOptions,
-  statuses,
-  deliveries,
-  payments,
-  _,
-})
-
-/**
- * Handle product action (edit, delete)
- */
-function handleProductAction(action, data) {
-  switch (action.handler) {
-    case 'edit':
-      editProduct(data)
-      break
-    case 'delete':
-      deleteProduct(data)
-      break
-    default:
-      console.warn('[OrderView] Unknown action handler:', action.handler)
-  }
-}
-
-/**
- * Open edit product dialog
- */
-async function editProduct(product) {
-  editingProduct.value = product
-  editProductForm.value = {
-    count: product.count || 1,
-    price: product.price || 0,
-    weight: product.weight || 0,
-  }
-
-  // Load product option fields if not already loaded
-  if (productOptionFields.value.length === 0) {
-    await loadProductOptionFields()
-  }
-
-  // Initialize options
-  await initOptionsFromProduct(product.options)
-  optionsEditMode.value = 'table'
-  optionsJsonError.value = ''
-
-  editProductDialogVisible.value = true
-}
-
-/**
- * Load product option fields (color, size, etc.)
- */
-async function loadProductOptionFields() {
-  loadingOptionFields.value = true
-  try {
-    const response = await request.get('/api/mgr/references/product-option-fields')
-    productOptionFields.value = response.fields || []
-  } catch (error) {
-    console.error('[OrderView] Error loading product option fields:', error)
-    productOptionFields.value = []
-  } finally {
-    loadingOptionFields.value = false
-  }
-}
-
-/**
- * Initialize options data from product
- */
-async function initOptionsFromProduct(options) {
-  let parsed = {}
-
-  if (options) {
-    if (typeof options === 'string') {
-      try {
-        parsed = JSON.parse(options)
-      } catch {
-        parsed = {}
-      }
-    } else if (typeof options === 'object') {
-      parsed = options
-    }
-  }
-
-  // Convert to table format with type detection
-  const tableData = []
-  for (const [key, value] of Object.entries(parsed)) {
-    const isProductField = productOptionFields.value.some(f => f.name === key)
-    const row = {
-      type: isProductField ? 'field' : 'custom',
-      key,
-      value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
-      isComplex: isComplexValue(value),
-      fieldValues: [],
-      loadingValues: false,
-    }
-
-    // If it's a product field, load its values
-    if (isProductField) {
-      await loadFieldValuesForRow(row)
-    }
-
-    tableData.push(row)
-  }
-
-  optionsTableData.value = tableData
-
-  // Store JSON text
-  optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
-}
-
-/**
- * Load field values for a specific row
- */
-async function loadFieldValuesForRow(row) {
-  if (!row.key || row.type !== 'field') return
-
-  // Get product_id from editing product
-  const productId = editingProduct.value?.product_id
-  if (!productId) {
-    console.warn('[OrderView] No product_id found for loading field values')
-    row.fieldValues = []
-    return
-  }
-
-  row.loadingValues = true
-  try {
-    const response = await request.get('/api/mgr/references/product-field-values', {
-      field: row.key,
-      product_id: productId,
-    })
-    row.fieldValues = response.values || []
-  } catch (error) {
-    console.error('[OrderView] Error loading field values:', error)
-    row.fieldValues = []
-  } finally {
-    row.loadingValues = false
-  }
-}
-
-/**
- * Handle option type change (field/custom)
- */
-async function onOptionTypeChange(row) {
-  if (row.type === 'field') {
-    // Reset to first available field if key is not a valid field
-    const isValidField = productOptionFields.value.some(f => f.name === row.key)
-    if (!isValidField && productOptionFields.value.length > 0) {
-      row.key = productOptionFields.value[0].name
-    }
-    row.value = ''
-    row.isComplex = false
-    await loadFieldValuesForRow(row)
-  } else {
-    // Custom type - clear field values
-    row.fieldValues = []
-    row.value = ''
-    row.isComplex = false
-  }
-  syncTableToJson()
-}
-
-/**
- * Handle field selection change
- */
-async function onFieldKeyChange(row) {
-  row.value = ''
-  row.fieldValues = []
-  await loadFieldValuesForRow(row)
-  syncTableToJson()
-}
-
-/**
- * Check if value is complex (array or object)
- */
-function isComplexValue(value) {
-  return Array.isArray(value) || (typeof value === 'object' && value !== null)
-}
-
-/**
- * Add new option row
- */
-function addOptionRow() {
-  optionsTableData.value.push({
-    type: 'custom',
-    key: '',
-    value: '',
-    isComplex: false,
-    fieldValues: [],
-    loadingValues: false,
-  })
-}
-
-/**
- * Remove option row
- */
-function removeOptionRow(index) {
-  optionsTableData.value.splice(index, 1)
-  syncTableToJson()
-}
-
-/**
- * Sync table data to JSON text
- */
-function syncTableToJson() {
-  const obj = {}
-  for (const row of optionsTableData.value) {
-    if (row.key.trim()) {
-      if (row.isComplex) {
-        try {
-          obj[row.key] = JSON.parse(row.value)
-        } catch {
-          obj[row.key] = row.value
-        }
-      } else {
-        obj[row.key] = row.value
-      }
-    }
-  }
-  optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
-  optionsJsonError.value = ''
-}
-
-/**
- * Sync JSON text to table data
- */
-function syncJsonToTable() {
-  optionsJsonError.value = ''
-
-  if (!optionsJsonText.value.trim()) {
-    optionsTableData.value = []
-    return true
-  }
-
-  try {
-    const parsed = JSON.parse(optionsJsonText.value)
-    if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
-      optionsJsonError.value = _('options_json_must_be_object')
-      return false
-    }
-
-    optionsTableData.value = Object.entries(parsed).map(([key, value]) => ({
-      key,
-      value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
-      isComplex: isComplexValue(value),
-    }))
-    return true
-  } catch (e) {
-    optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
-    return false
-  }
-}
-
-/**
- * Switch options edit mode
- */
-function switchOptionsMode(mode) {
-  if (mode === optionsEditMode.value) return
-
-  if (mode === 'json') {
-    // Switching to JSON mode - sync table to JSON
-    syncTableToJson()
-  } else {
-    // Switching to table mode - sync JSON to table
-    if (!syncJsonToTable()) {
-      // JSON is invalid, stay in JSON mode
-      return
-    }
-  }
-
-  optionsEditMode.value = mode
-}
-
-/**
- * Get options object for saving
- */
-function getOptionsForSave() {
-  if (optionsEditMode.value === 'json') {
-    if (!optionsJsonText.value.trim()) return null
-    try {
-      return JSON.parse(optionsJsonText.value)
-    } catch {
-      return null
-    }
-  } else {
-    const obj = {}
-    for (const row of optionsTableData.value) {
-      if (row.key.trim()) {
-        if (row.isComplex) {
-          try {
-            obj[row.key] = JSON.parse(row.value)
-          } catch {
-            obj[row.key] = row.value
-          }
-        } else {
-          obj[row.key] = row.value
-        }
-      }
-    }
-    return Object.keys(obj).length > 0 ? obj : null
-  }
-}
-
-/**
- * Save edited product
- */
-async function saveEditedProduct() {
-  if (!editingProduct.value) return
-
-  // Validate JSON mode if active
-  if (optionsEditMode.value === 'json' && optionsJsonText.value.trim()) {
-    try {
-      JSON.parse(optionsJsonText.value)
-    } catch (e) {
-      optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
-      return
-    }
-  }
-
-  savingProduct.value = true
-
-  try {
-    const data = {
-      ...editProductForm.value,
-      options: getOptionsForSave(),
-    }
-
-    await request.put(`/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`, data)
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('order_product_saved'),
-      life: 3000,
-    })
-
-    editProductDialogVisible.value = false
-
-    // Reload products and order to update totals
-    await Promise.all([loadProducts(), loadOrder()])
-  } catch (error) {
-    console.error('[OrderView] Error saving product:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_saving_data'),
-      life: 5000,
-    })
-  } finally {
-    savingProduct.value = false
-  }
-}
-
-/**
- * Cancel product editing
- */
-function cancelEditProduct() {
-  editProductDialogVisible.value = false
-  editingProduct.value = null
-}
-
-/**
- * Computed cost for edited product
- */
-const editedProductCost = computed(() => {
-  return (editProductForm.value.count || 0) * (editProductForm.value.price || 0)
-})
-
-/**
- * Computed cost for new product
- */
-const newProductCost = computed(() => {
-  return (addProductForm.value.count || 0) * (addProductForm.value.price || 0)
-})
-
-/**
- * Open add product dialog
- */
-function openAddProductDialog() {
-  selectedProduct.value = null
-  productSuggestions.value = []
-  addProductForm.value = {
-    count: 1,
-    price: 0,
-    weight: 0,
-    options: {},
-  }
-  addProductDialogVisible.value = true
-}
-
-/**
- * Search products for autocomplete
- */
-async function searchProducts(event) {
-  const query = event.query
-  if (!query || query.length < 2) {
-    productSuggestions.value = []
-    return
-  }
-
-  searchingProducts.value = true
-  try {
-    const response = await request.get('/api/mgr/references/products', { query })
-    productSuggestions.value = response.results || []
-  } catch (error) {
-    console.error('[OrderView] Error searching products:', error)
-    productSuggestions.value = []
-  } finally {
-    searchingProducts.value = false
-  }
-}
-
-/**
- * Handle product selection from autocomplete
- */
-function onProductSelect(event) {
-  const product = event.value
-  if (product) {
-    addProductForm.value.price = product.price || 0
-    addProductForm.value.weight = product.weight || 0
-  }
-}
-
-/**
- * Save new product to order
- */
-async function saveNewProduct() {
-  if (!selectedProduct.value || !selectedProduct.value.id) {
-    toast.add({
-      severity: 'warn',
-      summary: _('warning'),
-      detail: _('order_product_select'),
-      life: 3000,
-    })
-    return
-  }
-
-  savingNewProduct.value = true
-  try {
-    const data = {
-      product_id: selectedProduct.value.id,
-      count: addProductForm.value.count || 1,
-      price: addProductForm.value.price || 0,
-      weight: addProductForm.value.weight || 0,
-      options: addProductForm.value.options || {},
-    }
-
-    await request.post(`/api/mgr/orders/${orderId.value}/products`, data)
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('order_product_added'),
-      life: 3000,
-    })
-
-    addProductDialogVisible.value = false
-
-    // Reload products and order to update totals
-    await Promise.all([loadProducts(), loadOrder()])
-  } catch (error) {
-    console.error('[OrderView] Error adding product:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error'),
-      life: 5000,
-    })
-  } finally {
-    savingNewProduct.value = false
-  }
-}
-
-/**
- * Cancel add product
- */
-function cancelAddProduct() {
-  addProductDialogVisible.value = false
-  selectedProduct.value = null
-}
-
-/**
- * Delete product from order with confirmation
- */
-function deleteProduct(product) {
-  // Check if this is the last product
-  if (products.value.length <= 1) {
-    toast.add({
-      severity: 'warn',
-      summary: _('warning'),
-      detail: _('order_product_cannot_delete_last'),
-      life: 5000,
-    })
-    return
-  }
-
-  confirm.require({
-    message: _('order_product_delete_confirm'),
-    header: _('confirm_delete'),
-    icon: 'pi pi-exclamation-triangle',
-    acceptLabel: _('yes'),
-    rejectLabel: _('no'),
-    acceptClass: 'p-button-danger',
-    accept: async () => {
-      try {
-        await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
-
-        toast.add({
-          severity: 'success',
-          summary: _('success'),
-          detail: _('order_product_deleted'),
-          life: 3000,
-        })
-
-        // Reload products and order to update totals
-        await Promise.all([loadProducts(), loadOrder()])
-      } catch (error) {
-        console.error('[OrderView] Error deleting product:', error)
-        toast.add({
-          severity: 'error',
-          summary: _('error'),
-          detail: error.message || _('error_deleting_data'),
-          life: 5000,
-        })
-      }
-    },
-  })
-}
-
-/**
- * Load order logs
- */
-async function loadLogs() {
-  try {
-    const response = await request.get(`/api/mgr/orders/${orderId.value}/logs`)
-    logs.value = response.results || response || []
-  } catch (error) {
-    console.error('[OrderView] Error loading logs:', error)
-    logs.value = []
-  }
-}
-
-/**
- * Берём поля заказа из ответа пересчёта без служебных ключей breakdown/warnings.
- * @param {Record<string, unknown>|null|undefined} raw
- * @returns {{ orderPayload: Record<string, unknown>, warnings: string[] }}
- */
-function stripRecalculateCostMeta(raw) {
-  if (!raw || typeof raw !== 'object') {
-    return { orderPayload: {}, warnings: [] }
-  }
-  const merged = /** @type {Record<string, unknown>} */ ({ ...raw })
-  delete merged.breakdown
-  const w = merged.warnings
-  delete merged.warnings
-  return {
-    orderPayload: merged,
-    warnings: Array.isArray(w) ? w.map(String) : [],
-  }
-}
-
-/**
- * Пересчитать стоимость заказа (Manager API, #212).
- * @param {{ mode?: string, manual_delivery_cost?: number }} opts
- */
-async function recalculateOrderCost(opts = {}) {
-  if (isCreateMode.value || !orderId.value || orderId.value === 'new') {
-    return
-  }
-
-  recalculatingCost.value = true
-  costRecalcWarnings.value = []
-
-  try {
-    const body = {
-      mode: opts.mode ?? 'auto',
-    }
-    if (opts.manual_delivery_cost !== undefined && opts.manual_delivery_cost !== null) {
-      body.manual_delivery_cost = opts.manual_delivery_cost
-    }
-
-    const raw = await request.post(`/api/mgr/orders/${orderId.value}/recalculate-cost`, body)
-    const { orderPayload, warnings } = stripRecalculateCostMeta(raw)
-    order.value = { ...(order.value || {}), ...orderPayload }
-    costRecalcWarnings.value = warnings
-    syncShippingPaymentBaselineFromOrder()
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('order_cost_recalculated'),
-      life: 3000,
-    })
-  } catch (error) {
-    console.error('[OrderView] Error recalculateCost:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_saving_data'),
-      life: 5000,
-    })
-  } finally {
-    recalculatingCost.value = false
-  }
-}
-
-/**
- * Save order
- */
-async function saveOrder() {
-  saving.value = true
-
-  try {
-    // Collect all editable order fields
-    const orderData = {}
-    for (const field of orderFields.value) {
-      if (fieldHelpers.isFieldEditable(field.name) && order.value[field.name] !== undefined) {
-        orderData[field.name] = order.value[field.name]
-      }
-    }
-
-    // Collect all editable address fields
-    for (const field of addressFields.value) {
-      if (order.value[field.name] !== undefined) {
-        orderData[field.name] = order.value[field.name]
-      }
-    }
-
-    // Collect extra fields for msOrder (from Object Extension)
-    for (const field of orderExtraFields.value) {
-      if (order.value[field.key] !== undefined) {
-        orderData[field.key] = order.value[field.key]
-      }
-    }
-
-    // Collect extra fields for msOrderAddress (from Object Extension)
-    for (const field of addressExtraFields.value) {
-      if (order.value[field.key] !== undefined) {
-        orderData[field.key] = order.value[field.key]
-      }
-    }
-
-    await request.put(`/api/mgr/orders/${orderId.value}`, orderData)
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('order_saved'),
-      life: 3000,
-    })
-
-    syncShippingPaymentBaselineFromOrder()
-
-    await loadLogs()
-  } catch (error) {
-    console.error('[OrderView] Error saving order:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_saving_data'),
-      life: 5000,
-    })
-  } finally {
-    saving.value = false
-  }
-}
-
-/**
- * Finalize order (convert draft to final order)
- * Shows confirmation dialog first
- */
-function confirmFinalizeOrder() {
-  confirm.require({
-    message: _('ms3_order_finalize_confirm_desc'),
-    header: _('ms3_order_finalize_confirm'),
-    icon: 'pi pi-check-circle',
-    acceptLabel: _('ms3_order_finalize_btn'),
-    rejectLabel: _('cancel'),
-    accept: () => {
-      finalizeOrder()
-    },
-  })
-}
-
-/**
- * Finalize order API call
- */
-async function finalizeOrder(forceCreateCustomer = false) {
-  finalizing.value = true
-
-  try {
-    // Build request data
-    const requestData = {}
-
-    // If create customer checkbox is checked and no customer linked
-    if (createCustomerFromData.value && !order.value.customer_id) {
-      requestData.create_customer = true
-      if (forceCreateCustomer) {
-        requestData.force_create_customer = true
-      }
-    }
-
-    const response = await request.post(`/api/mgr/orders/${orderId.value}/finalize`, requestData)
-
-    // Check if duplicate customer was found
-    if (response.duplicate_found) {
-      // Store for later and show dialog
-      pendingOrderData.value = { finalize: true }
-      duplicateCustomer.value = response.customer
-      showDuplicateDialog.value = true
-      finalizing.value = false
-      return
-    }
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('ms3_order_finalized'),
-      life: 3000,
-    })
-
-    // Reload order to get updated status and order number
-    await loadOrder()
-    await loadLogs()
-  } catch (error) {
-    console.error('[OrderView] Error finalizing order:', error)
-
-    // Show each validation error as separate toast
-    // Response structure: error.data.object.errors contains array of field names
-    const validationErrors = error.data?.object?.errors
-    if (validationErrors && Array.isArray(validationErrors) && validationErrors.length > 0) {
-      validationErrors.forEach(field => {
-        const fieldError = _(`ms3_order_err_${field}`) || field
-        toast.add({
-          severity: 'error',
-          summary: _('ms3_order_err_validation'),
-          detail: fieldError,
-          life: 5000,
-        })
-      })
-    } else {
-      // Fallback to general error message
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('ms3_order_finalize_error'),
-        life: 5000,
-      })
-    }
-  } finally {
-    finalizing.value = false
-  }
-}
-
-/**
- * Initialize empty order for create mode
- */
-async function initEmptyOrder() {
-  loading.value = true
-
-  try {
-    // Initialize empty order object
-    order.value = {
-      id: null,
-      num: '',
-      status_id: 1, // Draft status
-      delivery_id: null,
-      payment_id: null,
-      customer_id: 0,
-      order_comment: '',
-      cart_cost: 0,
-      delivery_cost: 0,
-      cost: 0,
-      weight: 0,
-      // Address fields
-      first_name: '',
-      last_name: '',
-      phone: '',
-      email: '',
-      country: '',
-      index: '',
-      region: '',
-      city: '',
-      metro: '',
-      street: '',
-      building: '',
-      entrance: '',
-      floor: '',
-      room: '',
-      comment: '',
-      text_address: '',
-    }
-
-    // Load field configurations and combo options
-    await Promise.all([
-      loadOrderFields(),
-      loadAddressFields(),
-      loadOrderExtraFields(),
-      loadAddressExtraFields(),
-    ])
-
-    // Initialize empty products and logs
-    products.value = []
-    logs.value = []
-  } catch (error) {
-    console.error('[OrderView] Error initializing empty order:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: _('error_loading_config'),
-      life: 5000,
-    })
-  } finally {
-    loading.value = false
-  }
-}
-
-/**
- * Collect order data from form
- */
-function collectOrderData() {
-  const orderData = {}
-
-  // Order fields
-  for (const field of orderFields.value) {
-    if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
-      orderData[field.name] = order.value[field.name]
-    }
-  }
-
-  // Address fields
-  for (const field of addressFields.value) {
-    if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
-      orderData[field.name] = order.value[field.name]
-    }
-  }
-
-  // Extra fields
-  for (const field of orderExtraFields.value) {
-    if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
-      orderData[field.key] = order.value[field.key]
-    }
-  }
-
-  for (const field of addressExtraFields.value) {
-    if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
-      orderData[field.key] = order.value[field.key]
-    }
-  }
-
-  // If customer was selected, add customer_id
-  if (selectedCustomer.value?.id) {
-    orderData.customer_id = selectedCustomer.value.id
-  }
-
-  // If create customer checkbox is checked and no customer selected
-  if (createCustomerFromData.value && !selectedCustomer.value?.id) {
-    orderData.create_customer = true
-  }
-
-  return orderData
-}
-
-/**
- * Validate customer data before creation
- * @returns {string|null} Error message or null if valid
- */
-function validateCustomerData(orderData) {
-  // If creating customer, need at least email or phone
-  if (orderData.create_customer) {
-    const email = (orderData.email || '').trim()
-    const phone = (orderData.phone || '').trim()
-
-    if (!email && !phone) {
-      return _('ms3_customer_validation_email_or_phone')
-    }
-
-    // Basic email validation
-    if (email && !email.includes('@')) {
-      return _('ms3_customer_validation_invalid_email')
-    }
-  }
-
-  return null
-}
-
-/**
- * Create new order
- */
-async function createOrder(forceCreateCustomer = false) {
-  saving.value = true
-
-  try {
-    const orderData = collectOrderData()
-
-    // Add force flag if retrying after duplicate found
-    if (forceCreateCustomer) {
-      orderData.force_create_customer = true
-    }
-
-    // Validate customer data if creating customer
-    const validationError = validateCustomerData(orderData)
-    if (validationError) {
-      toast.add({
-        severity: 'warn',
-        summary: _('warning'),
-        detail: validationError,
-        life: 5000,
-      })
-      saving.value = false
-      return
-    }
-
-    // Create order via API
-    const response = await request.post('/api/mgr/orders', orderData)
-
-    // Check if duplicate customer was found
-    if (response.duplicate_found) {
-      // Store data for later and show dialog
-      pendingOrderData.value = orderData
-      duplicateCustomer.value = response.customer
-      showDuplicateDialog.value = true
-      saving.value = false
-      return
-    }
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('ms3_order_created'),
-      life: 3000,
-    })
-
-    // Redirect to edit the created order
-    const createdOrderId = response.id || response.object?.id
-    if (createdOrderId) {
-      window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
-    }
-  } catch (error) {
-    console.error('[OrderView] Error creating order:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_saving_data'),
-      life: 5000,
-    })
-  } finally {
-    saving.value = false
-  }
-}
-
-/**
- * Handle duplicate dialog: use existing customer
- */
-async function useDuplicateCustomer() {
-  showDuplicateDialog.value = false
-
-  if (!duplicateCustomer.value || !pendingOrderData.value) {
-    return
-  }
-
-  // Check if this is from finalize or create
-  if (pendingOrderData.value.finalize) {
-    // For finalize: update order's customer_id and retry finalize
-    try {
-      // Update order with existing customer
-      await request.put(`/api/mgr/orders/${orderId.value}`, {
-        customer_id: duplicateCustomer.value.id,
-      })
-
-      // Disable create customer flag and finalize
-      createCustomerFromData.value = false
-      await finalizeOrder()
-    } catch (error) {
-      console.error('[OrderView] Error updating order customer:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      pendingOrderData.value = null
-      duplicateCustomer.value = null
-    }
-    return
-  }
-
-  // For create: set existing customer and create order without create_customer flag
-  selectedCustomer.value = duplicateCustomer.value
-  pendingOrderData.value.customer_id = duplicateCustomer.value.id
-  delete pendingOrderData.value.create_customer
-  delete pendingOrderData.value.force_create_customer
-
-  saving.value = true
-  try {
-    const response = await request.post('/api/mgr/orders', pendingOrderData.value)
-
-    toast.add({
-      severity: 'success',
-      summary: _('success'),
-      detail: _('ms3_order_created'),
-      life: 3000,
-    })
-
-    const createdOrderId = response.id || response.object?.id
-    if (createdOrderId) {
-      window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
-    }
-  } catch (error) {
-    console.error('[OrderView] Error creating order:', error)
-    toast.add({
-      severity: 'error',
-      summary: _('error'),
-      detail: error.message || _('error_saving_data'),
-      life: 5000,
-    })
-  } finally {
-    saving.value = false
-    pendingOrderData.value = null
-    duplicateCustomer.value = null
-  }
-}
-
-/**
- * Handle duplicate dialog: create new customer anyway
- */
-async function createNewCustomerAnyway() {
-  showDuplicateDialog.value = false
-  duplicateCustomer.value = null
-
-  // Check if this is from finalize or create
-  if (pendingOrderData.value?.finalize) {
-    // Retry finalize with force flag
-    pendingOrderData.value = null
-    await finalizeOrder(true)
-  } else {
-    // Retry create with force flag
-    await createOrder(true)
-    pendingOrderData.value = null
-  }
-}
-
-/**
- * Handle duplicate dialog: cancel
- */
-function cancelDuplicateDialog() {
-  showDuplicateDialog.value = false
-  duplicateCustomer.value = null
-  pendingOrderData.value = null
-}
-
-/**
- * Search customers for autocomplete
- */
-async function searchCustomers(event) {
-  const query = event.query
-  if (!query || query.length < 2) {
-    customerSuggestions.value = []
-    return
-  }
-
-  searchingCustomers.value = true
-  try {
-    const response = await request.get('/api/mgr/references/customers', { query })
-    customerSuggestions.value = response.results || []
-  } catch (error) {
-    console.error('[OrderView] Error searching customers:', error)
-    customerSuggestions.value = []
-  } finally {
-    searchingCustomers.value = false
-  }
-}
-
-/**
- * Handle customer selection from autocomplete
- */
-function onCustomerSelect(event) {
-  const customer = event.value
-  if (customer) {
-    // Set customer_id in order
-    order.value.customer_id = customer.id
-
-    // Fill address fields from customer data
-    order.value.first_name = customer.first_name || order.value.first_name
-    order.value.last_name = customer.last_name || order.value.last_name
-    order.value.email = customer.email || order.value.email
-    order.value.phone = customer.phone || order.value.phone
-  }
-}
-
-/**
- * Clear selected customer
- */
-function clearCustomer() {
-  selectedCustomer.value = null
-  // Clear customer_id in order
-  if (order.value) {
-    order.value.customer_id = 0
-  }
-}
-
-/**
- * Go back to orders list
- */
-function goBack() {
-  window.location.href = '?a=mgr/orders&namespace=minishop3'
-}
-
-/**
- * Registers a plugin tab (called by window.MS3OrderTabsRegistry or tests).
- * Validation lives in normalizeOrderPluginTab().
- */
-function registerPluginTab(tabData) {
-  const normalized = normalizeOrderPluginTab(tabData)
-  if (!normalized.ok) {
-    console.error(`[OrderView] ${normalized.reason}`, tabData)
-    return false
-  }
-  const exists = pluginTabs.value.some(t => t.key === normalized.tab.key)
-  if (exists) {
-    console.warn(`[OrderView] Tab with key "${normalized.tab.key}" already registered`)
-    return false
-  }
-  pluginTabs.value.push(normalized.tab)
-  return true
-}
-
-/**
- * Props passed to Vue plugin tab components (same contract as ExtJS tabs below).
- * User `tab.props` is spread first; core fields override name collisions intentionally.
- */
-function pluginVueProps(tab) {
-  return {
-    ...(tab.props || {}),
-    orderId: orderId.value,
-    order: order.value,
-    config: managerConfig.value,
-    isCreateMode: isCreateMode.value,
-  }
-}
-
-/** Waits for TabPanel DOM element via MutationObserver (consistent with other entry points). */
-function waitForOrderTabElement(id, callback) {
-  const element = document.getElementById(id)
-  if (element) {
-    callback(element)
-    return
-  }
-  const observer = new MutationObserver(() => {
-    const el = document.getElementById(id)
-    if (el) {
-      observer.disconnect()
-      callback(el)
-    }
-  })
-  observer.observe(document.body, { childList: true, subtree: true })
-}
-
-/**
- * Lazy-mounts an ExtJS panel into the plugin tab container.
- * Merge order: xtype/renderTo/width, then extConfig, then core fields (order, orderId, config, isCreateMode).
- *
- * The Ext instance is created once per tab key when the user first selects the tab. Later changes to
- * Vue’s `order` (after API load, save, etc.) are not pushed into Ext — plugin panels must implement
- * their own listeners, polling, or `load` hooks if they need live data.
- */
-function mountExtJSOrderPlugin(tab) {
-  if (mountedExtPluginComponents.value[tab.key]) {
-    return
-  }
-  const containerId = `ms3-order-tab-${tab.key}`
-  waitForOrderTabElement(containerId, container => {
-    try {
-      if (typeof Ext === 'undefined') {
-        console.error('[OrderView] Ext is not defined')
-        return
-      }
-      const extComponent = Ext.create({
-        xtype: tab.xtype,
-        renderTo: container,
-        width: '100%',
-        ...tab.extConfig,
-        order: order.value,
-        orderId: orderId.value,
-        config: managerConfig.value,
-        isCreateMode: isCreateMode.value,
-      })
-      mountedExtPluginComponents.value[tab.key] = extComponent
-    } catch (error) {
-      console.error(`[OrderView] Failed to mount ExtJS order tab ${tab.key}:`, error)
-    }
-  })
-}
-
-function destroyPluginExtComponents() {
-  Object.keys(mountedExtPluginComponents.value).forEach(key => {
-    const component = mountedExtPluginComponents.value[key]
-    if (component && typeof component.destroy === 'function') {
-      try {
-        component.destroy()
-      } catch (e) {
-        console.warn(`[OrderView] Error destroying plugin ExtJS component ${key}:`, e)
-      }
-    }
-  })
-  mountedExtPluginComponents.value = {}
-}
-
-provide(ORDER_CONTEXT_KEY, {
+const {
+  orderContext,
+  registerPluginTab,
+  pluginVueProps,
+  loading,
   order,
-  saving,
-  isDraft,
+  products,
+  productsColumns,
+  logs,
+  orderFieldsBySection,
+  orderExtraFields,
+  orderActiveTab,
+  orderTabsConfig,
   isCreateMode,
-  finalizing,
-  customerSuggestions,
-  searchingCustomers,
-  ...fieldHelpers,
-  formatDate,
-  formatPrice,
-  getFieldWidthClass,
-  saveOrder,
-  createOrder,
+  selectedCustomer,
+  createCustomerFromData,
+  addressFieldsBySection,
+  addressExtraFields,
   goBack,
-  confirmFinalizeOrder,
-  handleProductAction,
-  openAddProductDialog,
-  searchCustomers,
-  onCustomerSelect,
-  clearCustomer,
-  recalculateOrderCost,
-  recalculatingCost,
-  costRecalcWarnings,
-  manualDeliveryCost,
-  hasUnsavedShippingPaymentChanges,
-})
-
-watch(
-  () => orderTabsConfig.value.map(t => t.key),
-  keys => {
-    if (keys.length === 0) return
-    if (!keys.includes(orderActiveTab.value)) {
-      orderActiveTab.value = keys[0]
-    }
-  },
-  { immediate: true }
-)
-
-watch(orderActiveTab, () => {
-  nextTick(() => {
-    const tab = orderTabsConfig.value.find(t => t.key === orderActiveTab.value)
-    if (
-      tab &&
-      tab.kind === 'plugin' &&
-      tab.type === 'extjs' &&
-      tab.xtype &&
-      !mountedExtPluginComponents.value[tab.key]
-    ) {
-      mountExtJSOrderPlugin(tab)
-    }
-  })
-})
-
-onBeforeUnmount(() => {
-  destroyPluginExtComponents()
-  // Clears registry root so late register() calls queue again if the app remounts in the same page
-  if (window.MS3OrderTabsRegistry) {
-    window.MS3OrderTabsRegistry._onUnmounted()
-  }
-})
-
+  formatPrice,
+  editProductDialogVisible,
+  editingProduct,
+  editProductForm,
+  savingProduct,
+  optionsEditMode,
+  optionsTableData,
+  productOptionFields,
+  optionsJsonText,
+  optionsJsonError,
+  editedProductCost,
+  switchOptionsMode,
+  onOptionTypeChange,
+  onFieldKeyChange,
+  syncTableToJson,
+  addOptionRow,
+  removeOptionRow,
+  saveEditedProduct,
+  cancelEditProduct,
+  addProductDialogVisible,
+  selectedProduct,
+  productSuggestions,
+  searchingProducts,
+  addProductForm,
+  savingNewProduct,
+  newProductCost,
+  searchProducts,
+  onProductSelect,
+  saveNewProduct,
+  cancelAddProduct,
+  showDuplicateDialog,
+  duplicateCustomer,
+  cancelDuplicateDialog,
+  useDuplicateCustomer,
+  createNewCustomerAnyway,
+} = useOrderView()
+
+provide(ORDER_CONTEXT_KEY, orderContext)
 defineExpose({ registerPluginTab })
-
-onMounted(async () => {
-  if (isCreateMode.value) {
-    // Create mode - init empty order and load field configs
-    await initEmptyOrder()
-  } else {
-    // Edit mode - load existing order
-    await loadOrder()
-  }
-})
 </script>
 
 <template>
@@ -1744,389 +87,51 @@ onMounted(async () => {
     <Toast />
     <ConfirmDialog append-to="self" />
 
-    <!-- Edit Product Dialog -->
-    <Dialog
+    <!-- Product dialogs -->
+    <OrderEditProductDialog
       v-model:visible="editProductDialogVisible"
-      :header="_('order_product_edit')"
-      :style="{ width: '40.625rem' }"
-      :modal="true"
-      :closable="!savingProduct"
-      :close-on-escape="!savingProduct"
-      append-to="self"
-    >
-      <div v-if="editingProduct" class="edit-product-form">
-        <!-- Product name (readonly) -->
-        <div class="field mb-3">
-          <label>{{ _('order_product_name') }}</label>
-          <div class="product-name-display">{{ editingProduct.name }}</div>
-        </div>
-
-        <!-- Count -->
-        <div class="field mb-3">
-          <label for="edit-count">{{ _('order_product_count') }}</label>
-          <InputNumber
-            id="edit-count"
-            v-model="editProductForm.count"
-            :min="1"
-            :max="9999"
-            show-buttons
-            class="w-full"
-          />
-        </div>
-
-        <!-- Price -->
-        <div class="field mb-3">
-          <label for="edit-price">{{ _('order_product_price') }}</label>
-          <InputNumber
-            id="edit-price"
-            v-model="editProductForm.price"
-            :min="0"
-            :min-fraction-digits="0"
-            :max-fraction-digits="2"
-            class="w-full"
-          />
-        </div>
-
-        <!-- Weight -->
-        <div class="field mb-3">
-          <label for="edit-weight">{{ _('order_product_weight') }}</label>
-          <InputNumber
-            id="edit-weight"
-            v-model="editProductForm.weight"
-            :min="0"
-            :min-fraction-digits="0"
-            :max-fraction-digits="3"
-            class="w-full"
-          />
-        </div>
-
-        <!-- Calculated cost (readonly) -->
-        <div class="field mb-3">
-          <label>{{ _('order_product_cost') }}</label>
-          <div class="cost-display">{{ formatPrice(editedProductCost) }}</div>
-        </div>
-
-        <!-- Options -->
-        <div class="field mb-3">
-          <div class="options-header">
-            <label>{{ _('order_product_options') }}</label>
-            <div class="options-mode-switch">
-              <Button
-                :label="_('options_mode_table')"
-                :severity="optionsEditMode === 'table' ? 'primary' : 'secondary'"
-                size="small"
-                text
-                @click="switchOptionsMode('table')"
-              />
-              <Button
-                :label="_('options_mode_json')"
-                :severity="optionsEditMode === 'json' ? 'primary' : 'secondary'"
-                size="small"
-                text
-                @click="switchOptionsMode('json')"
-              />
-            </div>
-          </div>
-
-          <!-- Table mode -->
-          <div v-if="optionsEditMode === 'table'" class="options-table">
-            <div v-for="(row, index) in optionsTableData" :key="index" class="options-row">
-              <!-- Type selector -->
-              <Select
-                v-model="row.type"
-                :options="[
-                  { value: 'field', label: _('options_type_field') },
-                  { value: 'custom', label: _('options_type_custom') },
-                ]"
-                option-label="label"
-                option-value="value"
-                class="options-type-select"
-                @change="onOptionTypeChange(row)"
-              />
-
-              <!-- Field type: Select field name -->
-              <template v-if="row.type === 'field'">
-                <Select
-                  v-model="row.key"
-                  :options="productOptionFields"
-                  option-label="label"
-                  option-value="name"
-                  :placeholder="_('options_select_field')"
-                  class="options-key-input"
-                  @change="onFieldKeyChange(row)"
-                />
-                <!-- Field value: Select from available values or input -->
-                <Select
-                  v-if="row.fieldValues.length > 0"
-                  v-model="row.value"
-                  :options="row.fieldValues"
-                  option-label="label"
-                  option-value="value"
-                  :placeholder="_('options_select_value')"
-                  :loading="row.loadingValues"
-                  editable
-                  class="options-value-input"
-                  @change="syncTableToJson"
-                />
-                <InputText
-                  v-else
-                  v-model="row.value"
-                  :placeholder="row.loadingValues ? _('loading') : _('options_value')"
-                  :disabled="row.loadingValues"
-                  class="options-value-input"
-                  @change="syncTableToJson"
-                />
-              </template>
-
-              <!-- Custom type: Free text inputs -->
-              <template v-else>
-                <InputText
-                  v-model="row.key"
-                  :placeholder="_('options_key')"
-                  class="options-key-input"
-                  @change="syncTableToJson"
-                />
-                <Textarea
-                  v-if="row.isComplex"
-                  v-model="row.value"
-                  :placeholder="_('options_value')"
-                  class="options-value-input"
-                  rows="2"
-                  @change="syncTableToJson"
-                />
-                <InputText
-                  v-else
-                  v-model="row.value"
-                  :placeholder="_('options_value')"
-                  class="options-value-input"
-                  @change="syncTableToJson"
-                />
-              </template>
-
-              <Button
-                icon="pi pi-times"
-                severity="danger"
-                text
-                rounded
-                size="small"
-                @click="removeOptionRow(index)"
-              />
-            </div>
-            <Button
-              :label="_('options_add_row')"
-              icon="pi pi-plus"
-              severity="secondary"
-              size="small"
-              text
-              @click="addOptionRow"
-            />
-          </div>
-
-          <!-- JSON mode -->
-          <div v-else class="options-json">
-            <Textarea
-              v-model="optionsJsonText"
-              :placeholder="_('options_json_placeholder')"
-              rows="6"
-              class="w-full options-json-textarea"
-              :class="{ 'p-invalid': optionsJsonError }"
-            />
-            <small v-if="optionsJsonError" class="p-error">{{ optionsJsonError }}</small>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <Button
-          :label="_('cancel')"
-          icon="pi pi-times"
-          severity="secondary"
-          :disabled="savingProduct"
-          @click="cancelEditProduct"
-        />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="savingProduct"
-          @click="saveEditedProduct"
-        />
-      </template>
-    </Dialog>
-
-    <!-- Add Product Dialog -->
-    <Dialog
+      v-model:edit-product-form="editProductForm"
+      v-model:options-table-data="optionsTableData"
+      v-model:options-json-text="optionsJsonText"
+      :editing-product="editingProduct"
+      :saving-product="savingProduct"
+      :options-edit-mode="optionsEditMode"
+      :product-option-fields="productOptionFields"
+      :options-json-error="optionsJsonError"
+      :edited-product-cost="editedProductCost"
+      :format-price="formatPrice"
+      :switch-options-mode="switchOptionsMode"
+      :on-option-type-change="onOptionTypeChange"
+      :on-field-key-change="onFieldKeyChange"
+      :sync-table-to-json="syncTableToJson"
+      :remove-option-row="removeOptionRow"
+      :add-option-row="addOptionRow"
+      :cancel-edit-product="cancelEditProduct"
+      :save-edited-product="saveEditedProduct"
+    />
+
+    <OrderAddProductDialog
       v-model:visible="addProductDialogVisible"
-      :header="_('order_add_product_title')"
-      :style="{ width: '34.375rem' }"
-      :modal="true"
-      :closable="!savingNewProduct"
-      :close-on-escape="!savingNewProduct"
-      append-to="self"
-    >
-      <div class="add-product-form">
-        <!-- Product search -->
-        <div class="field mb-3">
-          <label>{{ _('order_search_product') }}</label>
-          <AutoComplete
-            v-model="selectedProduct"
-            :suggestions="productSuggestions"
-            option-label="display"
-            :placeholder="_('order_search_product')"
-            :loading="searchingProducts"
-            class="w-full"
-            :min-length="2"
-            @complete="searchProducts"
-            @item-select="onProductSelect"
-          >
-            <template #option="{ option }">
-              <div class="ms3-product-suggestion">
-                <img
-                  v-if="option.image"
-                  :src="option.image"
-                  :alt="option.pagetitle"
-                  class="ms3-product-suggestion-image"
-                />
-                <div class="ms3-product-suggestion-info">
-                  <div class="ms3-product-suggestion-name">{{ option.pagetitle }}</div>
-                  <div class="ms3-product-suggestion-meta">
-                    <span v-if="option.article" class="article">[{{ option.article }}]</span>
-                    <span class="price">{{ formatPrice(option.price) }}</span>
-                  </div>
-                </div>
-              </div>
-            </template>
-          </AutoComplete>
-        </div>
-
-        <!-- Product details (shown after selection) -->
-        <div v-if="selectedProduct && selectedProduct.id" class="selected-product-details">
-          <div class="selected-product-header mb-3">
-            <img
-              v-if="selectedProduct.image"
-              :src="selectedProduct.image"
-              :alt="selectedProduct.pagetitle"
-              class="selected-product-image"
-            />
-            <div class="selected-product-name">{{ selectedProduct.pagetitle }}</div>
-          </div>
-
-          <div class="product-form-fields">
-            <!-- Count -->
-            <div class="field mb-3">
-              <label>{{ _('order_product_count') }}</label>
-              <InputNumber v-model="addProductForm.count" :min="1" class="w-full" />
-            </div>
-
-            <!-- Price -->
-            <div class="field mb-3">
-              <label>{{ _('order_product_price') }}</label>
-              <InputNumber
-                v-model="addProductForm.price"
-                mode="decimal"
-                :min-fraction-digits="2"
-                :max-fraction-digits="2"
-                class="w-full"
-              />
-            </div>
-
-            <!-- Weight -->
-            <div class="field mb-3">
-              <label>{{ _('order_product_weight') }}</label>
-              <InputNumber
-                v-model="addProductForm.weight"
-                mode="decimal"
-                :min-fraction-digits="3"
-                :max-fraction-digits="3"
-                class="w-full"
-              />
-            </div>
-
-            <!-- Calculated cost -->
-            <div class="field mb-3">
-              <label>{{ _('order_product_cost') }}</label>
-              <div class="calculated-cost">{{ formatPrice(newProductCost) }}</div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <Button
-          :label="_('cancel')"
-          icon="pi pi-times"
-          severity="secondary"
-          :disabled="savingNewProduct"
-          @click="cancelAddProduct"
-        />
-        <Button
-          :label="_('save')"
-          icon="pi pi-check"
-          :loading="savingNewProduct"
-          :disabled="!selectedProduct || !selectedProduct.id"
-          @click="saveNewProduct"
-        />
-      </template>
-    </Dialog>
-
-    <!-- Duplicate Customer Dialog -->
-    <Dialog
+      v-model:selected-product="selectedProduct"
+      v-model:add-product-form="addProductForm"
+      :product-suggestions="productSuggestions"
+      :searching-products="searchingProducts"
+      :saving-new-product="savingNewProduct"
+      :new-product-cost="newProductCost"
+      :format-price="formatPrice"
+      :search-products="searchProducts"
+      :on-product-select="onProductSelect"
+      :cancel-add-product="cancelAddProduct"
+      :save-new-product="saveNewProduct"
+    />
+
+    <OrderDuplicateCustomerDialog
       v-model:visible="showDuplicateDialog"
-      :header="_('ms3_customer_duplicate_found')"
-      :style="{ width: '31.25rem' }"
-      :modal="true"
-      :closable="true"
-      append-to="self"
-      @hide="cancelDuplicateDialog"
-    >
-      <div class="duplicate-customer-dialog">
-        <div class="duplicate-warning">
-          <i class="pi pi-exclamation-triangle"></i>
-          <p>{{ _('ms3_customer_duplicate_message') }}</p>
-        </div>
-
-        <div v-if="duplicateCustomer" class="duplicate-customer-info">
-          <div class="info-row">
-            <span class="info-label">{{ _('customer_name') }}:</span>
-            <span class="info-value"
-              >{{ duplicateCustomer.first_name }} {{ duplicateCustomer.last_name }}</span
-            >
-          </div>
-          <div v-if="duplicateCustomer.email" class="info-row">
-            <span class="info-label">Email:</span>
-            <span class="info-value">{{ duplicateCustomer.email }}</span>
-          </div>
-          <div v-if="duplicateCustomer.phone" class="info-row">
-            <span class="info-label">{{ _('phone') }}:</span>
-            <span class="info-value">{{ duplicateCustomer.phone }}</span>
-          </div>
-          <div v-if="duplicateCustomer.orders_count" class="info-row">
-            <span class="info-label">{{ _('orders') }}:</span>
-            <span class="info-value">{{ duplicateCustomer.orders_count }}</span>
-          </div>
-        </div>
-      </div>
-
-      <template #footer>
-        <Button
-          :label="_('cancel')"
-          icon="pi pi-times"
-          severity="secondary"
-          @click="cancelDuplicateDialog"
-        />
-        <Button
-          :label="_('ms3_customer_use_existing')"
-          icon="pi pi-user"
-          severity="info"
-          @click="useDuplicateCustomer"
-        />
-        <Button
-          :label="_('ms3_customer_create_new')"
-          icon="pi pi-plus"
-          severity="warning"
-          @click="createNewCustomerAnyway"
-        />
-      </template>
-    </Dialog>
+      :duplicate-customer="duplicateCustomer"
+      :cancel-duplicate-dialog="cancelDuplicateDialog"
+      :use-duplicate-customer="useDuplicateCustomer"
+      :create-new-customer-anyway="createNewCustomerAnyway"
+    />
 
     <!-- Header -->
     <div class="order-header mb-3">
@@ -2239,279 +244,7 @@ onMounted(async () => {
   text-align: center;
 }
 
-/* Dialog / header utilities (tab-specific layout lives in components/order/) */
-.field {
-  margin-bottom: 0;
-}
-
 .mb-3 {
   margin-bottom: 1rem;
 }
-
-.w-full {
-  width: 100%;
-}
-
-/* Edit product dialog styles */
-.edit-product-form .field label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--ms3-text-muted);
-  font-size: 0.875rem;
-}
-
-.product-name-display {
-  font-size: 1rem;
-  font-weight: 500;
-  color: var(--ms3-text-darkest);
-  padding: 0.5rem;
-  background: var(--ms3-bg-slate);
-  border-radius: 0.25rem;
-}
-
-.cost-display {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--ms3-text-success);
-  padding: 0.5rem;
-  background: var(--ms3-bg-success);
-  border-radius: 0.25rem;
-  text-align: right;
-}
-
-/* Options editing styles */
-.options-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.options-header label {
-  margin-bottom: 0 !important;
-}
-
-.options-mode-switch {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.options-table {
-  border: var(--ms3-border-width) solid var(--ms3-border-color);
-  border-radius: 0.375rem;
-  padding: var(--ms3-spacing-3);
-  background: var(--ms3-bg-slate);
-}
-
-.options-row {
-  display: flex;
-  gap: 0.5rem;
-  margin-bottom: 0.5rem;
-  align-items: flex-start;
-}
-
-.options-row:last-of-type {
-  margin-bottom: var(--ms3-spacing-3);
-}
-
-.options-type-select {
-  flex: 0 0 6.25rem;
-  min-width: 6.25rem;
-}
-
-.options-key-input {
-  flex: 0 0 7.5rem;
-  min-width: 6.25rem;
-}
-
-.options-value-input {
-  flex: 1;
-  min-width: 0;
-}
-
-.options-json {
-  border: var(--ms3-border-width) solid var(--ms3-border-color);
-  border-radius: 0.375rem;
-  padding: 0.5rem;
-  background: var(--ms3-bg-slate);
-}
-
-.options-json-textarea {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-  font-size: 0.875rem;
-}
-
-.options-json-textarea.p-invalid {
-  border-color: var(--ms3-text-danger);
-}
-
-.p-error {
-  color: var(--ms3-text-danger);
-  font-size: 0.75rem;
-  margin-top: 0.25rem;
-  display: block;
-}
-
-/* Add Product Dialog styles */
-.add-product-form .field label {
-  display: block;
-  margin-bottom: 0.5rem;
-  font-weight: 500;
-  color: var(--ms3-text-muted);
-  font-size: 0.875rem;
-}
-
-.selected-product-details {
-  border: var(--ms3-border-width) solid var(--ms3-border-color);
-  border-radius: 0.5rem;
-  padding: 1rem;
-  background: var(--ms3-bg-slate);
-}
-
-.selected-product-header {
-  display: flex;
-  align-items: center;
-  gap: var(--ms3-spacing-3);
-  padding-bottom: var(--ms3-spacing-3);
-  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
-}
-
-.selected-product-image {
-  width: 3.125rem;
-  height: 3.125rem;
-  object-fit: cover;
-  border-radius: 0.25rem;
-  border: var(--ms3-border-width) solid var(--ms3-border-color);
-}
-
-.selected-product-name {
-  font-weight: 600;
-  font-size: 1rem;
-  color: var(--ms3-text-darkest);
-}
-
-.calculated-cost {
-  font-size: 1.125rem;
-  font-weight: 600;
-  color: var(--ms3-text-success);
-  padding: 0.5rem;
-  background: var(--ms3-bg-success);
-  border-radius: 0.25rem;
-  text-align: right;
-}
-
-/* Duplicate customer dialog */
-.duplicate-customer-dialog {
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-
-.duplicate-warning {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ms3-spacing-3);
-  padding: 1rem;
-  background: var(--ms3-bg-warning);
-  border-radius: 0.5rem;
-}
-
-.duplicate-warning i {
-  color: var(--ms3-text-warning-accent);
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
-
-.duplicate-warning p {
-  margin: 0;
-  color: var(--ms3-text-warning);
-  font-size: 0.875rem;
-}
-
-.duplicate-customer-info {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  padding: 1rem;
-  background: var(--ms3-bg-slate);
-  border-radius: 0.5rem;
-}
-
-.duplicate-customer-info .info-row {
-  display: flex;
-  gap: 0.5rem;
-}
-
-.duplicate-customer-info .info-label {
-  color: var(--ms3-text-muted);
-  font-size: 0.875rem;
-  min-width: 6.25rem;
-}
-
-.duplicate-customer-info .info-value {
-  color: var(--ms3-text-darkest);
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-</style>
-
-<style>
-/* AutoComplete input full width
-   .p- classes are excluded from postcss-prefix-selector */
-.add-product-form .p-autocomplete {
-  width: 100%;
-}
-
-.add-product-form .p-autocomplete-input {
-  width: 100%;
-}
-
-/* Product suggestion in AutoComplete dropdown
-   Uses .ms3- prefix to bypass postcss-prefix-selector (excluded in vite.config.js)
-   These styles work in teleported dropdowns rendered in <body> */
-.ms3-product-suggestion {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: var(--ms3-spacing-3);
-  padding: 0.25rem 0;
-}
-
-.ms3-product-suggestion-image {
-  width: 3.125rem;
-  height: 3.125rem;
-  object-fit: cover;
-  border-radius: 0.25rem;
-  border: var(--ms3-border-width) solid var(--ms3-border-color);
-  flex-shrink: 0;
-}
-
-.ms3-product-suggestion-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.ms3-product-suggestion-name {
-  font-weight: 500;
-  color: var(--ms3-text-darkest);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ms3-product-suggestion-meta {
-  font-size: 0.75rem;
-  color: var(--ms3-text-muted);
-  display: flex;
-  gap: 0.5rem;
-}
-
-.ms3-product-suggestion-meta .article {
-  color: var(--ms3-accent-primary);
-}
-
-.ms3-product-suggestion-meta .price {
-  font-weight: 500;
-}
 </style>
diff --git a/vueManager/src/components/order/OrderAddProductDialog.vue b/vueManager/src/components/order/OrderAddProductDialog.vue
new file mode 100644
index 00000000..ed6bf44d
--- /dev/null
+++ b/vueManager/src/components/order/OrderAddProductDialog.vue
@@ -0,0 +1,265 @@
+<script setup>
+import { useLexicon } from '@vuetools/useLexicon'
+import AutoComplete from 'primevue/autocomplete'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import InputNumber from 'primevue/inputnumber'
+
+const { _ } = useLexicon()
+
+const visible = defineModel('visible', { type: Boolean, default: false })
+const selectedProduct = defineModel('selectedProduct', { type: Object, default: null })
+const addProductForm = defineModel('addProductForm', { type: Object, required: true })
+
+defineProps({
+  productSuggestions: { type: Array, default: () => [] },
+  searchingProducts: { type: Boolean, default: false },
+  savingNewProduct: { type: Boolean, default: false },
+  newProductCost: { type: Number, default: 0 },
+  formatPrice: { type: Function, required: true },
+  searchProducts: { type: Function, required: true },
+  onProductSelect: { type: Function, required: true },
+  cancelAddProduct: { type: Function, required: true },
+  saveNewProduct: { type: Function, required: true },
+})
+</script>
+
+<template>
+<!-- Add Product Dialog -->
+<Dialog
+  v-model:visible="visible"
+  :header="_('order_add_product_title')"
+  :style="{ width: '34.375rem' }"
+  :modal="true"
+  :closable="!savingNewProduct"
+  :close-on-escape="!savingNewProduct"
+  append-to="self"
+>
+  <div class="add-product-form">
+    <!-- Product search -->
+    <div class="field mb-3">
+      <label>{{ _('order_search_product') }}</label>
+      <AutoComplete
+        v-model="selectedProduct"
+        :suggestions="productSuggestions"
+        option-label="display"
+        :placeholder="_('order_search_product')"
+        :loading="searchingProducts"
+        class="w-full"
+        :min-length="2"
+        @complete="searchProducts"
+        @item-select="onProductSelect"
+      >
+        <template #option="{ option }">
+          <div class="ms3-product-suggestion">
+            <img
+              v-if="option.image"
+              :src="option.image"
+              :alt="option.pagetitle"
+              class="ms3-product-suggestion-image"
+            />
+            <div class="ms3-product-suggestion-info">
+              <div class="ms3-product-suggestion-name">{{ option.pagetitle }}</div>
+              <div class="ms3-product-suggestion-meta">
+                <span v-if="option.article" class="article">[{{ option.article }}]</span>
+                <span class="price">{{ formatPrice(option.price) }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </AutoComplete>
+    </div>
+
+    <!-- Product details (shown after selection) -->
+    <div v-if="selectedProduct && selectedProduct.id" class="selected-product-details">
+      <div class="selected-product-header mb-3">
+        <img
+          v-if="selectedProduct.image"
+          :src="selectedProduct.image"
+          :alt="selectedProduct.pagetitle"
+          class="selected-product-image"
+        />
+        <div class="selected-product-name">{{ selectedProduct.pagetitle }}</div>
+      </div>
+
+      <div class="product-form-fields">
+        <!-- Count -->
+        <div class="field mb-3">
+          <label>{{ _('order_product_count') }}</label>
+          <InputNumber v-model="addProductForm.count" :min="1" class="w-full" />
+        </div>
+
+        <!-- Price -->
+        <div class="field mb-3">
+          <label>{{ _('order_product_price') }}</label>
+          <InputNumber
+            v-model="addProductForm.price"
+            mode="decimal"
+            :min-fraction-digits="2"
+            :max-fraction-digits="2"
+            class="w-full"
+          />
+        </div>
+
+        <!-- Weight -->
+        <div class="field mb-3">
+          <label>{{ _('order_product_weight') }}</label>
+          <InputNumber
+            v-model="addProductForm.weight"
+            mode="decimal"
+            :min-fraction-digits="3"
+            :max-fraction-digits="3"
+            class="w-full"
+          />
+        </div>
+
+        <!-- Calculated cost -->
+        <div class="field mb-3">
+          <label>{{ _('order_product_cost') }}</label>
+          <div class="calculated-cost">{{ formatPrice(newProductCost) }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <template #footer>
+    <Button
+      :label="_('cancel')"
+      icon="pi pi-times"
+      severity="secondary"
+      :disabled="savingNewProduct"
+      @click="cancelAddProduct"
+    />
+    <Button
+      :label="_('save')"
+      icon="pi pi-check"
+      :loading="savingNewProduct"
+      :disabled="!selectedProduct || !selectedProduct.id"
+      @click="saveNewProduct"
+    />
+  </template>
+</Dialog>
+</template>
+
+<style scoped>
+.add-product-form .field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--ms3-text-muted);
+  font-size: 0.875rem;
+}
+
+.selected-product-details {
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.5rem;
+  padding: 1rem;
+  background: var(--ms3-bg-slate);
+}
+
+.selected-product-header {
+  display: flex;
+  align-items: center;
+  gap: var(--ms3-spacing-3);
+  padding-bottom: var(--ms3-spacing-3);
+  border-bottom: var(--ms3-border-width) solid var(--ms3-border-color);
+}
+
+.selected-product-image {
+  width: 3.125rem;
+  height: 3.125rem;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+}
+
+.selected-product-name {
+  font-weight: 600;
+  font-size: 1rem;
+  color: var(--ms3-text-darkest);
+}
+
+.calculated-cost {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--ms3-text-success);
+  padding: 0.5rem;
+  background: var(--ms3-bg-success);
+  border-radius: 0.25rem;
+  text-align: right;
+}
+
+.field {
+  margin-bottom: 0;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+</style>
+
+<style>
+/* AutoComplete input full width
+   .p- classes are excluded from postcss-prefix-selector */
+.add-product-form .p-autocomplete {
+  width: 100%;
+}
+
+.add-product-form .p-autocomplete-input {
+  width: 100%;
+}
+
+/* Product suggestion in AutoComplete dropdown
+   Uses .ms3- prefix to bypass postcss-prefix-selector (excluded in vite.config.js)
+   These styles work in teleported dropdowns rendered in <body> */
+.ms3-product-suggestion {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--ms3-spacing-3);
+  padding: 0.25rem 0;
+}
+
+.ms3-product-suggestion-image {
+  width: 3.125rem;
+  height: 3.125rem;
+  object-fit: cover;
+  border-radius: 0.25rem;
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  flex-shrink: 0;
+}
+
+.ms3-product-suggestion-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.ms3-product-suggestion-name {
+  font-weight: 500;
+  color: var(--ms3-text-darkest);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ms3-product-suggestion-meta {
+  font-size: 0.75rem;
+  color: var(--ms3-text-muted);
+  display: flex;
+  gap: 0.5rem;
+}
+
+.ms3-product-suggestion-meta .article {
+  color: var(--ms3-accent-primary);
+}
+
+.ms3-product-suggestion-meta .price {
+  font-weight: 500;
+}
+
+</style>
diff --git a/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
new file mode 100644
index 00000000..5316918b
--- /dev/null
+++ b/vueManager/src/components/order/OrderDuplicateCustomerDialog.vue
@@ -0,0 +1,134 @@
+<script setup>
+import { useLexicon } from '@vuetools/useLexicon'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+
+const { _ } = useLexicon()
+
+const visible = defineModel('visible', { type: Boolean, default: false })
+
+defineProps({
+  duplicateCustomer: { type: Object, default: null },
+  cancelDuplicateDialog: { type: Function, required: true },
+  useDuplicateCustomer: { type: Function, required: true },
+  createNewCustomerAnyway: { type: Function, required: true },
+})
+</script>
+
+<template>
+<!-- Duplicate Customer Dialog -->
+<Dialog
+  v-model:visible="visible"
+  :header="_('ms3_customer_duplicate_found')"
+  :style="{ width: '31.25rem' }"
+  :modal="true"
+  :closable="true"
+  append-to="self"
+  @hide="cancelDuplicateDialog"
+>
+  <div class="duplicate-customer-dialog">
+    <div class="duplicate-warning">
+      <i class="pi pi-exclamation-triangle"></i>
+      <p>{{ _('ms3_customer_duplicate_message') }}</p>
+    </div>
+
+    <div v-if="duplicateCustomer" class="duplicate-customer-info">
+      <div class="info-row">
+        <span class="info-label">{{ _('customer_name') }}:</span>
+        <span class="info-value">
+          {{ duplicateCustomer.first_name }} {{ duplicateCustomer.last_name }}
+        </span>
+      </div>
+      <div v-if="duplicateCustomer.email" class="info-row">
+        <span class="info-label">Email:</span>
+        <span class="info-value">{{ duplicateCustomer.email }}</span>
+      </div>
+      <div v-if="duplicateCustomer.phone" class="info-row">
+        <span class="info-label">{{ _('phone') }}:</span>
+        <span class="info-value">{{ duplicateCustomer.phone }}</span>
+      </div>
+      <div v-if="duplicateCustomer.orders_count" class="info-row">
+        <span class="info-label">{{ _('orders') }}:</span>
+        <span class="info-value">{{ duplicateCustomer.orders_count }}</span>
+      </div>
+    </div>
+  </div>
+
+  <template #footer>
+    <Button
+      :label="_('cancel')"
+      icon="pi pi-times"
+      severity="secondary"
+      @click="cancelDuplicateDialog"
+    />
+    <Button
+      :label="_('ms3_customer_use_existing')"
+      icon="pi pi-user"
+      severity="info"
+      @click="useDuplicateCustomer"
+    />
+    <Button
+      :label="_('ms3_customer_create_new')"
+      icon="pi pi-plus"
+      severity="warning"
+      @click="createNewCustomerAnyway"
+    />
+  </template>
+</Dialog>
+</template>
+
+<style scoped>
+.duplicate-customer-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.duplicate-warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--ms3-spacing-3);
+  padding: 1rem;
+  background: var(--ms3-bg-warning);
+  border-radius: 0.5rem;
+}
+
+.duplicate-warning i {
+  color: var(--ms3-text-warning-accent);
+  font-size: 1.5rem;
+  flex-shrink: 0;
+}
+
+.duplicate-warning p {
+  margin: 0;
+  color: var(--ms3-text-warning);
+  font-size: 0.875rem;
+}
+
+.duplicate-customer-info {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.5rem;
+}
+
+.duplicate-customer-info .info-row {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.duplicate-customer-info .info-label {
+  color: var(--ms3-text-muted);
+  font-size: 0.875rem;
+  min-width: 6.25rem;
+}
+
+.duplicate-customer-info .info-value {
+  color: var(--ms3-text-darkest);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+</style>
diff --git a/vueManager/src/components/order/OrderEditProductDialog.vue b/vueManager/src/components/order/OrderEditProductDialog.vue
new file mode 100644
index 00000000..6021010c
--- /dev/null
+++ b/vueManager/src/components/order/OrderEditProductDialog.vue
@@ -0,0 +1,359 @@
+<script setup>
+import { useLexicon } from '@vuetools/useLexicon'
+import Button from 'primevue/button'
+import Dialog from 'primevue/dialog'
+import InputNumber from 'primevue/inputnumber'
+import InputText from 'primevue/inputtext'
+import Select from 'primevue/select'
+import Textarea from 'primevue/textarea'
+
+const { _ } = useLexicon()
+
+const visible = defineModel('visible', { type: Boolean, default: false })
+const editProductForm = defineModel('editProductForm', { type: Object, required: true })
+const optionsTableData = defineModel('optionsTableData', { type: Array, default: () => [] })
+const optionsJsonText = defineModel('optionsJsonText', { type: String, default: '' })
+
+defineProps({
+  editingProduct: { type: Object, default: null },
+  savingProduct: { type: Boolean, default: false },
+  optionsEditMode: { type: String, default: 'table' },
+  productOptionFields: { type: Array, default: () => [] },
+  optionsJsonError: { type: String, default: '' },
+  editedProductCost: { type: Number, default: 0 },
+  formatPrice: { type: Function, required: true },
+  switchOptionsMode: { type: Function, required: true },
+  onOptionTypeChange: { type: Function, required: true },
+  onFieldKeyChange: { type: Function, required: true },
+  syncTableToJson: { type: Function, required: true },
+  removeOptionRow: { type: Function, required: true },
+  addOptionRow: { type: Function, required: true },
+  cancelEditProduct: { type: Function, required: true },
+  saveEditedProduct: { type: Function, required: true },
+})
+</script>
+
+<template>
+<!-- Edit Product Dialog -->
+<Dialog
+  v-model:visible="visible"
+  :header="_('order_product_edit')"
+  :style="{ width: '40.625rem' }"
+  :modal="true"
+  :closable="!savingProduct"
+  :close-on-escape="!savingProduct"
+  append-to="self"
+>
+  <div v-if="editingProduct" class="edit-product-form">
+    <!-- Product name (readonly) -->
+    <div class="field mb-3">
+      <label>{{ _('order_product_name') }}</label>
+      <div class="product-name-display">{{ editingProduct.name }}</div>
+    </div>
+
+    <!-- Count -->
+    <div class="field mb-3">
+      <label for="edit-count">{{ _('order_product_count') }}</label>
+      <InputNumber
+        id="edit-count"
+        v-model="editProductForm.count"
+        :min="1"
+        :max="9999"
+        show-buttons
+        class="w-full"
+      />
+    </div>
+
+    <!-- Price -->
+    <div class="field mb-3">
+      <label for="edit-price">{{ _('order_product_price') }}</label>
+      <InputNumber
+        id="edit-price"
+        v-model="editProductForm.price"
+        :min="0"
+        :min-fraction-digits="0"
+        :max-fraction-digits="2"
+        class="w-full"
+      />
+    </div>
+
+    <!-- Weight -->
+    <div class="field mb-3">
+      <label for="edit-weight">{{ _('order_product_weight') }}</label>
+      <InputNumber
+        id="edit-weight"
+        v-model="editProductForm.weight"
+        :min="0"
+        :min-fraction-digits="0"
+        :max-fraction-digits="3"
+        class="w-full"
+      />
+    </div>
+
+    <!-- Calculated cost (readonly) -->
+    <div class="field mb-3">
+      <label>{{ _('order_product_cost') }}</label>
+      <div class="cost-display">{{ formatPrice(editedProductCost) }}</div>
+    </div>
+
+    <!-- Options -->
+    <div class="field mb-3">
+      <div class="options-header">
+        <label>{{ _('order_product_options') }}</label>
+        <div class="options-mode-switch">
+          <Button
+            :label="_('options_mode_table')"
+            :severity="optionsEditMode === 'table' ? 'primary' : 'secondary'"
+            size="small"
+            text
+            @click="switchOptionsMode('table')"
+          />
+          <Button
+            :label="_('options_mode_json')"
+            :severity="optionsEditMode === 'json' ? 'primary' : 'secondary'"
+            size="small"
+            text
+            @click="switchOptionsMode('json')"
+          />
+        </div>
+      </div>
+
+      <!-- Table mode -->
+      <div v-if="optionsEditMode === 'table'" class="options-table">
+        <div v-for="(row, index) in optionsTableData" :key="index" class="options-row">
+          <!-- Type selector -->
+          <Select
+            v-model="row.type"
+            :options="[
+              { value: 'field', label: _('options_type_field') },
+              { value: 'custom', label: _('options_type_custom') },
+            ]"
+            option-label="label"
+            option-value="value"
+            class="options-type-select"
+            @change="onOptionTypeChange(row)"
+          />
+
+          <!-- Field type: Select field name -->
+          <template v-if="row.type === 'field'">
+            <Select
+              v-model="row.key"
+              :options="productOptionFields"
+              option-label="label"
+              option-value="name"
+              :placeholder="_('options_select_field')"
+              class="options-key-input"
+              @change="onFieldKeyChange(row)"
+            />
+            <!-- Field value: Select from available values or input -->
+            <Select
+              v-if="row.fieldValues.length > 0"
+              v-model="row.value"
+              :options="row.fieldValues"
+              option-label="label"
+              option-value="value"
+              :placeholder="_('options_select_value')"
+              :loading="row.loadingValues"
+              editable
+              class="options-value-input"
+              @change="syncTableToJson"
+            />
+            <InputText
+              v-else
+              v-model="row.value"
+              :placeholder="row.loadingValues ? _('loading') : _('options_value')"
+              :disabled="row.loadingValues"
+              class="options-value-input"
+              @change="syncTableToJson"
+            />
+          </template>
+
+          <!-- Custom type: Free text inputs -->
+          <template v-else>
+            <InputText
+              v-model="row.key"
+              :placeholder="_('options_key')"
+              class="options-key-input"
+              @change="syncTableToJson"
+            />
+            <Textarea
+              v-if="row.isComplex"
+              v-model="row.value"
+              :placeholder="_('options_value')"
+              class="options-value-input"
+              rows="2"
+              @change="syncTableToJson"
+            />
+            <InputText
+              v-else
+              v-model="row.value"
+              :placeholder="_('options_value')"
+              class="options-value-input"
+              @change="syncTableToJson"
+            />
+          </template>
+
+          <Button
+            icon="pi pi-times"
+            severity="danger"
+            text
+            rounded
+            size="small"
+            @click="removeOptionRow(index)"
+          />
+        </div>
+        <Button
+          :label="_('options_add_row')"
+          icon="pi pi-plus"
+          severity="secondary"
+          size="small"
+          text
+          @click="addOptionRow"
+        />
+      </div>
+
+      <!-- JSON mode -->
+      <div v-else class="options-json">
+        <Textarea
+          v-model="optionsJsonText"
+          :placeholder="_('options_json_placeholder')"
+          rows="6"
+          class="w-full options-json-textarea"
+          :class="{ 'p-invalid': optionsJsonError }"
+        />
+        <small v-if="optionsJsonError" class="p-error">{{ optionsJsonError }}</small>
+      </div>
+    </div>
+  </div>
+
+  <template #footer>
+    <Button
+      :label="_('cancel')"
+      icon="pi pi-times"
+      severity="secondary"
+      :disabled="savingProduct"
+      @click="cancelEditProduct"
+    />
+    <Button
+      :label="_('save')"
+      icon="pi pi-check"
+      :loading="savingProduct"
+      @click="saveEditedProduct"
+    />
+  </template>
+</Dialog>
+</template>
+
+<style scoped>
+.edit-product-form .field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: var(--ms3-text-muted);
+  font-size: 0.875rem;
+}
+
+.product-name-display {
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--ms3-text-darkest);
+  padding: 0.5rem;
+  background: var(--ms3-bg-slate);
+  border-radius: 0.25rem;
+}
+
+.cost-display {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--ms3-text-success);
+  padding: 0.5rem;
+  background: var(--ms3-bg-success);
+  border-radius: 0.25rem;
+  text-align: right;
+}
+
+.options-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.options-header label {
+  margin-bottom: 0 !important;
+}
+
+.options-mode-switch {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.options-table {
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
+  padding: var(--ms3-spacing-3);
+  background: var(--ms3-bg-slate);
+}
+
+.options-row {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+  align-items: flex-start;
+}
+
+.options-row:last-of-type {
+  margin-bottom: var(--ms3-spacing-3);
+}
+
+.options-type-select {
+  flex: 0 0 6.25rem;
+  min-width: 6.25rem;
+}
+
+.options-key-input {
+  flex: 0 0 7.5rem;
+  min-width: 6.25rem;
+}
+
+.options-value-input {
+  flex: 1;
+  min-width: 0;
+}
+
+.options-json {
+  border: var(--ms3-border-width) solid var(--ms3-border-color);
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+  background: var(--ms3-bg-slate);
+}
+
+.options-json-textarea {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.875rem;
+}
+
+.options-json-textarea.p-invalid {
+  border-color: var(--ms3-text-danger);
+}
+
+.p-error {
+  color: var(--ms3-text-danger);
+  font-size: 0.75rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+.field {
+  margin-bottom: 0;
+}
+
+.mb-3 {
+  margin-bottom: 1rem;
+}
+
+.w-full {
+  width: 100%;
+}
+
+</style>
diff --git a/vueManager/src/composables/useOrderView.js b/vueManager/src/composables/useOrderView.js
new file mode 100644
index 00000000..f96cfc4c
--- /dev/null
+++ b/vueManager/src/composables/useOrderView.js
@@ -0,0 +1,1753 @@
+/**
+ * Order manager screen state, API calls, plugin tabs, and product dialogs (#339).
+ */
+import { useLexicon } from '@vuetools/useLexicon'
+import { useConfirm } from 'primevue/useconfirm'
+import { useToast } from 'primevue/usetoast'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+
+import request from '../request.js'
+import { normalizeOrderPluginTab } from '../utils/orderPluginTab.js'
+import { parseRepeaterModelValue, REPEATER_XTYPE } from '../utils/repeaterField.js'
+import { useOrderFieldHelpers } from './useOrderFieldHelpers.js'
+import { useOrderFormatters } from './useOrderFormatters.js'
+
+export function useOrderView() {
+  const toast = useToast()
+  const confirm = useConfirm()
+  const { _ } = useLexicon()
+
+  const loading = ref(true)
+  const saving = ref(false)
+  const order = ref(null)
+  const products = ref([])
+  const productsColumns = ref([])
+  const logs = ref([])
+  const statuses = ref([])
+  const deliveries = ref([])
+  const payments = ref([])
+
+  // Model fields configuration
+  const orderFields = ref([])
+  const addressFields = ref([])
+
+  // Sections
+  const orderSections = ref([])
+  const addressSections = ref([])
+
+  // Combo options from API
+  const orderComboOptions = ref({})
+  const addressComboOptions = ref({})
+
+  // Extra fields (from Object Extension)
+  const orderExtraFields = ref([])
+  const addressExtraFields = ref([])
+
+  // Edit product dialog state
+  const editProductDialogVisible = ref(false)
+  const editingProduct = ref(null)
+  const editProductForm = ref({
+    count: 1,
+    price: 0,
+    weight: 0,
+  })
+  const savingProduct = ref(false)
+
+  // Options editing state
+  const optionsEditMode = ref('table') // 'table' or 'json'
+  const optionsTableData = ref([]) // Array of { type, key, value, isComplex, fieldValues, loadingValues }
+  const optionsJsonText = ref('') // JSON string for json mode
+  const optionsJsonError = ref('') // JSON parse error message
+
+  // Product option fields (color, size, etc.)
+  const productOptionFields = ref([])
+  const loadingOptionFields = ref(false)
+
+  // Add product dialog state
+  const addProductDialogVisible = ref(false)
+  const selectedProduct = ref(null)
+  const productSuggestions = ref([])
+  const searchingProducts = ref(false)
+  const addProductForm = ref({
+    count: 1,
+    price: 0,
+    weight: 0,
+    options: {},
+  })
+  const savingNewProduct = ref(false)
+
+  // Customer search state (for create mode)
+  const selectedCustomer = ref(null)
+  const customerSuggestions = ref([])
+  const searchingCustomers = ref(false)
+  const createCustomerFromData = ref(false)
+
+  // Order tabs: built-ins (info/products/address/history) + MS3OrderTabsRegistry plugin tabs
+  const orderActiveTab = ref('info')
+  const pluginTabs = ref([])
+  /** ExtJS plugin panels mounted lazily per tab key; destroyed in onBeforeUnmount */
+  const mountedExtPluginComponents = ref({})
+
+  // Duplicate customer dialog state
+  const showDuplicateDialog = ref(false)
+  const duplicateCustomer = ref(null)
+  const pendingOrderData = ref(null)
+
+  // ms3 is a global (declared with `let`), not window.ms3
+  const orderId = computed(() => {
+    const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
+    const configId = ms3Config?.order_id
+    const rawId = configId || new URLSearchParams(window.location.search).get('id')
+    if (rawId === 'new') {
+      return 'new'
+    }
+    return parseInt(rawId) || 0
+  })
+
+  const isCreateMode = computed(() => {
+    return orderId.value === 'new' || orderId.value === 0
+  })
+
+  const managerConfig = computed(() => {
+    return typeof ms3 !== 'undefined' ? ms3.config : {}
+  })
+
+  /** Fixed positions 0–3; must stay in sync with RESERVED_ORDER_TAB_KEYS in orderPluginTab.js */
+  const builtInOrderTabs = computed(() => [
+    { key: 'info', title: _('order_info'), position: 0, hideOnCreate: false, kind: 'builtin' },
+    { key: 'products', title: _('order_products'), position: 1, hideOnCreate: true, kind: 'builtin' },
+    { key: 'address', title: _('order_address'), position: 2, hideOnCreate: false, kind: 'builtin' },
+    { key: 'history', title: _('order_history'), position: 3, hideOnCreate: true, kind: 'builtin' },
+  ])
+
+  /** Built-in + plugin tabs, sorted by `position`; respects hideOnCreate per tab */
+  const orderTabsConfig = computed(() => {
+    const builtIn = builtInOrderTabs.value.filter(t => !(t.hideOnCreate && isCreateMode.value))
+    const plugins = pluginTabs.value
+      .filter(t => !(t.hideOnCreate && isCreateMode.value))
+      .map(t => ({ ...t, kind: 'plugin' }))
+    return [...builtIn, ...plugins].sort((a, b) => (a.position ?? 100) - (b.position ?? 100))
+  })
+
+  // Draft status ID (typically 1)
+  const draftStatusId = computed(() => {
+    const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
+    return ms3Config?.status_draft || 1
+  })
+
+  // Check if order is in draft status
+  const isDraft = computed(() => {
+    if (!order.value) return false
+    return parseInt(order.value.status_id) === parseInt(draftStatusId.value)
+  })
+
+  // Finalize state
+  const finalizing = ref(false)
+
+  // Order cost recalculation (#212): baseline delivery/payment after load/save
+  const savedBaselineDeliveryId = ref(0)
+  const savedBaselinePaymentId = ref(0)
+  const recalculatingCost = ref(false)
+  /** @type {import('vue').ShallowRef<string[]>} Warning codes from last recalculate API */
+  const costRecalcWarnings = shallowRef([])
+  const manualDeliveryCost = ref(null)
+
+  function syncShippingPaymentBaselineFromOrder() {
+    if (!order.value || isCreateMode.value) {
+      return
+    }
+    savedBaselineDeliveryId.value = Number.parseInt(order.value.delivery_id, 10) || 0
+    savedBaselinePaymentId.value = Number.parseInt(order.value.payment_id, 10) || 0
+  }
+
+  const hasUnsavedShippingPaymentChanges = computed(() => {
+    if (isCreateMode.value || !order.value) {
+      return false
+    }
+    const d = Number.parseInt(order.value.delivery_id, 10) || 0
+    const p = Number.parseInt(order.value.payment_id, 10) || 0
+
+    return d !== savedBaselineDeliveryId.value || p !== savedBaselinePaymentId.value
+  })
+
+  /**
+   * Group fields by sections
+   */
+  const orderFieldsBySection = computed(() => {
+    return groupFieldsBySection(orderFields.value, orderSections.value)
+  })
+
+  const addressFieldsBySection = computed(() => {
+    return groupFieldsBySection(addressFields.value, addressSections.value)
+  })
+
+  /**
+   * Helper to group fields by section
+   */
+  function groupFieldsBySection(fields, sections) {
+    // Create section map
+    const sectionMap = new Map()
+
+    // Add sections in order
+    for (const section of sections) {
+      sectionMap.set(section.id, {
+        ...section,
+        fields: [],
+      })
+    }
+
+    // Add "no section" group for fields without section
+    sectionMap.set(null, {
+      id: null,
+      label: _('ms3_model_field_no_section'),
+      section_key: 'no_section',
+      sort_order: 9999,
+      fields: [],
+    })
+
+    // Assign fields to sections
+    for (const field of fields) {
+      const sectionId = field.section_id || null
+      if (sectionMap.has(sectionId)) {
+        sectionMap.get(sectionId).fields.push(field)
+      } else {
+        // If section doesn't exist, put in "no section"
+        sectionMap.get(null).fields.push(field)
+      }
+    }
+
+    // Convert to array and filter out empty sections
+    return Array.from(sectionMap.values())
+      .filter(section => section.fields.length > 0)
+      .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0))
+  }
+
+  /** Parse repeater extra field values from API (string JSON → array). */
+  function hydrateRepeaterExtraFields(fields) {
+    if (!order.value || !Array.isArray(fields)) {
+      return
+    }
+
+    for (const field of fields) {
+      if (field.xtype === REPEATER_XTYPE && field.key) {
+        order.value[field.key] = parseRepeaterModelValue(order.value[field.key])
+      }
+    }
+  }
+
+  /** Load order data and related resources. */
+  async function loadOrder() {
+    if (!orderId.value) {
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: _('order_id_required'),
+        life: 5000,
+      })
+      return
+    }
+
+    loading.value = true
+
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}`)
+      order.value = response
+      syncShippingPaymentBaselineFromOrder()
+      costRecalcWarnings.value = []
+
+      await Promise.all([
+        loadProducts(),
+        loadProductsGridConfig(),
+        loadLogs(),
+        loadOrderFields(),
+        loadAddressFields(),
+        loadOrderExtraFields(),
+        loadAddressExtraFields(),
+        loadOrderCustomer(),
+      ])
+
+      hydrateRepeaterExtraFields(orderExtraFields.value)
+      hydrateRepeaterExtraFields(addressExtraFields.value)
+    } catch (error) {
+      console.error('[OrderView] Error loading order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_loading_data'),
+        life: 5000,
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Load customer data for the order (if customer_id exists)
+   */
+  async function loadOrderCustomer() {
+    const customerId = order.value?.customer_id
+    if (!customerId || customerId === 0) {
+      selectedCustomer.value = null
+      return
+    }
+
+    try {
+      const response = await request.get(`/api/mgr/customers/${customerId}`)
+      if (response && response.id) {
+        selectedCustomer.value = {
+          ...response,
+          display: `${response.first_name || ''} ${response.last_name || ''} (${response.email || response.phone || ''})`,
+        }
+      }
+    } catch (error) {
+      console.error('[OrderView] Error loading customer:', error)
+      selectedCustomer.value = null
+    }
+  }
+
+  /**
+   * Load visible fields for msOrder model (includes combo options)
+   */
+  async function loadOrderFields() {
+    try {
+      const response = await request.get('/api/mgr/model-fields/visible/msOrder')
+      orderFields.value = response.results || []
+      orderSections.value = response.sections || []
+      // Combo options are now returned with visible fields
+      orderComboOptions.value = response.comboOptions || {}
+
+      // Populate legacy refs for backward compatibility (extract options from new format)
+      if (orderComboOptions.value.status_id) {
+        statuses.value =
+          orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
+      }
+      if (orderComboOptions.value.delivery_id) {
+        deliveries.value =
+          orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
+      }
+      if (orderComboOptions.value.payment_id) {
+        payments.value =
+          orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
+      }
+    } catch (error) {
+      console.error('[OrderView] Error loading order fields:', error)
+      orderFields.value = []
+      orderSections.value = []
+      orderComboOptions.value = {}
+    }
+  }
+
+  /**
+   * Load visible fields for msOrderAddress model (includes combo options)
+   */
+  async function loadAddressFields() {
+    try {
+      const response = await request.get('/api/mgr/model-fields/visible/msOrderAddress')
+      addressFields.value = response.results || []
+      addressSections.value = response.sections || []
+      // Combo options are now returned with visible fields
+      addressComboOptions.value = response.comboOptions || {}
+    } catch (error) {
+      console.error('[OrderView] Error loading address fields:', error)
+      addressFields.value = []
+      addressSections.value = []
+      addressComboOptions.value = {}
+    }
+  }
+
+  /**
+   * Load extra fields for msOrder (from Object Extension)
+   */
+  async function loadOrderExtraFields() {
+    try {
+      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrder' })
+      orderExtraFields.value = (response.fields || []).filter(f => f.active)
+    } catch (error) {
+      console.error('[OrderView] Error loading order extra fields:', error)
+      orderExtraFields.value = []
+    }
+  }
+
+  /**
+   * Load extra fields for msOrderAddress (from Object Extension)
+   */
+  async function loadAddressExtraFields() {
+    try {
+      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrderAddress' })
+      addressExtraFields.value = (response.fields || []).filter(f => f.active)
+    } catch (error) {
+      console.error('[OrderView] Error loading address extra fields:', error)
+      addressExtraFields.value = []
+    }
+  }
+
+  /**
+   * Load order products
+   */
+  async function loadProducts() {
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}/products`)
+      products.value = response.results || response || []
+    } catch (error) {
+      console.error('[OrderView] Error loading products:', error)
+      products.value = []
+    }
+  }
+
+  /**
+   * Load products grid configuration
+   */
+  async function loadProductsGridConfig() {
+    try {
+      const response = await request.get('/api/mgr/grid-config/order_products')
+      productsColumns.value = response.columns || []
+    } catch (error) {
+      console.error('[OrderView] Error loading products grid config:', error)
+      productsColumns.value = getDefaultProductsColumns()
+    }
+  }
+
+  /**
+   * Default columns for products grid (fallback)
+   */
+  function getDefaultProductsColumns() {
+    return [
+      {
+        name: 'name',
+        label: _('order_product_name'),
+        visible: true,
+        type: 'template',
+        template: '{name}',
+      },
+      { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
+      { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
+      { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
+    ]
+  }
+
+  const { formatDate, formatPrice, getFieldWidthClass } = useOrderFormatters()
+
+  const fieldHelpers = useOrderFieldHelpers({
+    formatDate,
+    formatPrice,
+    order,
+    orderComboOptions,
+    addressComboOptions,
+    statuses,
+    deliveries,
+    payments,
+    _,
+  })
+
+  /**
+   * Handle product action (edit, delete)
+   */
+  function handleProductAction(action, data) {
+    switch (action.handler) {
+      case 'edit':
+        editProduct(data)
+        break
+      case 'delete':
+        deleteProduct(data)
+        break
+      default:
+        console.warn('[OrderView] Unknown action handler:', action.handler)
+    }
+  }
+
+  /**
+   * Open edit product dialog
+   */
+  async function editProduct(product) {
+    editingProduct.value = product
+    editProductForm.value = {
+      count: product.count || 1,
+      price: product.price || 0,
+      weight: product.weight || 0,
+    }
+
+    // Load product option fields if not already loaded
+    if (productOptionFields.value.length === 0) {
+      await loadProductOptionFields()
+    }
+
+    // Initialize options
+    await initOptionsFromProduct(product.options)
+    optionsEditMode.value = 'table'
+    optionsJsonError.value = ''
+
+    editProductDialogVisible.value = true
+  }
+
+  /**
+   * Load product option fields (color, size, etc.)
+   */
+  async function loadProductOptionFields() {
+    loadingOptionFields.value = true
+    try {
+      const response = await request.get('/api/mgr/references/product-option-fields')
+      productOptionFields.value = response.fields || []
+    } catch (error) {
+      console.error('[OrderView] Error loading product option fields:', error)
+      productOptionFields.value = []
+    } finally {
+      loadingOptionFields.value = false
+    }
+  }
+
+  /**
+   * Initialize options data from product
+   */
+  async function initOptionsFromProduct(options) {
+    let parsed = {}
+
+    if (options) {
+      if (typeof options === 'string') {
+        try {
+          parsed = JSON.parse(options)
+        } catch {
+          parsed = {}
+        }
+      } else if (typeof options === 'object') {
+        parsed = options
+      }
+    }
+
+    // Convert to table format with type detection
+    const tableData = []
+    for (const [key, value] of Object.entries(parsed)) {
+      const isProductField = productOptionFields.value.some(f => f.name === key)
+      const row = {
+        type: isProductField ? 'field' : 'custom',
+        key,
+        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+        isComplex: isComplexValue(value),
+        fieldValues: [],
+        loadingValues: false,
+      }
+
+      // If it's a product field, load its values
+      if (isProductField) {
+        await loadFieldValuesForRow(row)
+      }
+
+      tableData.push(row)
+    }
+
+    optionsTableData.value = tableData
+
+    // Store JSON text
+    optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
+  }
+
+  /**
+   * Load field values for a specific row
+   */
+  async function loadFieldValuesForRow(row) {
+    if (!row.key || row.type !== 'field') return
+
+    // Get product_id from editing product
+    const productId = editingProduct.value?.product_id
+    if (!productId) {
+      console.warn('[OrderView] No product_id found for loading field values')
+      row.fieldValues = []
+      return
+    }
+
+    row.loadingValues = true
+    try {
+      const response = await request.get('/api/mgr/references/product-field-values', {
+        field: row.key,
+        product_id: productId,
+      })
+      row.fieldValues = response.values || []
+    } catch (error) {
+      console.error('[OrderView] Error loading field values:', error)
+      row.fieldValues = []
+    } finally {
+      row.loadingValues = false
+    }
+  }
+
+  /**
+   * Handle option type change (field/custom)
+   */
+  async function onOptionTypeChange(row) {
+    if (row.type === 'field') {
+      // Reset to first available field if key is not a valid field
+      const isValidField = productOptionFields.value.some(f => f.name === row.key)
+      if (!isValidField && productOptionFields.value.length > 0) {
+        row.key = productOptionFields.value[0].name
+      }
+      row.value = ''
+      row.isComplex = false
+      await loadFieldValuesForRow(row)
+    } else {
+      // Custom type - clear field values
+      row.fieldValues = []
+      row.value = ''
+      row.isComplex = false
+    }
+    syncTableToJson()
+  }
+
+  /**
+   * Handle field selection change
+   */
+  async function onFieldKeyChange(row) {
+    row.value = ''
+    row.fieldValues = []
+    await loadFieldValuesForRow(row)
+    syncTableToJson()
+  }
+
+  /**
+   * Check if value is complex (array or object)
+   */
+  function isComplexValue(value) {
+    return Array.isArray(value) || (typeof value === 'object' && value !== null)
+  }
+
+  /**
+   * Add new option row
+   */
+  function addOptionRow() {
+    optionsTableData.value.push({
+      type: 'custom',
+      key: '',
+      value: '',
+      isComplex: false,
+      fieldValues: [],
+      loadingValues: false,
+    })
+  }
+
+  /**
+   * Remove option row
+   */
+  function removeOptionRow(index) {
+    optionsTableData.value.splice(index, 1)
+    syncTableToJson()
+  }
+
+  function buildOptionsObjectFromTable() {
+    const obj = {}
+    for (const row of optionsTableData.value) {
+      if (!row.key.trim()) {
+        continue
+      }
+      if (row.isComplex) {
+        try {
+          obj[row.key] = JSON.parse(row.value)
+        } catch {
+          obj[row.key] = row.value
+        }
+      } else {
+        obj[row.key] = row.value
+      }
+    }
+    return obj
+  }
+
+  /** Sync table data to JSON text. */
+  function syncTableToJson() {
+    const obj = buildOptionsObjectFromTable()
+    optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
+    optionsJsonError.value = ''
+  }
+
+  /**
+   * Sync JSON text to table data
+   */
+  function syncJsonToTable() {
+    optionsJsonError.value = ''
+
+    if (!optionsJsonText.value.trim()) {
+      optionsTableData.value = []
+      return true
+    }
+
+    try {
+      const parsed = JSON.parse(optionsJsonText.value)
+      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        optionsJsonError.value = _('options_json_must_be_object')
+        return false
+      }
+
+      optionsTableData.value = Object.entries(parsed).map(([key, value]) => ({
+        key,
+        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+        isComplex: isComplexValue(value),
+      }))
+      return true
+    } catch (e) {
+      optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+      return false
+    }
+  }
+
+  /**
+   * Switch options edit mode
+   */
+  function switchOptionsMode(mode) {
+    if (mode === optionsEditMode.value) return
+
+    if (mode === 'json') {
+      // Switching to JSON mode - sync table to JSON
+      syncTableToJson()
+    } else {
+      // Switching to table mode - sync JSON to table
+      if (!syncJsonToTable()) {
+        // JSON is invalid, stay in JSON mode
+        return
+      }
+    }
+
+    optionsEditMode.value = mode
+  }
+
+  /**
+   * Get options object for saving
+   */
+  function getOptionsForSave() {
+    if (optionsEditMode.value === 'json') {
+      if (!optionsJsonText.value.trim()) return null
+      try {
+        return JSON.parse(optionsJsonText.value)
+      } catch {
+        return null
+      }
+    }
+    const obj = buildOptionsObjectFromTable()
+    return Object.keys(obj).length > 0 ? obj : null
+  }
+
+  /**
+   * Save edited product
+   */
+  async function saveEditedProduct() {
+    if (!editingProduct.value) return
+
+    // Validate JSON mode if active
+    if (optionsEditMode.value === 'json' && optionsJsonText.value.trim()) {
+      try {
+        JSON.parse(optionsJsonText.value)
+      } catch (e) {
+        optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+        return
+      }
+    }
+
+    savingProduct.value = true
+
+    try {
+      const data = {
+        ...editProductForm.value,
+        options: getOptionsForSave(),
+      }
+
+      await request.put(`/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`, data)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_product_saved'),
+        life: 3000,
+      })
+
+      editProductDialogVisible.value = false
+
+      // Reload products and order to update totals
+      await Promise.all([loadProducts(), loadOrder()])
+    } catch (error) {
+      console.error('[OrderView] Error saving product:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      savingProduct.value = false
+    }
+  }
+
+  /**
+   * Cancel product editing
+   */
+  function cancelEditProduct() {
+    editProductDialogVisible.value = false
+    editingProduct.value = null
+  }
+
+  function productLineCost(form) {
+    return (form.count || 0) * (form.price || 0)
+  }
+
+  const editedProductCost = computed(() => productLineCost(editProductForm.value))
+
+  const newProductCost = computed(() => productLineCost(addProductForm.value))
+
+  /**
+   * Open add product dialog
+   */
+  function openAddProductDialog() {
+    selectedProduct.value = null
+    productSuggestions.value = []
+    addProductForm.value = {
+      count: 1,
+      price: 0,
+      weight: 0,
+      options: {},
+    }
+    addProductDialogVisible.value = true
+  }
+
+  /**
+   * Search products for autocomplete
+   */
+  async function searchProducts(event) {
+    const query = event.query
+    if (!query || query.length < 2) {
+      productSuggestions.value = []
+      return
+    }
+
+    searchingProducts.value = true
+    try {
+      const response = await request.get('/api/mgr/references/products', { query })
+      productSuggestions.value = response.results || []
+    } catch (error) {
+      console.error('[OrderView] Error searching products:', error)
+      productSuggestions.value = []
+    } finally {
+      searchingProducts.value = false
+    }
+  }
+
+  /**
+   * Handle product selection from autocomplete
+   */
+  function onProductSelect(event) {
+    const product = event.value
+    if (product) {
+      addProductForm.value.price = product.price || 0
+      addProductForm.value.weight = product.weight || 0
+    }
+  }
+
+  /**
+   * Save new product to order
+   */
+  async function saveNewProduct() {
+    if (!selectedProduct.value || !selectedProduct.value.id) {
+      toast.add({
+        severity: 'warn',
+        summary: _('warning'),
+        detail: _('order_product_select'),
+        life: 3000,
+      })
+      return
+    }
+
+    savingNewProduct.value = true
+    try {
+      const data = {
+        product_id: selectedProduct.value.id,
+        count: addProductForm.value.count || 1,
+        price: addProductForm.value.price || 0,
+        weight: addProductForm.value.weight || 0,
+        options: addProductForm.value.options || {},
+      }
+
+      await request.post(`/api/mgr/orders/${orderId.value}/products`, data)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_product_added'),
+        life: 3000,
+      })
+
+      addProductDialogVisible.value = false
+
+      // Reload products and order to update totals
+      await Promise.all([loadProducts(), loadOrder()])
+    } catch (error) {
+      console.error('[OrderView] Error adding product:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error'),
+        life: 5000,
+      })
+    } finally {
+      savingNewProduct.value = false
+    }
+  }
+
+  /**
+   * Cancel add product
+   */
+  function cancelAddProduct() {
+    addProductDialogVisible.value = false
+    selectedProduct.value = null
+  }
+
+  /**
+   * Delete product from order with confirmation
+   */
+  function deleteProduct(product) {
+    // Check if this is the last product
+    if (products.value.length <= 1) {
+      toast.add({
+        severity: 'warn',
+        summary: _('warning'),
+        detail: _('order_product_cannot_delete_last'),
+        life: 5000,
+      })
+      return
+    }
+
+    confirm.require({
+      message: _('order_product_delete_confirm'),
+      header: _('confirm_delete'),
+      icon: 'pi pi-exclamation-triangle',
+      acceptLabel: _('yes'),
+      rejectLabel: _('no'),
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        try {
+          await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
+
+          toast.add({
+            severity: 'success',
+            summary: _('success'),
+            detail: _('order_product_deleted'),
+            life: 3000,
+          })
+
+          // Reload products and order to update totals
+          await Promise.all([loadProducts(), loadOrder()])
+        } catch (error) {
+          console.error('[OrderView] Error deleting product:', error)
+          toast.add({
+            severity: 'error',
+            summary: _('error'),
+            detail: error.message || _('error_deleting_data'),
+            life: 5000,
+          })
+        }
+      },
+    })
+  }
+
+  /**
+   * Load order logs
+   */
+  async function loadLogs() {
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}/logs`)
+      logs.value = response.results || response || []
+    } catch (error) {
+      console.error('[OrderView] Error loading logs:', error)
+      logs.value = []
+    }
+  }
+
+  /**
+   * Берём поля заказа из ответа пересчёта без служебных ключей breakdown/warnings.
+   * @param {Record<string, unknown>|null|undefined} raw
+   * @returns {{ orderPayload: Record<string, unknown>, warnings: string[] }}
+   */
+  function stripRecalculateCostMeta(raw) {
+    if (!raw || typeof raw !== 'object') {
+      return { orderPayload: {}, warnings: [] }
+    }
+    const merged = /** @type {Record<string, unknown>} */ ({ ...raw })
+    delete merged.breakdown
+    const w = merged.warnings
+    delete merged.warnings
+    return {
+      orderPayload: merged,
+      warnings: Array.isArray(w) ? w.map(String) : [],
+    }
+  }
+
+  /**
+   * Пересчитать стоимость заказа (Manager API, #212).
+   * @param {{ mode?: string, manual_delivery_cost?: number }} opts
+   */
+  async function recalculateOrderCost(opts = {}) {
+    if (isCreateMode.value || !orderId.value || orderId.value === 'new') {
+      return
+    }
+
+    recalculatingCost.value = true
+    costRecalcWarnings.value = []
+
+    try {
+      const body = {
+        mode: opts.mode ?? 'auto',
+      }
+      if (opts.manual_delivery_cost !== undefined && opts.manual_delivery_cost !== null) {
+        body.manual_delivery_cost = opts.manual_delivery_cost
+      }
+
+      const raw = await request.post(`/api/mgr/orders/${orderId.value}/recalculate-cost`, body)
+      const { orderPayload, warnings } = stripRecalculateCostMeta(raw)
+      order.value = { ...(order.value || {}), ...orderPayload }
+      costRecalcWarnings.value = warnings
+      syncShippingPaymentBaselineFromOrder()
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_cost_recalculated'),
+        life: 3000,
+      })
+    } catch (error) {
+      console.error('[OrderView] Error recalculateCost:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      recalculatingCost.value = false
+    }
+  }
+
+  /**
+   * Save order
+   */
+  async function saveOrder() {
+    saving.value = true
+
+    try {
+      // Collect all editable order fields
+      const orderData = {}
+      for (const field of orderFields.value) {
+        if (fieldHelpers.isFieldEditable(field.name) && order.value[field.name] !== undefined) {
+          orderData[field.name] = order.value[field.name]
+        }
+      }
+
+      // Collect all editable address fields
+      for (const field of addressFields.value) {
+        if (order.value[field.name] !== undefined) {
+          orderData[field.name] = order.value[field.name]
+        }
+      }
+
+      // Collect extra fields for msOrder (from Object Extension)
+      for (const field of orderExtraFields.value) {
+        if (order.value[field.key] !== undefined) {
+          orderData[field.key] = order.value[field.key]
+        }
+      }
+
+      // Collect extra fields for msOrderAddress (from Object Extension)
+      for (const field of addressExtraFields.value) {
+        if (order.value[field.key] !== undefined) {
+          orderData[field.key] = order.value[field.key]
+        }
+      }
+
+      await request.put(`/api/mgr/orders/${orderId.value}`, orderData)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_saved'),
+        life: 3000,
+      })
+
+      syncShippingPaymentBaselineFromOrder()
+
+      await loadLogs()
+    } catch (error) {
+      console.error('[OrderView] Error saving order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+    }
+  }
+
+  /**
+   * Finalize order (convert draft to final order)
+   * Shows confirmation dialog first
+   */
+  function confirmFinalizeOrder() {
+    confirm.require({
+      message: _('ms3_order_finalize_confirm_desc'),
+      header: _('ms3_order_finalize_confirm'),
+      icon: 'pi pi-check-circle',
+      acceptLabel: _('ms3_order_finalize_btn'),
+      rejectLabel: _('cancel'),
+      accept: () => {
+        finalizeOrder()
+      },
+    })
+  }
+
+  /**
+   * Finalize order API call
+   */
+  async function finalizeOrder(forceCreateCustomer = false) {
+    finalizing.value = true
+
+    try {
+      // Build request data
+      const requestData = {}
+
+      // If create customer checkbox is checked and no customer linked
+      if (createCustomerFromData.value && !order.value.customer_id) {
+        requestData.create_customer = true
+        if (forceCreateCustomer) {
+          requestData.force_create_customer = true
+        }
+      }
+
+      const response = await request.post(`/api/mgr/orders/${orderId.value}/finalize`, requestData)
+
+      // Check if duplicate customer was found
+      if (response.duplicate_found) {
+        // Store for later and show dialog
+        pendingOrderData.value = { finalize: true }
+        duplicateCustomer.value = response.customer
+        showDuplicateDialog.value = true
+        finalizing.value = false
+        return
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_finalized'),
+        life: 3000,
+      })
+
+      // Reload order to get updated status and order number
+      await loadOrder()
+      await loadLogs()
+    } catch (error) {
+      console.error('[OrderView] Error finalizing order:', error)
+
+      // Show each validation error as separate toast
+      // Response structure: error.data.object.errors contains array of field names
+      const validationErrors = error.data?.object?.errors
+      if (validationErrors && Array.isArray(validationErrors) && validationErrors.length > 0) {
+        validationErrors.forEach(field => {
+          const fieldError = _(`ms3_order_err_${field}`) || field
+          toast.add({
+            severity: 'error',
+            summary: _('ms3_order_err_validation'),
+            detail: fieldError,
+            life: 5000,
+          })
+        })
+      } else {
+        // Fallback to general error message
+        toast.add({
+          severity: 'error',
+          summary: _('error'),
+          detail: error.message || _('ms3_order_finalize_error'),
+          life: 5000,
+        })
+      }
+    } finally {
+      finalizing.value = false
+    }
+  }
+
+  /**
+   * Initialize empty order for create mode
+   */
+  async function initEmptyOrder() {
+    loading.value = true
+
+    try {
+      // Initialize empty order object
+      order.value = {
+        id: null,
+        num: '',
+        status_id: 1, // Draft status
+        delivery_id: null,
+        payment_id: null,
+        customer_id: 0,
+        order_comment: '',
+        cart_cost: 0,
+        delivery_cost: 0,
+        cost: 0,
+        weight: 0,
+        // Address fields
+        first_name: '',
+        last_name: '',
+        phone: '',
+        email: '',
+        country: '',
+        index: '',
+        region: '',
+        city: '',
+        metro: '',
+        street: '',
+        building: '',
+        entrance: '',
+        floor: '',
+        room: '',
+        comment: '',
+        text_address: '',
+      }
+
+      // Load field configurations and combo options
+      await Promise.all([
+        loadOrderFields(),
+        loadAddressFields(),
+        loadOrderExtraFields(),
+        loadAddressExtraFields(),
+      ])
+
+      // Initialize empty products and logs
+      products.value = []
+      logs.value = []
+    } catch (error) {
+      console.error('[OrderView] Error initializing empty order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: _('error_loading_config'),
+        life: 5000,
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Collect order data from form
+   */
+  function collectOrderData() {
+    const orderData = {}
+
+    // Order fields
+    for (const field of orderFields.value) {
+      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+        orderData[field.name] = order.value[field.name]
+      }
+    }
+
+    // Address fields
+    for (const field of addressFields.value) {
+      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+        orderData[field.name] = order.value[field.name]
+      }
+    }
+
+    // Extra fields
+    for (const field of orderExtraFields.value) {
+      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+        orderData[field.key] = order.value[field.key]
+      }
+    }
+
+    for (const field of addressExtraFields.value) {
+      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+        orderData[field.key] = order.value[field.key]
+      }
+    }
+
+    // If customer was selected, add customer_id
+    if (selectedCustomer.value?.id) {
+      orderData.customer_id = selectedCustomer.value.id
+    }
+
+    // If create customer checkbox is checked and no customer selected
+    if (createCustomerFromData.value && !selectedCustomer.value?.id) {
+      orderData.create_customer = true
+    }
+
+    return orderData
+  }
+
+  /**
+   * Validate customer data before creation
+   * @returns {string|null} Error message or null if valid
+   */
+  function validateCustomerData(orderData) {
+    // If creating customer, need at least email or phone
+    if (orderData.create_customer) {
+      const email = (orderData.email || '').trim()
+      const phone = (orderData.phone || '').trim()
+
+      if (!email && !phone) {
+        return _('ms3_customer_validation_email_or_phone')
+      }
+
+      // Basic email validation
+      if (email && !email.includes('@')) {
+        return _('ms3_customer_validation_invalid_email')
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Create new order
+   */
+  async function createOrder(forceCreateCustomer = false) {
+    saving.value = true
+
+    try {
+      const orderData = collectOrderData()
+
+      // Add force flag if retrying after duplicate found
+      if (forceCreateCustomer) {
+        orderData.force_create_customer = true
+      }
+
+      // Validate customer data if creating customer
+      const validationError = validateCustomerData(orderData)
+      if (validationError) {
+        toast.add({
+          severity: 'warn',
+          summary: _('warning'),
+          detail: validationError,
+          life: 5000,
+        })
+        saving.value = false
+        return
+      }
+
+      // Create order via API
+      const response = await request.post('/api/mgr/orders', orderData)
+
+      // Check if duplicate customer was found
+      if (response.duplicate_found) {
+        // Store data for later and show dialog
+        pendingOrderData.value = orderData
+        duplicateCustomer.value = response.customer
+        showDuplicateDialog.value = true
+        saving.value = false
+        return
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_created'),
+        life: 3000,
+      })
+
+      // Redirect to edit the created order
+      const createdOrderId = response.id || response.object?.id
+      if (createdOrderId) {
+        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+      }
+    } catch (error) {
+      console.error('[OrderView] Error creating order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: use existing customer
+   */
+  async function useDuplicateCustomer() {
+    showDuplicateDialog.value = false
+
+    if (!duplicateCustomer.value || !pendingOrderData.value) {
+      return
+    }
+
+    // Check if this is from finalize or create
+    if (pendingOrderData.value.finalize) {
+      // For finalize: update order's customer_id and retry finalize
+      try {
+        // Update order with existing customer
+        await request.put(`/api/mgr/orders/${orderId.value}`, {
+          customer_id: duplicateCustomer.value.id,
+        })
+
+        // Disable create customer flag and finalize
+        createCustomerFromData.value = false
+        await finalizeOrder()
+      } catch (error) {
+        console.error('[OrderView] Error updating order customer:', error)
+        toast.add({
+          severity: 'error',
+          summary: _('error'),
+          detail: error.message || _('error_saving_data'),
+          life: 5000,
+        })
+      } finally {
+        pendingOrderData.value = null
+        duplicateCustomer.value = null
+      }
+      return
+    }
+
+    // For create: set existing customer and create order without create_customer flag
+    selectedCustomer.value = duplicateCustomer.value
+    pendingOrderData.value.customer_id = duplicateCustomer.value.id
+    delete pendingOrderData.value.create_customer
+    delete pendingOrderData.value.force_create_customer
+
+    saving.value = true
+    try {
+      const response = await request.post('/api/mgr/orders', pendingOrderData.value)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_created'),
+        life: 3000,
+      })
+
+      const createdOrderId = response.id || response.object?.id
+      if (createdOrderId) {
+        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+      }
+    } catch (error) {
+      console.error('[OrderView] Error creating order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+      pendingOrderData.value = null
+      duplicateCustomer.value = null
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: create new customer anyway
+   */
+  async function createNewCustomerAnyway() {
+    showDuplicateDialog.value = false
+    duplicateCustomer.value = null
+
+    // Check if this is from finalize or create
+    if (pendingOrderData.value?.finalize) {
+      // Retry finalize with force flag
+      pendingOrderData.value = null
+      await finalizeOrder(true)
+    } else {
+      // Retry create with force flag
+      await createOrder(true)
+      pendingOrderData.value = null
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: cancel
+   */
+  function cancelDuplicateDialog() {
+    showDuplicateDialog.value = false
+    duplicateCustomer.value = null
+    pendingOrderData.value = null
+  }
+
+  /**
+   * Search customers for autocomplete
+   */
+  async function searchCustomers(event) {
+    const query = event.query
+    if (!query || query.length < 2) {
+      customerSuggestions.value = []
+      return
+    }
+
+    searchingCustomers.value = true
+    try {
+      const response = await request.get('/api/mgr/references/customers', { query })
+      customerSuggestions.value = response.results || []
+    } catch (error) {
+      console.error('[OrderView] Error searching customers:', error)
+      customerSuggestions.value = []
+    } finally {
+      searchingCustomers.value = false
+    }
+  }
+
+  /**
+   * Handle customer selection from autocomplete
+   */
+  function onCustomerSelect(event) {
+    const customer = event.value
+    if (customer) {
+      // Set customer_id in order
+      order.value.customer_id = customer.id
+
+      // Fill address fields from customer data
+      order.value.first_name = customer.first_name || order.value.first_name
+      order.value.last_name = customer.last_name || order.value.last_name
+      order.value.email = customer.email || order.value.email
+      order.value.phone = customer.phone || order.value.phone
+    }
+  }
+
+  /**
+   * Clear selected customer
+   */
+  function clearCustomer() {
+    selectedCustomer.value = null
+    // Clear customer_id in order
+    if (order.value) {
+      order.value.customer_id = 0
+    }
+  }
+
+  /**
+   * Go back to orders list
+   */
+  function goBack() {
+    window.location.href = '?a=mgr/orders&namespace=minishop3'
+  }
+
+  /**
+   * Registers a plugin tab (called by window.MS3OrderTabsRegistry or tests).
+   * Validation lives in normalizeOrderPluginTab().
+   */
+  function registerPluginTab(tabData) {
+    const normalized = normalizeOrderPluginTab(tabData)
+    if (!normalized.ok) {
+      console.error(`[OrderView] ${normalized.reason}`, tabData)
+      return false
+    }
+    const exists = pluginTabs.value.some(t => t.key === normalized.tab.key)
+    if (exists) {
+      console.warn(`[OrderView] Tab with key "${normalized.tab.key}" already registered`)
+      return false
+    }
+    pluginTabs.value.push(normalized.tab)
+    return true
+  }
+
+  /**
+   * Props passed to Vue plugin tab components (same contract as ExtJS tabs below).
+   * User `tab.props` is spread first; core fields override name collisions intentionally.
+   */
+  function pluginVueProps(tab) {
+    return {
+      ...(tab.props || {}),
+      orderId: orderId.value,
+      order: order.value,
+      config: managerConfig.value,
+      isCreateMode: isCreateMode.value,
+    }
+  }
+
+  /** Waits for TabPanel DOM element via MutationObserver (consistent with other entry points). */
+  function waitForOrderTabElement(id, callback) {
+    const element = document.getElementById(id)
+    if (element) {
+      callback(element)
+      return
+    }
+    const observer = new MutationObserver(() => {
+      const el = document.getElementById(id)
+      if (el) {
+        observer.disconnect()
+        callback(el)
+      }
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+  }
+
+  /**
+   * Lazy-mounts an ExtJS panel into the plugin tab container.
+   * Merge order: xtype/renderTo/width, then extConfig, then core fields (order, orderId, config, isCreateMode).
+   *
+   * The Ext instance is created once per tab key when the user first selects the tab. Later changes to
+   * Vue’s `order` (after API load, save, etc.) are not pushed into Ext — plugin panels must implement
+   * their own listeners, polling, or `load` hooks if they need live data.
+   */
+  function mountExtJSOrderPlugin(tab) {
+    if (mountedExtPluginComponents.value[tab.key]) {
+      return
+    }
+    const containerId = `ms3-order-tab-${tab.key}`
+    waitForOrderTabElement(containerId, container => {
+      try {
+        if (typeof Ext === 'undefined') {
+          console.error('[OrderView] Ext is not defined')
+          return
+        }
+        const extComponent = Ext.create({
+          xtype: tab.xtype,
+          renderTo: container,
+          width: '100%',
+          ...tab.extConfig,
+          order: order.value,
+          orderId: orderId.value,
+          config: managerConfig.value,
+          isCreateMode: isCreateMode.value,
+        })
+        mountedExtPluginComponents.value[tab.key] = extComponent
+      } catch (error) {
+        console.error(`[OrderView] Failed to mount ExtJS order tab ${tab.key}:`, error)
+      }
+    })
+  }
+
+  function destroyPluginExtComponents() {
+    Object.keys(mountedExtPluginComponents.value).forEach(key => {
+      const component = mountedExtPluginComponents.value[key]
+      if (component && typeof component.destroy === 'function') {
+        try {
+          component.destroy()
+        } catch (e) {
+          console.warn(`[OrderView] Error destroying plugin ExtJS component ${key}:`, e)
+        }
+      }
+    })
+    mountedExtPluginComponents.value = {}
+  }
+
+  watch(
+    () => orderTabsConfig.value.map(t => t.key),
+    keys => {
+      if (keys.length === 0) return
+      if (!keys.includes(orderActiveTab.value)) {
+        orderActiveTab.value = keys[0]
+      }
+    },
+    { immediate: true }
+  )
+
+  watch(orderActiveTab, () => {
+    nextTick(() => {
+      const tab = orderTabsConfig.value.find(t => t.key === orderActiveTab.value)
+      if (
+        tab &&
+        tab.kind === 'plugin' &&
+        tab.type === 'extjs' &&
+        tab.xtype &&
+        !mountedExtPluginComponents.value[tab.key]
+      ) {
+        mountExtJSOrderPlugin(tab)
+      }
+    })
+  })
+
+  onBeforeUnmount(() => {
+    destroyPluginExtComponents()
+    if (window.MS3OrderTabsRegistry) {
+      window.MS3OrderTabsRegistry._onUnmounted()
+    }
+  })
+
+  onMounted(async () => {
+    if (isCreateMode.value) {
+      await initEmptyOrder()
+    } else {
+      await loadOrder()
+    }
+  })
+
+  const orderContext = {
+    order,
+    saving,
+    isDraft,
+    isCreateMode,
+    finalizing,
+    customerSuggestions,
+    searchingCustomers,
+    ...fieldHelpers,
+    formatDate,
+    formatPrice,
+    getFieldWidthClass,
+    saveOrder,
+    createOrder,
+    goBack,
+    confirmFinalizeOrder,
+    handleProductAction,
+    openAddProductDialog,
+    searchCustomers,
+    onCustomerSelect,
+    clearCustomer,
+    recalculateOrderCost,
+    recalculatingCost,
+    costRecalcWarnings,
+    manualDeliveryCost,
+    hasUnsavedShippingPaymentChanges,
+  }
+  return {
+    orderContext,
+    registerPluginTab,
+    pluginVueProps,
+
+    loading,
+    saving,
+    order,
+    products,
+    productsColumns,
+    logs,
+    orderFieldsBySection,
+    orderExtraFields,
+    orderActiveTab,
+    orderTabsConfig,
+    isCreateMode,
+    selectedCustomer,
+    createCustomerFromData,
+    addressFieldsBySection,
+    addressExtraFields,
+    goBack,
+    formatPrice,
+
+    editProductDialogVisible,
+    editingProduct,
+    editProductForm,
+    savingProduct,
+    optionsEditMode,
+    optionsTableData,
+    productOptionFields,
+    optionsJsonText,
+    optionsJsonError,
+    editedProductCost,
+    switchOptionsMode,
+    onOptionTypeChange,
+    onFieldKeyChange,
+    syncTableToJson,
+    addOptionRow,
+    removeOptionRow,
+    saveEditedProduct,
+    cancelEditProduct,
+
+    addProductDialogVisible,
+    selectedProduct,
+    productSuggestions,
+    searchingProducts,
+    addProductForm,
+    savingNewProduct,
+    newProductCost,
+    searchProducts,
+    onProductSelect,
+    saveNewProduct,
+    cancelAddProduct,
+
+    showDuplicateDialog,
+    duplicateCustomer,
+    cancelDuplicateDialog,
+    useDuplicateCustomer,
+    createNewCustomerAnyway,
+  }
+}

From 10db4900a631e60bfd1ca951813afec86aa69acf Mon Sep 17 00:00:00 2001
From: Ivan Bochkarev <ivanx86@gmail.com>
Date: Wed, 29 Jul 2026 23:29:26 +0600
Subject: [PATCH 2/2] refactor(vue): split useOrderView into domain composables
 (#339)

Break the 1753-line useOrderView.js into focused composables so no file
exceeds ~400 lines. The thin orchestrator wires shared refs (order, saving,
editingProduct) and core computeds, delegating to:

- useOrderLoad: order/refs/fields/extra-fields loading + empty-order init
- useOrderSave: save / finalize / create order actions
- useOrderProducts: edit / add / delete product dialog state
- useOrderProductOptions: options table/json editing
- useOrderCostRecalc: cost recalculation + shipping/payment baseline
- useOrderCustomer: customer search + duplicate-customer dialog
- useOrderPluginTabs: built-in + MS3OrderTabsRegistry plugin tab registry

Public orderContext contract and the return shape consumed by OrderView.vue
are preserved unchanged. No behavior/API changes.
---
 .../src/composables/useOrderCostRecalc.js     |  116 ++
 .../src/composables/useOrderCustomer.js       |  185 ++
 vueManager/src/composables/useOrderLoad.js    |  389 ++++
 .../src/composables/useOrderPluginTabs.js     |  163 ++
 .../src/composables/useOrderProductOptions.js |  273 +++
 .../src/composables/useOrderProducts.js       |  322 +++
 vueManager/src/composables/useOrderSave.js    |  321 +++
 vueManager/src/composables/useOrderView.js    | 1816 ++---------------
 8 files changed, 1942 insertions(+), 1643 deletions(-)
 create mode 100644 vueManager/src/composables/useOrderCostRecalc.js
 create mode 100644 vueManager/src/composables/useOrderCustomer.js
 create mode 100644 vueManager/src/composables/useOrderLoad.js
 create mode 100644 vueManager/src/composables/useOrderPluginTabs.js
 create mode 100644 vueManager/src/composables/useOrderProductOptions.js
 create mode 100644 vueManager/src/composables/useOrderProducts.js
 create mode 100644 vueManager/src/composables/useOrderSave.js

diff --git a/vueManager/src/composables/useOrderCostRecalc.js b/vueManager/src/composables/useOrderCostRecalc.js
new file mode 100644
index 00000000..eb6a36fc
--- /dev/null
+++ b/vueManager/src/composables/useOrderCostRecalc.js
@@ -0,0 +1,116 @@
+/**
+ * Order cost recalculation state and API (#212).
+ *
+ * @param {Object} deps
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').ComputedRef} deps.isCreateMode
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ */
+import { computed, ref, shallowRef } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderCostRecalc(deps) {
+  const { order, orderId, isCreateMode, _, toast } = deps
+  const savedBaselineDeliveryId = ref(0)
+  const savedBaselinePaymentId = ref(0)
+  const recalculatingCost = ref(false)
+  /** @type {import('vue').ShallowRef<string[]>} Warning codes from last recalculate API */
+  const costRecalcWarnings = shallowRef([])
+  const manualDeliveryCost = ref(null)
+
+  function syncShippingPaymentBaselineFromOrder() {
+    if (!order.value || isCreateMode.value) {
+      return
+    }
+    savedBaselineDeliveryId.value = Number.parseInt(order.value.delivery_id, 10) || 0
+    savedBaselinePaymentId.value = Number.parseInt(order.value.payment_id, 10) || 0
+  }
+
+  const hasUnsavedShippingPaymentChanges = computed(() => {
+    if (isCreateMode.value || !order.value) {
+      return false
+    }
+    const d = Number.parseInt(order.value.delivery_id, 10) || 0
+    const p = Number.parseInt(order.value.payment_id, 10) || 0
+
+    return d !== savedBaselineDeliveryId.value || p !== savedBaselinePaymentId.value
+  })
+
+  /**
+   * Берём поля заказа из ответа пересчёта без служебных ключей breakdown/warnings.
+   * @param {Record<string, unknown>|null|undefined} raw
+   * @returns {{ orderPayload: Record<string, unknown>, warnings: string[] }}
+   */
+  function stripRecalculateCostMeta(raw) {
+    if (!raw || typeof raw !== 'object') {
+      return { orderPayload: {}, warnings: [] }
+    }
+    const merged = /** @type {Record<string, unknown>} */ ({ ...raw })
+    delete merged.breakdown
+    const w = merged.warnings
+    delete merged.warnings
+    return {
+      orderPayload: merged,
+      warnings: Array.isArray(w) ? w.map(String) : [],
+    }
+  }
+
+  /**
+   * Пересчитать стоимость заказа (Manager API, #212).
+   * @param {{ mode?: string, manual_delivery_cost?: number }} opts
+   */
+  async function recalculateOrderCost(opts = {}) {
+    if (isCreateMode.value || !orderId.value || orderId.value === 'new') {
+      return
+    }
+
+    recalculatingCost.value = true
+    costRecalcWarnings.value = []
+
+    try {
+      const body = {
+        mode: opts.mode ?? 'auto',
+      }
+      if (opts.manual_delivery_cost !== undefined && opts.manual_delivery_cost !== null) {
+        body.manual_delivery_cost = opts.manual_delivery_cost
+      }
+
+      const raw = await request.post(`/api/mgr/orders/${orderId.value}/recalculate-cost`, body)
+      const { orderPayload, warnings } = stripRecalculateCostMeta(raw)
+      order.value = { ...(order.value || {}), ...orderPayload }
+      costRecalcWarnings.value = warnings
+      syncShippingPaymentBaselineFromOrder()
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_cost_recalculated'),
+        life: 3000,
+      })
+    } catch (error) {
+      console.error('[OrderView] Error recalculateCost:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      recalculatingCost.value = false
+    }
+  }
+
+  return {
+    savedBaselineDeliveryId,
+    savedBaselinePaymentId,
+    recalculatingCost,
+    costRecalcWarnings,
+    manualDeliveryCost,
+    hasUnsavedShippingPaymentChanges,
+    syncShippingPaymentBaselineFromOrder,
+    recalculateOrderCost,
+  }
+}
diff --git a/vueManager/src/composables/useOrderCustomer.js b/vueManager/src/composables/useOrderCustomer.js
new file mode 100644
index 00000000..7b346006
--- /dev/null
+++ b/vueManager/src/composables/useOrderCustomer.js
@@ -0,0 +1,185 @@
+/**
+ * Customer search / selection and duplicate-customer dialog handling.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.saving
+ * @param {Object} deps.orderActions
+ * @param {Function} deps.orderActions.finalizeOrder
+ * @param {Function} deps.orderActions.createOrder
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderCustomer(deps) {
+  const { _, toast, order, orderId, saving, orderActions } = deps
+
+  const selectedCustomer = ref(null)
+  const customerSuggestions = ref([])
+  const searchingCustomers = ref(false)
+  const createCustomerFromData = ref(false)
+
+  const showDuplicateDialog = ref(false)
+  const duplicateCustomer = ref(null)
+  const pendingOrderData = ref(null)
+
+  /**
+   * Search customers for autocomplete
+   */
+  async function searchCustomers(event) {
+    const query = event.query
+    if (!query || query.length < 2) {
+      customerSuggestions.value = []
+      return
+    }
+
+    searchingCustomers.value = true
+    try {
+      const response = await request.get('/api/mgr/references/customers', { query })
+      customerSuggestions.value = response.results || []
+    } catch (error) {
+      console.error('[OrderView] Error searching customers:', error)
+      customerSuggestions.value = []
+    } finally {
+      searchingCustomers.value = false
+    }
+  }
+
+  /**
+   * Handle customer selection from autocomplete
+   */
+  function onCustomerSelect(event) {
+    const customer = event.value
+    if (customer) {
+      order.value.customer_id = customer.id
+
+      order.value.first_name = customer.first_name || order.value.first_name
+      order.value.last_name = customer.last_name || order.value.last_name
+      order.value.email = customer.email || order.value.email
+      order.value.phone = customer.phone || order.value.phone
+    }
+  }
+
+  /**
+   * Clear selected customer
+   */
+  function clearCustomer() {
+    selectedCustomer.value = null
+    if (order.value) {
+      order.value.customer_id = 0
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: use existing customer
+   */
+  async function useDuplicateCustomer() {
+    showDuplicateDialog.value = false
+
+    if (!duplicateCustomer.value || !pendingOrderData.value) {
+      return
+    }
+
+    if (pendingOrderData.value.finalize) {
+      try {
+        await request.put(`/api/mgr/orders/${orderId.value}`, {
+          customer_id: duplicateCustomer.value.id,
+        })
+
+        createCustomerFromData.value = false
+        await orderActions.finalizeOrder()
+      } catch (error) {
+        console.error('[OrderView] Error updating order customer:', error)
+        toast.add({
+          severity: 'error',
+          summary: _('error'),
+          detail: error.message || _('error_saving_data'),
+          life: 5000,
+        })
+      } finally {
+        pendingOrderData.value = null
+        duplicateCustomer.value = null
+      }
+      return
+    }
+
+    selectedCustomer.value = duplicateCustomer.value
+    pendingOrderData.value.customer_id = duplicateCustomer.value.id
+    delete pendingOrderData.value.create_customer
+    delete pendingOrderData.value.force_create_customer
+
+    saving.value = true
+    try {
+      const response = await request.post('/api/mgr/orders', pendingOrderData.value)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_created'),
+        life: 3000,
+      })
+
+      const createdOrderId = response.id || response.object?.id
+      if (createdOrderId) {
+        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+      }
+    } catch (error) {
+      console.error('[OrderView] Error creating order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+      pendingOrderData.value = null
+      duplicateCustomer.value = null
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: create new customer anyway
+   */
+  async function createNewCustomerAnyway() {
+    showDuplicateDialog.value = false
+    duplicateCustomer.value = null
+
+    if (pendingOrderData.value?.finalize) {
+      pendingOrderData.value = null
+      await orderActions.finalizeOrder(true)
+    } else {
+      await orderActions.createOrder(true)
+      pendingOrderData.value = null
+    }
+  }
+
+  /**
+   * Handle duplicate dialog: cancel
+   */
+  function cancelDuplicateDialog() {
+    showDuplicateDialog.value = false
+    duplicateCustomer.value = null
+    pendingOrderData.value = null
+  }
+
+  return {
+    selectedCustomer,
+    customerSuggestions,
+    searchingCustomers,
+    createCustomerFromData,
+    showDuplicateDialog,
+    duplicateCustomer,
+    pendingOrderData,
+    searchCustomers,
+    onCustomerSelect,
+    clearCustomer,
+    useDuplicateCustomer,
+    createNewCustomerAnyway,
+    cancelDuplicateDialog,
+  }
+}
diff --git a/vueManager/src/composables/useOrderLoad.js b/vueManager/src/composables/useOrderLoad.js
new file mode 100644
index 00000000..f9124bf5
--- /dev/null
+++ b/vueManager/src/composables/useOrderLoad.js
@@ -0,0 +1,389 @@
+/**
+ * Order loading, references, and initial/empty state for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.selectedCustomer
+ * @param {import('vue').ShallowRef} deps.costRecalcWarnings
+ * @param {Function} deps.syncShippingPaymentBaselineFromOrder
+ */
+import { computed, ref } from 'vue'
+
+import request from '../request.js'
+import { parseRepeaterModelValue, REPEATER_XTYPE } from '../utils/repeaterField.js'
+
+export function useOrderLoad(deps) {
+  const {
+    _,
+    toast,
+    order,
+    orderId,
+    selectedCustomer,
+    costRecalcWarnings,
+    syncShippingPaymentBaselineFromOrder,
+  } = deps
+
+  const loading = ref(true)
+  const products = ref([])
+  const productsColumns = ref([])
+  const logs = ref([])
+  const statuses = ref([])
+  const deliveries = ref([])
+  const payments = ref([])
+
+  const orderFields = ref([])
+  const addressFields = ref([])
+  const orderSections = ref([])
+  const addressSections = ref([])
+
+  const orderComboOptions = ref({})
+  const addressComboOptions = ref({})
+
+  const orderExtraFields = ref([])
+  const addressExtraFields = ref([])
+
+  /**
+   * Helper to group fields by section
+   */
+  function groupFieldsBySection(fields, sections) {
+    const sectionMap = new Map()
+
+    for (const section of sections) {
+      sectionMap.set(section.id, {
+        ...section,
+        fields: [],
+      })
+    }
+
+    sectionMap.set(null, {
+      id: null,
+      label: _('ms3_model_field_no_section'),
+      section_key: 'no_section',
+      sort_order: 9999,
+      fields: [],
+    })
+
+    for (const field of fields) {
+      const sectionId = field.section_id || null
+      if (sectionMap.has(sectionId)) {
+        sectionMap.get(sectionId).fields.push(field)
+      } else {
+        sectionMap.get(null).fields.push(field)
+      }
+    }
+
+    return Array.from(sectionMap.values())
+      .filter(section => section.fields.length > 0)
+      .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0))
+  }
+
+  const orderFieldsBySection = computed(() => {
+    return groupFieldsBySection(orderFields.value, orderSections.value)
+  })
+
+  const addressFieldsBySection = computed(() => {
+    return groupFieldsBySection(addressFields.value, addressSections.value)
+  })
+
+  /** Parse repeater extra field values from API (string JSON → array). */
+  function hydrateRepeaterExtraFields(fields) {
+    if (!order.value || !Array.isArray(fields)) {
+      return
+    }
+
+    for (const field of fields) {
+      if (field.xtype === REPEATER_XTYPE && field.key) {
+        order.value[field.key] = parseRepeaterModelValue(order.value[field.key])
+      }
+    }
+  }
+
+  /**
+   * Load order data and related resources.
+   */
+  async function loadOrder() {
+    if (!orderId.value) {
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: _('order_id_required'),
+        life: 5000,
+      })
+      return
+    }
+
+    loading.value = true
+
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}`)
+      order.value = response
+      syncShippingPaymentBaselineFromOrder()
+      costRecalcWarnings.value = []
+
+      await Promise.all([
+        loadProducts(),
+        loadProductsGridConfig(),
+        loadLogs(),
+        loadOrderFields(),
+        loadAddressFields(),
+        loadOrderExtraFields(),
+        loadAddressExtraFields(),
+        loadOrderCustomer(),
+      ])
+
+      hydrateRepeaterExtraFields(orderExtraFields.value)
+      hydrateRepeaterExtraFields(addressExtraFields.value)
+    } catch (error) {
+      console.error('[OrderView] Error loading order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_loading_data'),
+        life: 5000,
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  /**
+   * Load customer data for the order (if customer_id exists)
+   */
+  async function loadOrderCustomer() {
+    const customerId = order.value?.customer_id
+    if (!customerId || customerId === 0) {
+      selectedCustomer.value = null
+      return
+    }
+
+    try {
+      const response = await request.get(`/api/mgr/customers/${customerId}`)
+      if (response && response.id) {
+        selectedCustomer.value = {
+          ...response,
+          display: `${response.first_name || ''} ${response.last_name || ''} (${response.email || response.phone || ''})`,
+        }
+      }
+    } catch (error) {
+      console.error('[OrderView] Error loading customer:', error)
+      selectedCustomer.value = null
+    }
+  }
+
+  /**
+   * Load visible fields for msOrder model (includes combo options)
+   */
+  async function loadOrderFields() {
+    try {
+      const response = await request.get('/api/mgr/model-fields/visible/msOrder')
+      orderFields.value = response.results || []
+      orderSections.value = response.sections || []
+      orderComboOptions.value = response.comboOptions || {}
+
+      if (orderComboOptions.value.status_id) {
+        statuses.value =
+          orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
+      }
+      if (orderComboOptions.value.delivery_id) {
+        deliveries.value =
+          orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
+      }
+      if (orderComboOptions.value.payment_id) {
+        payments.value =
+          orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
+      }
+    } catch (error) {
+      console.error('[OrderView] Error loading order fields:', error)
+      orderFields.value = []
+      orderSections.value = []
+      orderComboOptions.value = {}
+    }
+  }
+
+  /**
+   * Load visible fields for msOrderAddress model (includes combo options)
+   */
+  async function loadAddressFields() {
+    try {
+      const response = await request.get('/api/mgr/model-fields/visible/msOrderAddress')
+      addressFields.value = response.results || []
+      addressSections.value = response.sections || []
+      addressComboOptions.value = response.comboOptions || {}
+    } catch (error) {
+      console.error('[OrderView] Error loading address fields:', error)
+      addressFields.value = []
+      addressSections.value = []
+      addressComboOptions.value = {}
+    }
+  }
+
+  /**
+   * Load extra fields for msOrder (from Object Extension)
+   */
+  async function loadOrderExtraFields() {
+    try {
+      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrder' })
+      orderExtraFields.value = (response.fields || []).filter(f => f.active)
+    } catch (error) {
+      console.error('[OrderView] Error loading order extra fields:', error)
+      orderExtraFields.value = []
+    }
+  }
+
+  /**
+   * Load extra fields for msOrderAddress (from Object Extension)
+   */
+  async function loadAddressExtraFields() {
+    try {
+      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrderAddress' })
+      addressExtraFields.value = (response.fields || []).filter(f => f.active)
+    } catch (error) {
+      console.error('[OrderView] Error loading address extra fields:', error)
+      addressExtraFields.value = []
+    }
+  }
+
+  /**
+   * Load order products
+   */
+  async function loadProducts() {
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}/products`)
+      products.value = response.results || response || []
+    } catch (error) {
+      console.error('[OrderView] Error loading products:', error)
+      products.value = []
+    }
+  }
+
+  /**
+   * Load products grid configuration
+   */
+  async function loadProductsGridConfig() {
+    try {
+      const response = await request.get('/api/mgr/grid-config/order_products')
+      productsColumns.value = response.columns || []
+    } catch (error) {
+      console.error('[OrderView] Error loading products grid config:', error)
+      productsColumns.value = getDefaultProductsColumns()
+    }
+  }
+
+  /**
+   * Default columns for products grid (fallback)
+   */
+  function getDefaultProductsColumns() {
+    return [
+      {
+        name: 'name',
+        label: _('order_product_name'),
+        visible: true,
+        type: 'template',
+        template: '{name}',
+      },
+      { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
+      { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
+      { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
+    ]
+  }
+
+  /**
+   * Load order logs
+   */
+  async function loadLogs() {
+    try {
+      const response = await request.get(`/api/mgr/orders/${orderId.value}/logs`)
+      logs.value = response.results || response || []
+    } catch (error) {
+      console.error('[OrderView] Error loading logs:', error)
+      logs.value = []
+    }
+  }
+
+  /**
+   * Initialize empty order for create mode
+   */
+  async function initEmptyOrder() {
+    loading.value = true
+
+    try {
+      order.value = {
+        id: null,
+        num: '',
+        status_id: 1, // Draft status
+        delivery_id: null,
+        payment_id: null,
+        customer_id: 0,
+        order_comment: '',
+        cart_cost: 0,
+        delivery_cost: 0,
+        cost: 0,
+        weight: 0,
+        // Address fields
+        first_name: '',
+        last_name: '',
+        phone: '',
+        email: '',
+        country: '',
+        index: '',
+        region: '',
+        city: '',
+        metro: '',
+        street: '',
+        building: '',
+        entrance: '',
+        floor: '',
+        room: '',
+        comment: '',
+        text_address: '',
+      }
+
+      await Promise.all([
+        loadOrderFields(),
+        loadAddressFields(),
+        loadOrderExtraFields(),
+        loadAddressExtraFields(),
+      ])
+
+      products.value = []
+      logs.value = []
+    } catch (error) {
+      console.error('[OrderView] Error initializing empty order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: _('error_loading_config'),
+        life: 5000,
+      })
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    loading,
+    products,
+    productsColumns,
+    logs,
+    statuses,
+    deliveries,
+    payments,
+    orderFields,
+    addressFields,
+    orderSections,
+    addressSections,
+    orderComboOptions,
+    addressComboOptions,
+    orderExtraFields,
+    addressExtraFields,
+    orderFieldsBySection,
+    addressFieldsBySection,
+    loadOrder,
+    loadProducts,
+    loadLogs,
+    initEmptyOrder,
+  }
+}
diff --git a/vueManager/src/composables/useOrderPluginTabs.js b/vueManager/src/composables/useOrderPluginTabs.js
new file mode 100644
index 00000000..41b3de93
--- /dev/null
+++ b/vueManager/src/composables/useOrderPluginTabs.js
@@ -0,0 +1,163 @@
+/**
+ * Plugin tab registry integration for the order view (built-in + MS3OrderTabsRegistry tabs).
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').ComputedRef} deps.isCreateMode
+ * @param {import('vue').ComputedRef} deps.managerConfig
+ */
+import { computed, ref } from 'vue'
+
+import { normalizeOrderPluginTab } from '../utils/orderPluginTab.js'
+
+export function useOrderPluginTabs(deps) {
+  const { _, order, orderId, isCreateMode, managerConfig } = deps
+
+  const orderActiveTab = ref('info')
+  const pluginTabs = ref([])
+  /** ExtJS plugin panels mounted lazily per tab key; destroyed in onBeforeUnmount */
+  const mountedExtPluginComponents = ref({})
+
+  /** Fixed positions 0–3; must stay in sync with RESERVED_ORDER_TAB_KEYS in orderPluginTab.js */
+  const builtInOrderTabs = computed(() => [
+    { key: 'info', title: _('order_info'), position: 0, hideOnCreate: false, kind: 'builtin' },
+    {
+      key: 'products',
+      title: _('order_products'),
+      position: 1,
+      hideOnCreate: true,
+      kind: 'builtin',
+    },
+    {
+      key: 'address',
+      title: _('order_address'),
+      position: 2,
+      hideOnCreate: false,
+      kind: 'builtin',
+    },
+    { key: 'history', title: _('order_history'), position: 3, hideOnCreate: true, kind: 'builtin' },
+  ])
+
+  /** Built-in + plugin tabs, sorted by `position`; respects hideOnCreate per tab */
+  const orderTabsConfig = computed(() => {
+    const builtIn = builtInOrderTabs.value.filter(t => !(t.hideOnCreate && isCreateMode.value))
+    const plugins = pluginTabs.value
+      .filter(t => !(t.hideOnCreate && isCreateMode.value))
+      .map(t => ({ ...t, kind: 'plugin' }))
+    return [...builtIn, ...plugins].sort((a, b) => (a.position ?? 100) - (b.position ?? 100))
+  })
+
+  /**
+   * Registers a plugin tab (called by window.MS3OrderTabsRegistry or tests).
+   * Validation lives in normalizeOrderPluginTab().
+   */
+  function registerPluginTab(tabData) {
+    const normalized = normalizeOrderPluginTab(tabData)
+    if (!normalized.ok) {
+      console.error(`[OrderView] ${normalized.reason}`, tabData)
+      return false
+    }
+    const exists = pluginTabs.value.some(t => t.key === normalized.tab.key)
+    if (exists) {
+      console.warn(`[OrderView] Tab with key "${normalized.tab.key}" already registered`)
+      return false
+    }
+    pluginTabs.value.push(normalized.tab)
+    return true
+  }
+
+  /**
+   * Props passed to Vue plugin tab components (same contract as ExtJS tabs below).
+   * User `tab.props` is spread first; core fields override name collisions intentionally.
+   */
+  function pluginVueProps(tab) {
+    return {
+      ...(tab.props || {}),
+      orderId: orderId.value,
+      order: order.value,
+      config: managerConfig.value,
+      isCreateMode: isCreateMode.value,
+    }
+  }
+
+  /** Waits for TabPanel DOM element via MutationObserver (consistent with other entry points). */
+  function waitForOrderTabElement(id, callback) {
+    const element = document.getElementById(id)
+    if (element) {
+      callback(element)
+      return
+    }
+    const observer = new MutationObserver(() => {
+      const el = document.getElementById(id)
+      if (el) {
+        observer.disconnect()
+        callback(el)
+      }
+    })
+    observer.observe(document.body, { childList: true, subtree: true })
+  }
+
+  /**
+   * Lazy-mounts an ExtJS panel into the plugin tab container.
+   * Merge order: xtype/renderTo/width, then extConfig, then core fields (order, orderId, config, isCreateMode).
+   *
+   * The Ext instance is created once per tab key when the user first selects the tab. Later changes to
+   * Vue’s `order` (after API load, save, etc.) are not pushed into Ext — plugin panels must implement
+   * their own listeners, polling, or `load` hooks if they need live data.
+   */
+  function mountExtJSOrderPlugin(tab) {
+    if (mountedExtPluginComponents.value[tab.key]) {
+      return
+    }
+    const containerId = `ms3-order-tab-${tab.key}`
+    waitForOrderTabElement(containerId, container => {
+      try {
+        if (typeof Ext === 'undefined') {
+          console.error('[OrderView] Ext is not defined')
+          return
+        }
+        const extComponent = Ext.create({
+          xtype: tab.xtype,
+          renderTo: container,
+          width: '100%',
+          ...tab.extConfig,
+          order: order.value,
+          orderId: orderId.value,
+          config: managerConfig.value,
+          isCreateMode: isCreateMode.value,
+        })
+        mountedExtPluginComponents.value[tab.key] = extComponent
+      } catch (error) {
+        console.error(`[OrderView] Failed to mount ExtJS order tab ${tab.key}:`, error)
+      }
+    })
+  }
+
+  function destroyPluginExtComponents() {
+    Object.keys(mountedExtPluginComponents.value).forEach(key => {
+      const component = mountedExtPluginComponents.value[key]
+      if (component && typeof component.destroy === 'function') {
+        try {
+          component.destroy()
+        } catch (e) {
+          console.warn(`[OrderView] Error destroying plugin ExtJS component ${key}:`, e)
+        }
+      }
+    })
+    mountedExtPluginComponents.value = {}
+  }
+
+  return {
+    orderActiveTab,
+    pluginTabs,
+    mountedExtPluginComponents,
+    builtInOrderTabs,
+    orderTabsConfig,
+    registerPluginTab,
+    pluginVueProps,
+    mountExtJSOrderPlugin,
+    destroyPluginExtComponents,
+  }
+}
diff --git a/vueManager/src/composables/useOrderProductOptions.js b/vueManager/src/composables/useOrderProductOptions.js
new file mode 100644
index 00000000..8e1dc57a
--- /dev/null
+++ b/vueManager/src/composables/useOrderProductOptions.js
@@ -0,0 +1,273 @@
+/**
+ * Product options table/json editing state for the edit-product dialog.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {import('vue').Ref} deps.editingProduct
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderProductOptions(deps) {
+  const { _, editingProduct } = deps
+
+  const optionsEditMode = ref('table') // 'table' or 'json'
+  const optionsTableData = ref([]) // Array of { type, key, value, isComplex, fieldValues, loadingValues }
+  const optionsJsonText = ref('') // JSON string for json mode
+  const optionsJsonError = ref('') // JSON parse error message
+
+  const productOptionFields = ref([])
+  const loadingOptionFields = ref(false)
+
+  /**
+   * Load product option fields (color, size, etc.)
+   */
+  async function loadProductOptionFields() {
+    loadingOptionFields.value = true
+    try {
+      const response = await request.get('/api/mgr/references/product-option-fields')
+      productOptionFields.value = response.fields || []
+    } catch (error) {
+      console.error('[OrderView] Error loading product option fields:', error)
+      productOptionFields.value = []
+    } finally {
+      loadingOptionFields.value = false
+    }
+  }
+
+  /**
+   * Check if value is complex (array or object)
+   */
+  function isComplexValue(value) {
+    return Array.isArray(value) || (typeof value === 'object' && value !== null)
+  }
+
+  /**
+   * Load field values for a specific row
+   */
+  async function loadFieldValuesForRow(row) {
+    if (!row.key || row.type !== 'field') return
+
+    const productId = editingProduct.value?.product_id
+    if (!productId) {
+      console.warn('[OrderView] No product_id found for loading field values')
+      row.fieldValues = []
+      return
+    }
+
+    row.loadingValues = true
+    try {
+      const response = await request.get('/api/mgr/references/product-field-values', {
+        field: row.key,
+        product_id: productId,
+      })
+      row.fieldValues = response.values || []
+    } catch (error) {
+      console.error('[OrderView] Error loading field values:', error)
+      row.fieldValues = []
+    } finally {
+      row.loadingValues = false
+    }
+  }
+
+  /**
+   * Initialize options data from product
+   */
+  async function initOptionsFromProduct(options) {
+    let parsed = {}
+
+    if (options) {
+      if (typeof options === 'string') {
+        try {
+          parsed = JSON.parse(options)
+        } catch {
+          parsed = {}
+        }
+      } else if (typeof options === 'object') {
+        parsed = options
+      }
+    }
+
+    const tableData = []
+    for (const [key, value] of Object.entries(parsed)) {
+      const isProductField = productOptionFields.value.some(f => f.name === key)
+      const row = {
+        type: isProductField ? 'field' : 'custom',
+        key,
+        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+        isComplex: isComplexValue(value),
+        fieldValues: [],
+        loadingValues: false,
+      }
+
+      if (isProductField) {
+        await loadFieldValuesForRow(row)
+      }
+
+      tableData.push(row)
+    }
+
+    optionsTableData.value = tableData
+    optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
+  }
+
+  /**
+   * Handle option type change (field/custom)
+   */
+  async function onOptionTypeChange(row) {
+    if (row.type === 'field') {
+      const isValidField = productOptionFields.value.some(f => f.name === row.key)
+      if (!isValidField && productOptionFields.value.length > 0) {
+        row.key = productOptionFields.value[0].name
+      }
+      row.value = ''
+      row.isComplex = false
+      await loadFieldValuesForRow(row)
+    } else {
+      row.fieldValues = []
+      row.value = ''
+      row.isComplex = false
+    }
+    syncTableToJson()
+  }
+
+  /**
+   * Handle field selection change
+   */
+  async function onFieldKeyChange(row) {
+    row.value = ''
+    row.fieldValues = []
+    await loadFieldValuesForRow(row)
+    syncTableToJson()
+  }
+
+  /**
+   * Add new option row
+   */
+  function addOptionRow() {
+    optionsTableData.value.push({
+      type: 'custom',
+      key: '',
+      value: '',
+      isComplex: false,
+      fieldValues: [],
+      loadingValues: false,
+    })
+  }
+
+  /**
+   * Remove option row
+   */
+  function removeOptionRow(index) {
+    optionsTableData.value.splice(index, 1)
+    syncTableToJson()
+  }
+
+  function buildOptionsObjectFromTable() {
+    const obj = {}
+    for (const row of optionsTableData.value) {
+      if (!row.key.trim()) {
+        continue
+      }
+      if (row.isComplex) {
+        try {
+          obj[row.key] = JSON.parse(row.value)
+        } catch {
+          obj[row.key] = row.value
+        }
+      } else {
+        obj[row.key] = row.value
+      }
+    }
+    return obj
+  }
+
+  /** Sync table data to JSON text. */
+  function syncTableToJson() {
+    const obj = buildOptionsObjectFromTable()
+    optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
+    optionsJsonError.value = ''
+  }
+
+  /**
+   * Sync JSON text to table data
+   */
+  function syncJsonToTable() {
+    optionsJsonError.value = ''
+
+    if (!optionsJsonText.value.trim()) {
+      optionsTableData.value = []
+      return true
+    }
+
+    try {
+      const parsed = JSON.parse(optionsJsonText.value)
+      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
+        optionsJsonError.value = _('options_json_must_be_object')
+        return false
+      }
+
+      optionsTableData.value = Object.entries(parsed).map(([key, value]) => ({
+        key,
+        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
+        isComplex: isComplexValue(value),
+      }))
+      return true
+    } catch (e) {
+      optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+      return false
+    }
+  }
+
+  /**
+   * Switch options edit mode
+   */
+  function switchOptionsMode(mode) {
+    if (mode === optionsEditMode.value) return
+
+    if (mode === 'json') {
+      syncTableToJson()
+    } else {
+      if (!syncJsonToTable()) {
+        return
+      }
+    }
+
+    optionsEditMode.value = mode
+  }
+
+  /**
+   * Get options object for saving
+   */
+  function getOptionsForSave() {
+    if (optionsEditMode.value === 'json') {
+      if (!optionsJsonText.value.trim()) return null
+      try {
+        return JSON.parse(optionsJsonText.value)
+      } catch {
+        return null
+      }
+    }
+    const obj = buildOptionsObjectFromTable()
+    return Object.keys(obj).length > 0 ? obj : null
+  }
+
+  return {
+    optionsEditMode,
+    optionsTableData,
+    optionsJsonText,
+    optionsJsonError,
+    productOptionFields,
+    loadingOptionFields,
+    loadProductOptionFields,
+    initOptionsFromProduct,
+    onOptionTypeChange,
+    onFieldKeyChange,
+    addOptionRow,
+    removeOptionRow,
+    syncTableToJson,
+    switchOptionsMode,
+    getOptionsForSave,
+  }
+}
diff --git a/vueManager/src/composables/useOrderProducts.js b/vueManager/src/composables/useOrderProducts.js
new file mode 100644
index 00000000..1b96d537
--- /dev/null
+++ b/vueManager/src/composables/useOrderProducts.js
@@ -0,0 +1,322 @@
+/**
+ * Product CRUD dialog state (edit / add / delete) for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {Object} deps.confirm
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.products
+ * @param {import('vue').Ref} deps.editingProduct
+ * @param {Function} deps.loadProducts
+ * @param {Function} deps.loadOrder
+ * @param {Object} deps.options
+ */
+import { computed, ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderProducts(deps) {
+  const { _, toast, confirm, orderId, products, editingProduct, loadProducts, loadOrder, options } =
+    deps
+
+  const editProductDialogVisible = ref(false)
+  const editProductForm = ref({
+    count: 1,
+    price: 0,
+    weight: 0,
+  })
+  const savingProduct = ref(false)
+
+  const addProductDialogVisible = ref(false)
+  const selectedProduct = ref(null)
+  const productSuggestions = ref([])
+  const searchingProducts = ref(false)
+  const addProductForm = ref({
+    count: 1,
+    price: 0,
+    weight: 0,
+    options: {},
+  })
+  const savingNewProduct = ref(false)
+
+  function productLineCost(form) {
+    return (form.count || 0) * (form.price || 0)
+  }
+
+  const editedProductCost = computed(() => productLineCost(editProductForm.value))
+  const newProductCost = computed(() => productLineCost(addProductForm.value))
+
+  /**
+   * Handle product action (edit, delete)
+   */
+  function handleProductAction(action, data) {
+    switch (action.handler) {
+      case 'edit':
+        editProduct(data)
+        break
+      case 'delete':
+        deleteProduct(data)
+        break
+      default:
+        console.warn('[OrderView] Unknown action handler:', action.handler)
+    }
+  }
+
+  /**
+   * Open edit product dialog
+   */
+  async function editProduct(product) {
+    editingProduct.value = product
+    editProductForm.value = {
+      count: product.count || 1,
+      price: product.price || 0,
+      weight: product.weight || 0,
+    }
+
+    if (options.productOptionFields.value.length === 0) {
+      await options.loadProductOptionFields()
+    }
+
+    await options.initOptionsFromProduct(product.options)
+    options.optionsEditMode.value = 'table'
+    options.optionsJsonError.value = ''
+
+    editProductDialogVisible.value = true
+  }
+
+  /**
+   * Save edited product
+   */
+  async function saveEditedProduct() {
+    if (!editingProduct.value) return
+
+    if (options.optionsEditMode.value === 'json' && options.optionsJsonText.value.trim()) {
+      try {
+        JSON.parse(options.optionsJsonText.value)
+      } catch (e) {
+        options.optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
+        return
+      }
+    }
+
+    savingProduct.value = true
+
+    try {
+      const data = {
+        ...editProductForm.value,
+        options: options.getOptionsForSave(),
+      }
+
+      await request.put(
+        `/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`,
+        data
+      )
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_product_saved'),
+        life: 3000,
+      })
+
+      editProductDialogVisible.value = false
+
+      await Promise.all([loadProducts(), loadOrder()])
+    } catch (error) {
+      console.error('[OrderView] Error saving product:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      savingProduct.value = false
+    }
+  }
+
+  /**
+   * Cancel product editing
+   */
+  function cancelEditProduct() {
+    editProductDialogVisible.value = false
+    editingProduct.value = null
+  }
+
+  /**
+   * Open add product dialog
+   */
+  function openAddProductDialog() {
+    selectedProduct.value = null
+    productSuggestions.value = []
+    addProductForm.value = {
+      count: 1,
+      price: 0,
+      weight: 0,
+      options: {},
+    }
+    addProductDialogVisible.value = true
+  }
+
+  /**
+   * Search products for autocomplete
+   */
+  async function searchProducts(event) {
+    const query = event.query
+    if (!query || query.length < 2) {
+      productSuggestions.value = []
+      return
+    }
+
+    searchingProducts.value = true
+    try {
+      const response = await request.get('/api/mgr/references/products', { query })
+      productSuggestions.value = response.results || []
+    } catch (error) {
+      console.error('[OrderView] Error searching products:', error)
+      productSuggestions.value = []
+    } finally {
+      searchingProducts.value = false
+    }
+  }
+
+  /**
+   * Handle product selection from autocomplete
+   */
+  function onProductSelect(event) {
+    const product = event.value
+    if (product) {
+      addProductForm.value.price = product.price || 0
+      addProductForm.value.weight = product.weight || 0
+    }
+  }
+
+  /**
+   * Save new product to order
+   */
+  async function saveNewProduct() {
+    if (!selectedProduct.value || !selectedProduct.value.id) {
+      toast.add({
+        severity: 'warn',
+        summary: _('warning'),
+        detail: _('order_product_select'),
+        life: 3000,
+      })
+      return
+    }
+
+    savingNewProduct.value = true
+    try {
+      const data = {
+        product_id: selectedProduct.value.id,
+        count: addProductForm.value.count || 1,
+        price: addProductForm.value.price || 0,
+        weight: addProductForm.value.weight || 0,
+        options: addProductForm.value.options || {},
+      }
+
+      await request.post(`/api/mgr/orders/${orderId.value}/products`, data)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_product_added'),
+        life: 3000,
+      })
+
+      addProductDialogVisible.value = false
+
+      await Promise.all([loadProducts(), loadOrder()])
+    } catch (error) {
+      console.error('[OrderView] Error adding product:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error'),
+        life: 5000,
+      })
+    } finally {
+      savingNewProduct.value = false
+    }
+  }
+
+  /**
+   * Cancel add product
+   */
+  function cancelAddProduct() {
+    addProductDialogVisible.value = false
+    selectedProduct.value = null
+  }
+
+  /**
+   * Delete product from order with confirmation
+   */
+  function deleteProduct(product) {
+    if (products.value.length <= 1) {
+      toast.add({
+        severity: 'warn',
+        summary: _('warning'),
+        detail: _('order_product_cannot_delete_last'),
+        life: 5000,
+      })
+      return
+    }
+
+    confirm.require({
+      message: _('order_product_delete_confirm'),
+      header: _('confirm_delete'),
+      icon: 'pi pi-exclamation-triangle',
+      acceptLabel: _('yes'),
+      rejectLabel: _('no'),
+      acceptClass: 'p-button-danger',
+      accept: async () => {
+        try {
+          await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
+
+          toast.add({
+            severity: 'success',
+            summary: _('success'),
+            detail: _('order_product_deleted'),
+            life: 3000,
+          })
+
+          await Promise.all([loadProducts(), loadOrder()])
+        } catch (error) {
+          console.error('[OrderView] Error deleting product:', error)
+          toast.add({
+            severity: 'error',
+            summary: _('error'),
+            detail: error.message || _('error_deleting_data'),
+            life: 5000,
+          })
+        }
+      },
+    })
+  }
+
+  return {
+    editProductDialogVisible,
+    editingProduct,
+    editProductForm,
+    savingProduct,
+    editedProductCost,
+    addProductDialogVisible,
+    selectedProduct,
+    productSuggestions,
+    searchingProducts,
+    addProductForm,
+    savingNewProduct,
+    newProductCost,
+    handleProductAction,
+    editProduct,
+    saveEditedProduct,
+    cancelEditProduct,
+    openAddProductDialog,
+    searchProducts,
+    onProductSelect,
+    saveNewProduct,
+    cancelAddProduct,
+    deleteProduct,
+  }
+}
diff --git a/vueManager/src/composables/useOrderSave.js b/vueManager/src/composables/useOrderSave.js
new file mode 100644
index 00000000..93803619
--- /dev/null
+++ b/vueManager/src/composables/useOrderSave.js
@@ -0,0 +1,321 @@
+/**
+ * Order save / finalize / create actions for the order view.
+ *
+ * @param {Object} deps
+ * @param {Function} deps._
+ * @param {Object} deps.toast
+ * @param {Object} deps.confirm
+ * @param {import('vue').Ref} deps.order
+ * @param {import('vue').ComputedRef} deps.orderId
+ * @param {import('vue').Ref} deps.saving
+ * @param {import('vue').Ref} deps.orderFields
+ * @param {import('vue').Ref} deps.addressFields
+ * @param {import('vue').Ref} deps.orderExtraFields
+ * @param {import('vue').Ref} deps.addressExtraFields
+ * @param {import('vue').Ref} deps.selectedCustomer
+ * @param {import('vue').Ref} deps.createCustomerFromData
+ * @param {import('vue').Ref} deps.showDuplicateDialog
+ * @param {import('vue').Ref} deps.duplicateCustomer
+ * @param {import('vue').Ref} deps.pendingOrderData
+ * @param {Object} deps.fieldHelpers
+ * @param {Function} deps.loadOrder
+ * @param {Function} deps.loadLogs
+ * @param {Function} deps.syncShippingPaymentBaselineFromOrder
+ */
+import { ref } from 'vue'
+
+import request from '../request.js'
+
+export function useOrderSave(deps) {
+  const {
+    _,
+    toast,
+    confirm,
+    order,
+    orderId,
+    saving,
+    orderFields,
+    addressFields,
+    orderExtraFields,
+    addressExtraFields,
+    selectedCustomer,
+    createCustomerFromData,
+    showDuplicateDialog,
+    duplicateCustomer,
+    pendingOrderData,
+    fieldHelpers,
+    loadOrder,
+    loadLogs,
+    syncShippingPaymentBaselineFromOrder,
+  } = deps
+
+  const finalizing = ref(false)
+
+  /**
+   * Save order
+   */
+  async function saveOrder() {
+    saving.value = true
+
+    try {
+      const orderData = {}
+      for (const field of orderFields.value) {
+        if (fieldHelpers.isFieldEditable(field.name) && order.value[field.name] !== undefined) {
+          orderData[field.name] = order.value[field.name]
+        }
+      }
+
+      for (const field of addressFields.value) {
+        if (order.value[field.name] !== undefined) {
+          orderData[field.name] = order.value[field.name]
+        }
+      }
+
+      for (const field of orderExtraFields.value) {
+        if (order.value[field.key] !== undefined) {
+          orderData[field.key] = order.value[field.key]
+        }
+      }
+
+      for (const field of addressExtraFields.value) {
+        if (order.value[field.key] !== undefined) {
+          orderData[field.key] = order.value[field.key]
+        }
+      }
+
+      await request.put(`/api/mgr/orders/${orderId.value}`, orderData)
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('order_saved'),
+        life: 3000,
+      })
+
+      syncShippingPaymentBaselineFromOrder()
+
+      await loadLogs()
+    } catch (error) {
+      console.error('[OrderView] Error saving order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+    }
+  }
+
+  /**
+   * Finalize order (convert draft to final order)
+   * Shows confirmation dialog first
+   */
+  function confirmFinalizeOrder() {
+    confirm.require({
+      message: _('ms3_order_finalize_confirm_desc'),
+      header: _('ms3_order_finalize_confirm'),
+      icon: 'pi pi-check-circle',
+      acceptLabel: _('ms3_order_finalize_btn'),
+      rejectLabel: _('cancel'),
+      accept: () => {
+        finalizeOrder()
+      },
+    })
+  }
+
+  /**
+   * Finalize order API call
+   */
+  async function finalizeOrder(forceCreateCustomer = false) {
+    finalizing.value = true
+
+    try {
+      const requestData = {}
+
+      if (createCustomerFromData.value && !order.value.customer_id) {
+        requestData.create_customer = true
+        if (forceCreateCustomer) {
+          requestData.force_create_customer = true
+        }
+      }
+
+      const response = await request.post(`/api/mgr/orders/${orderId.value}/finalize`, requestData)
+
+      if (response.duplicate_found) {
+        pendingOrderData.value = { finalize: true }
+        duplicateCustomer.value = response.customer
+        showDuplicateDialog.value = true
+        finalizing.value = false
+        return
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_finalized'),
+        life: 3000,
+      })
+
+      await loadOrder()
+      await loadLogs()
+    } catch (error) {
+      console.error('[OrderView] Error finalizing order:', error)
+
+      const validationErrors = error.data?.object?.errors
+      if (validationErrors && Array.isArray(validationErrors) && validationErrors.length > 0) {
+        validationErrors.forEach(field => {
+          const fieldError = _(`ms3_order_err_${field}`) || field
+          toast.add({
+            severity: 'error',
+            summary: _('ms3_order_err_validation'),
+            detail: fieldError,
+            life: 5000,
+          })
+        })
+      } else {
+        toast.add({
+          severity: 'error',
+          summary: _('error'),
+          detail: error.message || _('ms3_order_finalize_error'),
+          life: 5000,
+        })
+      }
+    } finally {
+      finalizing.value = false
+    }
+  }
+
+  /**
+   * Collect order data from form
+   */
+  function collectOrderData() {
+    const orderData = {}
+
+    for (const field of orderFields.value) {
+      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+        orderData[field.name] = order.value[field.name]
+      }
+    }
+
+    for (const field of addressFields.value) {
+      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
+        orderData[field.name] = order.value[field.name]
+      }
+    }
+
+    for (const field of orderExtraFields.value) {
+      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+        orderData[field.key] = order.value[field.key]
+      }
+    }
+
+    for (const field of addressExtraFields.value) {
+      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
+        orderData[field.key] = order.value[field.key]
+      }
+    }
+
+    if (selectedCustomer.value?.id) {
+      orderData.customer_id = selectedCustomer.value.id
+    }
+
+    if (createCustomerFromData.value && !selectedCustomer.value?.id) {
+      orderData.create_customer = true
+    }
+
+    return orderData
+  }
+
+  /**
+   * Validate customer data before creation
+   * @returns {string|null} Error message or null if valid
+   */
+  function validateCustomerData(orderData) {
+    if (orderData.create_customer) {
+      const email = (orderData.email || '').trim()
+      const phone = (orderData.phone || '').trim()
+
+      if (!email && !phone) {
+        return _('ms3_customer_validation_email_or_phone')
+      }
+
+      if (email && !email.includes('@')) {
+        return _('ms3_customer_validation_invalid_email')
+      }
+    }
+
+    return null
+  }
+
+  /**
+   * Create new order
+   */
+  async function createOrder(forceCreateCustomer = false) {
+    saving.value = true
+
+    try {
+      const orderData = collectOrderData()
+
+      if (forceCreateCustomer) {
+        orderData.force_create_customer = true
+      }
+
+      const validationError = validateCustomerData(orderData)
+      if (validationError) {
+        toast.add({
+          severity: 'warn',
+          summary: _('warning'),
+          detail: validationError,
+          life: 5000,
+        })
+        saving.value = false
+        return
+      }
+
+      const response = await request.post('/api/mgr/orders', orderData)
+
+      if (response.duplicate_found) {
+        pendingOrderData.value = orderData
+        duplicateCustomer.value = response.customer
+        showDuplicateDialog.value = true
+        saving.value = false
+        return
+      }
+
+      toast.add({
+        severity: 'success',
+        summary: _('success'),
+        detail: _('ms3_order_created'),
+        life: 3000,
+      })
+
+      const createdOrderId = response.id || response.object?.id
+      if (createdOrderId) {
+        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
+      }
+    } catch (error) {
+      console.error('[OrderView] Error creating order:', error)
+      toast.add({
+        severity: 'error',
+        summary: _('error'),
+        detail: error.message || _('error_saving_data'),
+        life: 5000,
+      })
+    } finally {
+      saving.value = false
+    }
+  }
+
+  return {
+    saving,
+    finalizing,
+    saveOrder,
+    confirmFinalizeOrder,
+    finalizeOrder,
+    collectOrderData,
+    validateCustomerData,
+    createOrder,
+  }
+}
diff --git a/vueManager/src/composables/useOrderView.js b/vueManager/src/composables/useOrderView.js
index f96cfc4c..e7a87a3a 100644
--- a/vueManager/src/composables/useOrderView.js
+++ b/vueManager/src/composables/useOrderView.js
@@ -1,99 +1,36 @@
 /**
- * Order manager screen state, API calls, plugin tabs, and product dialogs (#339).
+ * Order manager screen orchestrator (#339).
+ *
+ * Thin wiring layer: creates shared order refs and core computeds, then delegates
+ * loading, saving, products, options, cost recalculation, customer handling, and
+ * plugin tab registry to dedicated composables. The public orderContext contract
+ * and the return shape consumed by OrderView.vue are preserved unchanged.
  */
 import { useLexicon } from '@vuetools/useLexicon'
 import { useConfirm } from 'primevue/useconfirm'
 import { useToast } from 'primevue/usetoast'
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
-import request from '../request.js'
-import { normalizeOrderPluginTab } from '../utils/orderPluginTab.js'
-import { parseRepeaterModelValue, REPEATER_XTYPE } from '../utils/repeaterField.js'
+import { useOrderCostRecalc } from './useOrderCostRecalc.js'
+import { useOrderCustomer } from './useOrderCustomer.js'
 import { useOrderFieldHelpers } from './useOrderFieldHelpers.js'
 import { useOrderFormatters } from './useOrderFormatters.js'
+import { useOrderLoad } from './useOrderLoad.js'
+import { useOrderPluginTabs } from './useOrderPluginTabs.js'
+import { useOrderProductOptions } from './useOrderProductOptions.js'
+import { useOrderProducts } from './useOrderProducts.js'
+import { useOrderSave } from './useOrderSave.js'
 
 export function useOrderView() {
   const toast = useToast()
   const confirm = useConfirm()
   const { _ } = useLexicon()
 
-  const loading = ref(true)
-  const saving = ref(false)
+  // Shared order ref — populated by useOrderLoad, read across composables.
   const order = ref(null)
-  const products = ref([])
-  const productsColumns = ref([])
-  const logs = ref([])
-  const statuses = ref([])
-  const deliveries = ref([])
-  const payments = ref([])
-
-  // Model fields configuration
-  const orderFields = ref([])
-  const addressFields = ref([])
-
-  // Sections
-  const orderSections = ref([])
-  const addressSections = ref([])
-
-  // Combo options from API
-  const orderComboOptions = ref({})
-  const addressComboOptions = ref({})
-
-  // Extra fields (from Object Extension)
-  const orderExtraFields = ref([])
-  const addressExtraFields = ref([])
-
-  // Edit product dialog state
-  const editProductDialogVisible = ref(false)
-  const editingProduct = ref(null)
-  const editProductForm = ref({
-    count: 1,
-    price: 0,
-    weight: 0,
-  })
-  const savingProduct = ref(false)
-
-  // Options editing state
-  const optionsEditMode = ref('table') // 'table' or 'json'
-  const optionsTableData = ref([]) // Array of { type, key, value, isComplex, fieldValues, loadingValues }
-  const optionsJsonText = ref('') // JSON string for json mode
-  const optionsJsonError = ref('') // JSON parse error message
-
-  // Product option fields (color, size, etc.)
-  const productOptionFields = ref([])
-  const loadingOptionFields = ref(false)
-
-  // Add product dialog state
-  const addProductDialogVisible = ref(false)
-  const selectedProduct = ref(null)
-  const productSuggestions = ref([])
-  const searchingProducts = ref(false)
-  const addProductForm = ref({
-    count: 1,
-    price: 0,
-    weight: 0,
-    options: {},
-  })
-  const savingNewProduct = ref(false)
-
-  // Customer search state (for create mode)
-  const selectedCustomer = ref(null)
-  const customerSuggestions = ref([])
-  const searchingCustomers = ref(false)
-  const createCustomerFromData = ref(false)
-
-  // Order tabs: built-ins (info/products/address/history) + MS3OrderTabsRegistry plugin tabs
-  const orderActiveTab = ref('info')
-  const pluginTabs = ref([])
-  /** ExtJS plugin panels mounted lazily per tab key; destroyed in onBeforeUnmount */
-  const mountedExtPluginComponents = ref({})
-
-  // Duplicate customer dialog state
-  const showDuplicateDialog = ref(false)
-  const duplicateCustomer = ref(null)
-  const pendingOrderData = ref(null)
+  // Shared saving flag — mutated by useOrderSave, read by useOrderCustomer duplicate flow.
+  const saving = ref(false)
 
-  // ms3 is a global (declared with `let`), not window.ms3
   const orderId = computed(() => {
     const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
     const configId = ms3Config?.order_id
@@ -112,1544 +49,136 @@ export function useOrderView() {
     return typeof ms3 !== 'undefined' ? ms3.config : {}
   })
 
-  /** Fixed positions 0–3; must stay in sync with RESERVED_ORDER_TAB_KEYS in orderPluginTab.js */
-  const builtInOrderTabs = computed(() => [
-    { key: 'info', title: _('order_info'), position: 0, hideOnCreate: false, kind: 'builtin' },
-    { key: 'products', title: _('order_products'), position: 1, hideOnCreate: true, kind: 'builtin' },
-    { key: 'address', title: _('order_address'), position: 2, hideOnCreate: false, kind: 'builtin' },
-    { key: 'history', title: _('order_history'), position: 3, hideOnCreate: true, kind: 'builtin' },
-  ])
-
-  /** Built-in + plugin tabs, sorted by `position`; respects hideOnCreate per tab */
-  const orderTabsConfig = computed(() => {
-    const builtIn = builtInOrderTabs.value.filter(t => !(t.hideOnCreate && isCreateMode.value))
-    const plugins = pluginTabs.value
-      .filter(t => !(t.hideOnCreate && isCreateMode.value))
-      .map(t => ({ ...t, kind: 'plugin' }))
-    return [...builtIn, ...plugins].sort((a, b) => (a.position ?? 100) - (b.position ?? 100))
-  })
-
-  // Draft status ID (typically 1)
-  const draftStatusId = computed(() => {
-    const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
-    return ms3Config?.status_draft || 1
-  })
+  // Cost recalculation owns baseline + recalc state; its sync helper is reused on load/save.
+  const costRecalc = useOrderCostRecalc({ order, orderId, isCreateMode, _, toast })
 
-  // Check if order is in draft status
-  const isDraft = computed(() => {
-    if (!order.value) return false
-    return parseInt(order.value.status_id) === parseInt(draftStatusId.value)
-  })
-
-  // Finalize state
-  const finalizing = ref(false)
-
-  // Order cost recalculation (#212): baseline delivery/payment after load/save
-  const savedBaselineDeliveryId = ref(0)
-  const savedBaselinePaymentId = ref(0)
-  const recalculatingCost = ref(false)
-  /** @type {import('vue').ShallowRef<string[]>} Warning codes from last recalculate API */
-  const costRecalcWarnings = shallowRef([])
-  const manualDeliveryCost = ref(null)
-
-  function syncShippingPaymentBaselineFromOrder() {
-    if (!order.value || isCreateMode.value) {
-      return
-    }
-    savedBaselineDeliveryId.value = Number.parseInt(order.value.delivery_id, 10) || 0
-    savedBaselinePaymentId.value = Number.parseInt(order.value.payment_id, 10) || 0
-  }
-
-  const hasUnsavedShippingPaymentChanges = computed(() => {
-    if (isCreateMode.value || !order.value) {
-      return false
-    }
-    const d = Number.parseInt(order.value.delivery_id, 10) || 0
-    const p = Number.parseInt(order.value.payment_id, 10) || 0
-
-    return d !== savedBaselineDeliveryId.value || p !== savedBaselinePaymentId.value
-  })
-
-  /**
-   * Group fields by sections
-   */
-  const orderFieldsBySection = computed(() => {
-    return groupFieldsBySection(orderFields.value, orderSections.value)
+  // Customer + duplicate dialog state — created before save so save can read its refs.
+  const orderActions = { finalizeOrder: null, createOrder: null }
+  const customer = useOrderCustomer({
+    _,
+    toast,
+    order,
+    orderId,
+    saving,
+    orderActions,
   })
 
-  const addressFieldsBySection = computed(() => {
-    return groupFieldsBySection(addressFields.value, addressSections.value)
+  const load = useOrderLoad({
+    _,
+    toast,
+    order,
+    orderId,
+    selectedCustomer: customer.selectedCustomer,
+    costRecalcWarnings: costRecalc.costRecalcWarnings,
+    syncShippingPaymentBaselineFromOrder: costRecalc.syncShippingPaymentBaselineFromOrder,
   })
 
-  /**
-   * Helper to group fields by section
-   */
-  function groupFieldsBySection(fields, sections) {
-    // Create section map
-    const sectionMap = new Map()
-
-    // Add sections in order
-    for (const section of sections) {
-      sectionMap.set(section.id, {
-        ...section,
-        fields: [],
-      })
-    }
-
-    // Add "no section" group for fields without section
-    sectionMap.set(null, {
-      id: null,
-      label: _('ms3_model_field_no_section'),
-      section_key: 'no_section',
-      sort_order: 9999,
-      fields: [],
-    })
-
-    // Assign fields to sections
-    for (const field of fields) {
-      const sectionId = field.section_id || null
-      if (sectionMap.has(sectionId)) {
-        sectionMap.get(sectionId).fields.push(field)
-      } else {
-        // If section doesn't exist, put in "no section"
-        sectionMap.get(null).fields.push(field)
-      }
-    }
-
-    // Convert to array and filter out empty sections
-    return Array.from(sectionMap.values())
-      .filter(section => section.fields.length > 0)
-      .sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0))
-  }
-
-  /** Parse repeater extra field values from API (string JSON → array). */
-  function hydrateRepeaterExtraFields(fields) {
-    if (!order.value || !Array.isArray(fields)) {
-      return
-    }
-
-    for (const field of fields) {
-      if (field.xtype === REPEATER_XTYPE && field.key) {
-        order.value[field.key] = parseRepeaterModelValue(order.value[field.key])
-      }
-    }
-  }
-
-  /** Load order data and related resources. */
-  async function loadOrder() {
-    if (!orderId.value) {
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: _('order_id_required'),
-        life: 5000,
-      })
-      return
-    }
-
-    loading.value = true
-
-    try {
-      const response = await request.get(`/api/mgr/orders/${orderId.value}`)
-      order.value = response
-      syncShippingPaymentBaselineFromOrder()
-      costRecalcWarnings.value = []
-
-      await Promise.all([
-        loadProducts(),
-        loadProductsGridConfig(),
-        loadLogs(),
-        loadOrderFields(),
-        loadAddressFields(),
-        loadOrderExtraFields(),
-        loadAddressExtraFields(),
-        loadOrderCustomer(),
-      ])
-
-      hydrateRepeaterExtraFields(orderExtraFields.value)
-      hydrateRepeaterExtraFields(addressExtraFields.value)
-    } catch (error) {
-      console.error('[OrderView] Error loading order:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_loading_data'),
-        life: 5000,
-      })
-    } finally {
-      loading.value = false
-    }
-  }
-
-  /**
-   * Load customer data for the order (if customer_id exists)
-   */
-  async function loadOrderCustomer() {
-    const customerId = order.value?.customer_id
-    if (!customerId || customerId === 0) {
-      selectedCustomer.value = null
-      return
-    }
-
-    try {
-      const response = await request.get(`/api/mgr/customers/${customerId}`)
-      if (response && response.id) {
-        selectedCustomer.value = {
-          ...response,
-          display: `${response.first_name || ''} ${response.last_name || ''} (${response.email || response.phone || ''})`,
-        }
-      }
-    } catch (error) {
-      console.error('[OrderView] Error loading customer:', error)
-      selectedCustomer.value = null
-    }
-  }
-
-  /**
-   * Load visible fields for msOrder model (includes combo options)
-   */
-  async function loadOrderFields() {
-    try {
-      const response = await request.get('/api/mgr/model-fields/visible/msOrder')
-      orderFields.value = response.results || []
-      orderSections.value = response.sections || []
-      // Combo options are now returned with visible fields
-      orderComboOptions.value = response.comboOptions || {}
-
-      // Populate legacy refs for backward compatibility (extract options from new format)
-      if (orderComboOptions.value.status_id) {
-        statuses.value =
-          orderComboOptions.value.status_id.options || orderComboOptions.value.status_id
-      }
-      if (orderComboOptions.value.delivery_id) {
-        deliveries.value =
-          orderComboOptions.value.delivery_id.options || orderComboOptions.value.delivery_id
-      }
-      if (orderComboOptions.value.payment_id) {
-        payments.value =
-          orderComboOptions.value.payment_id.options || orderComboOptions.value.payment_id
-      }
-    } catch (error) {
-      console.error('[OrderView] Error loading order fields:', error)
-      orderFields.value = []
-      orderSections.value = []
-      orderComboOptions.value = {}
-    }
-  }
-
-  /**
-   * Load visible fields for msOrderAddress model (includes combo options)
-   */
-  async function loadAddressFields() {
-    try {
-      const response = await request.get('/api/mgr/model-fields/visible/msOrderAddress')
-      addressFields.value = response.results || []
-      addressSections.value = response.sections || []
-      // Combo options are now returned with visible fields
-      addressComboOptions.value = response.comboOptions || {}
-    } catch (error) {
-      console.error('[OrderView] Error loading address fields:', error)
-      addressFields.value = []
-      addressSections.value = []
-      addressComboOptions.value = {}
-    }
-  }
-
-  /**
-   * Load extra fields for msOrder (from Object Extension)
-   */
-  async function loadOrderExtraFields() {
-    try {
-      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrder' })
-      orderExtraFields.value = (response.fields || []).filter(f => f.active)
-    } catch (error) {
-      console.error('[OrderView] Error loading order extra fields:', error)
-      orderExtraFields.value = []
-    }
-  }
-
-  /**
-   * Load extra fields for msOrderAddress (from Object Extension)
-   */
-  async function loadAddressExtraFields() {
-    try {
-      const response = await request.get('/api/mgr/extra-fields', { class: 'msOrderAddress' })
-      addressExtraFields.value = (response.fields || []).filter(f => f.active)
-    } catch (error) {
-      console.error('[OrderView] Error loading address extra fields:', error)
-      addressExtraFields.value = []
-    }
-  }
-
-  /**
-   * Load order products
-   */
-  async function loadProducts() {
-    try {
-      const response = await request.get(`/api/mgr/orders/${orderId.value}/products`)
-      products.value = response.results || response || []
-    } catch (error) {
-      console.error('[OrderView] Error loading products:', error)
-      products.value = []
-    }
-  }
-
-  /**
-   * Load products grid configuration
-   */
-  async function loadProductsGridConfig() {
-    try {
-      const response = await request.get('/api/mgr/grid-config/order_products')
-      productsColumns.value = response.columns || []
-    } catch (error) {
-      console.error('[OrderView] Error loading products grid config:', error)
-      productsColumns.value = getDefaultProductsColumns()
-    }
-  }
-
-  /**
-   * Default columns for products grid (fallback)
-   */
-  function getDefaultProductsColumns() {
-    return [
-      {
-        name: 'name',
-        label: _('order_product_name'),
-        visible: true,
-        type: 'template',
-        template: '{name}',
-      },
-      { name: 'count', label: _('order_product_count'), visible: true, type: 'number' },
-      { name: 'price', label: _('order_product_price'), visible: true, type: 'price' },
-      { name: 'cost', label: _('order_product_cost'), visible: true, type: 'price' },
-    ]
-  }
-
   const { formatDate, formatPrice, getFieldWidthClass } = useOrderFormatters()
 
   const fieldHelpers = useOrderFieldHelpers({
     formatDate,
     formatPrice,
     order,
-    orderComboOptions,
-    addressComboOptions,
-    statuses,
-    deliveries,
-    payments,
+    orderComboOptions: load.orderComboOptions,
+    addressComboOptions: load.addressComboOptions,
+    statuses: load.statuses,
+    deliveries: load.deliveries,
+    payments: load.payments,
     _,
   })
 
-  /**
-   * Handle product action (edit, delete)
-   */
-  function handleProductAction(action, data) {
-    switch (action.handler) {
-      case 'edit':
-        editProduct(data)
-        break
-      case 'delete':
-        deleteProduct(data)
-        break
-      default:
-        console.warn('[OrderView] Unknown action handler:', action.handler)
-    }
-  }
-
-  /**
-   * Open edit product dialog
-   */
-  async function editProduct(product) {
-    editingProduct.value = product
-    editProductForm.value = {
-      count: product.count || 1,
-      price: product.price || 0,
-      weight: product.weight || 0,
-    }
-
-    // Load product option fields if not already loaded
-    if (productOptionFields.value.length === 0) {
-      await loadProductOptionFields()
-    }
-
-    // Initialize options
-    await initOptionsFromProduct(product.options)
-    optionsEditMode.value = 'table'
-    optionsJsonError.value = ''
-
-    editProductDialogVisible.value = true
-  }
-
-  /**
-   * Load product option fields (color, size, etc.)
-   */
-  async function loadProductOptionFields() {
-    loadingOptionFields.value = true
-    try {
-      const response = await request.get('/api/mgr/references/product-option-fields')
-      productOptionFields.value = response.fields || []
-    } catch (error) {
-      console.error('[OrderView] Error loading product option fields:', error)
-      productOptionFields.value = []
-    } finally {
-      loadingOptionFields.value = false
-    }
-  }
-
-  /**
-   * Initialize options data from product
-   */
-  async function initOptionsFromProduct(options) {
-    let parsed = {}
-
-    if (options) {
-      if (typeof options === 'string') {
-        try {
-          parsed = JSON.parse(options)
-        } catch {
-          parsed = {}
-        }
-      } else if (typeof options === 'object') {
-        parsed = options
-      }
-    }
-
-    // Convert to table format with type detection
-    const tableData = []
-    for (const [key, value] of Object.entries(parsed)) {
-      const isProductField = productOptionFields.value.some(f => f.name === key)
-      const row = {
-        type: isProductField ? 'field' : 'custom',
-        key,
-        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
-        isComplex: isComplexValue(value),
-        fieldValues: [],
-        loadingValues: false,
-      }
-
-      // If it's a product field, load its values
-      if (isProductField) {
-        await loadFieldValuesForRow(row)
-      }
-
-      tableData.push(row)
-    }
-
-    optionsTableData.value = tableData
-
-    // Store JSON text
-    optionsJsonText.value = Object.keys(parsed).length > 0 ? JSON.stringify(parsed, null, 2) : ''
-  }
-
-  /**
-   * Load field values for a specific row
-   */
-  async function loadFieldValuesForRow(row) {
-    if (!row.key || row.type !== 'field') return
-
-    // Get product_id from editing product
-    const productId = editingProduct.value?.product_id
-    if (!productId) {
-      console.warn('[OrderView] No product_id found for loading field values')
-      row.fieldValues = []
-      return
-    }
-
-    row.loadingValues = true
-    try {
-      const response = await request.get('/api/mgr/references/product-field-values', {
-        field: row.key,
-        product_id: productId,
-      })
-      row.fieldValues = response.values || []
-    } catch (error) {
-      console.error('[OrderView] Error loading field values:', error)
-      row.fieldValues = []
-    } finally {
-      row.loadingValues = false
-    }
-  }
-
-  /**
-   * Handle option type change (field/custom)
-   */
-  async function onOptionTypeChange(row) {
-    if (row.type === 'field') {
-      // Reset to first available field if key is not a valid field
-      const isValidField = productOptionFields.value.some(f => f.name === row.key)
-      if (!isValidField && productOptionFields.value.length > 0) {
-        row.key = productOptionFields.value[0].name
-      }
-      row.value = ''
-      row.isComplex = false
-      await loadFieldValuesForRow(row)
-    } else {
-      // Custom type - clear field values
-      row.fieldValues = []
-      row.value = ''
-      row.isComplex = false
-    }
-    syncTableToJson()
-  }
-
-  /**
-   * Handle field selection change
-   */
-  async function onFieldKeyChange(row) {
-    row.value = ''
-    row.fieldValues = []
-    await loadFieldValuesForRow(row)
-    syncTableToJson()
-  }
-
-  /**
-   * Check if value is complex (array or object)
-   */
-  function isComplexValue(value) {
-    return Array.isArray(value) || (typeof value === 'object' && value !== null)
-  }
-
-  /**
-   * Add new option row
-   */
-  function addOptionRow() {
-    optionsTableData.value.push({
-      type: 'custom',
-      key: '',
-      value: '',
-      isComplex: false,
-      fieldValues: [],
-      loadingValues: false,
-    })
-  }
-
-  /**
-   * Remove option row
-   */
-  function removeOptionRow(index) {
-    optionsTableData.value.splice(index, 1)
-    syncTableToJson()
-  }
-
-  function buildOptionsObjectFromTable() {
-    const obj = {}
-    for (const row of optionsTableData.value) {
-      if (!row.key.trim()) {
-        continue
-      }
-      if (row.isComplex) {
-        try {
-          obj[row.key] = JSON.parse(row.value)
-        } catch {
-          obj[row.key] = row.value
-        }
-      } else {
-        obj[row.key] = row.value
-      }
-    }
-    return obj
-  }
-
-  /** Sync table data to JSON text. */
-  function syncTableToJson() {
-    const obj = buildOptionsObjectFromTable()
-    optionsJsonText.value = Object.keys(obj).length > 0 ? JSON.stringify(obj, null, 2) : ''
-    optionsJsonError.value = ''
-  }
-
-  /**
-   * Sync JSON text to table data
-   */
-  function syncJsonToTable() {
-    optionsJsonError.value = ''
-
-    if (!optionsJsonText.value.trim()) {
-      optionsTableData.value = []
-      return true
-    }
-
-    try {
-      const parsed = JSON.parse(optionsJsonText.value)
-      if (typeof parsed !== 'object' || parsed === null || Array.isArray(parsed)) {
-        optionsJsonError.value = _('options_json_must_be_object')
-        return false
-      }
-
-      optionsTableData.value = Object.entries(parsed).map(([key, value]) => ({
-        key,
-        value: isComplexValue(value) ? JSON.stringify(value, null, 2) : value,
-        isComplex: isComplexValue(value),
-      }))
-      return true
-    } catch (e) {
-      optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
-      return false
-    }
-  }
-
-  /**
-   * Switch options edit mode
-   */
-  function switchOptionsMode(mode) {
-    if (mode === optionsEditMode.value) return
-
-    if (mode === 'json') {
-      // Switching to JSON mode - sync table to JSON
-      syncTableToJson()
-    } else {
-      // Switching to table mode - sync JSON to table
-      if (!syncJsonToTable()) {
-        // JSON is invalid, stay in JSON mode
-        return
-      }
-    }
-
-    optionsEditMode.value = mode
-  }
-
-  /**
-   * Get options object for saving
-   */
-  function getOptionsForSave() {
-    if (optionsEditMode.value === 'json') {
-      if (!optionsJsonText.value.trim()) return null
-      try {
-        return JSON.parse(optionsJsonText.value)
-      } catch {
-        return null
-      }
-    }
-    const obj = buildOptionsObjectFromTable()
-    return Object.keys(obj).length > 0 ? obj : null
-  }
-
-  /**
-   * Save edited product
-   */
-  async function saveEditedProduct() {
-    if (!editingProduct.value) return
-
-    // Validate JSON mode if active
-    if (optionsEditMode.value === 'json' && optionsJsonText.value.trim()) {
-      try {
-        JSON.parse(optionsJsonText.value)
-      } catch (e) {
-        optionsJsonError.value = _('options_json_invalid') + ': ' + e.message
-        return
-      }
-    }
-
-    savingProduct.value = true
-
-    try {
-      const data = {
-        ...editProductForm.value,
-        options: getOptionsForSave(),
-      }
-
-      await request.put(`/api/mgr/orders/${orderId.value}/products/${editingProduct.value.id}`, data)
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('order_product_saved'),
-        life: 3000,
-      })
-
-      editProductDialogVisible.value = false
-
-      // Reload products and order to update totals
-      await Promise.all([loadProducts(), loadOrder()])
-    } catch (error) {
-      console.error('[OrderView] Error saving product:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      savingProduct.value = false
-    }
-  }
-
-  /**
-   * Cancel product editing
-   */
-  function cancelEditProduct() {
-    editProductDialogVisible.value = false
-    editingProduct.value = null
-  }
-
-  function productLineCost(form) {
-    return (form.count || 0) * (form.price || 0)
-  }
-
-  const editedProductCost = computed(() => productLineCost(editProductForm.value))
-
-  const newProductCost = computed(() => productLineCost(addProductForm.value))
-
-  /**
-   * Open add product dialog
-   */
-  function openAddProductDialog() {
-    selectedProduct.value = null
-    productSuggestions.value = []
-    addProductForm.value = {
-      count: 1,
-      price: 0,
-      weight: 0,
-      options: {},
-    }
-    addProductDialogVisible.value = true
-  }
-
-  /**
-   * Search products for autocomplete
-   */
-  async function searchProducts(event) {
-    const query = event.query
-    if (!query || query.length < 2) {
-      productSuggestions.value = []
-      return
-    }
-
-    searchingProducts.value = true
-    try {
-      const response = await request.get('/api/mgr/references/products', { query })
-      productSuggestions.value = response.results || []
-    } catch (error) {
-      console.error('[OrderView] Error searching products:', error)
-      productSuggestions.value = []
-    } finally {
-      searchingProducts.value = false
-    }
-  }
-
-  /**
-   * Handle product selection from autocomplete
-   */
-  function onProductSelect(event) {
-    const product = event.value
-    if (product) {
-      addProductForm.value.price = product.price || 0
-      addProductForm.value.weight = product.weight || 0
-    }
-  }
-
-  /**
-   * Save new product to order
-   */
-  async function saveNewProduct() {
-    if (!selectedProduct.value || !selectedProduct.value.id) {
-      toast.add({
-        severity: 'warn',
-        summary: _('warning'),
-        detail: _('order_product_select'),
-        life: 3000,
-      })
-      return
-    }
-
-    savingNewProduct.value = true
-    try {
-      const data = {
-        product_id: selectedProduct.value.id,
-        count: addProductForm.value.count || 1,
-        price: addProductForm.value.price || 0,
-        weight: addProductForm.value.weight || 0,
-        options: addProductForm.value.options || {},
-      }
-
-      await request.post(`/api/mgr/orders/${orderId.value}/products`, data)
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('order_product_added'),
-        life: 3000,
-      })
-
-      addProductDialogVisible.value = false
-
-      // Reload products and order to update totals
-      await Promise.all([loadProducts(), loadOrder()])
-    } catch (error) {
-      console.error('[OrderView] Error adding product:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error'),
-        life: 5000,
-      })
-    } finally {
-      savingNewProduct.value = false
-    }
-  }
-
-  /**
-   * Cancel add product
-   */
-  function cancelAddProduct() {
-    addProductDialogVisible.value = false
-    selectedProduct.value = null
-  }
-
-  /**
-   * Delete product from order with confirmation
-   */
-  function deleteProduct(product) {
-    // Check if this is the last product
-    if (products.value.length <= 1) {
-      toast.add({
-        severity: 'warn',
-        summary: _('warning'),
-        detail: _('order_product_cannot_delete_last'),
-        life: 5000,
-      })
-      return
-    }
-
-    confirm.require({
-      message: _('order_product_delete_confirm'),
-      header: _('confirm_delete'),
-      icon: 'pi pi-exclamation-triangle',
-      acceptLabel: _('yes'),
-      rejectLabel: _('no'),
-      acceptClass: 'p-button-danger',
-      accept: async () => {
-        try {
-          await request.delete(`/api/mgr/orders/${orderId.value}/products/${product.id}`)
-
-          toast.add({
-            severity: 'success',
-            summary: _('success'),
-            detail: _('order_product_deleted'),
-            life: 3000,
-          })
-
-          // Reload products and order to update totals
-          await Promise.all([loadProducts(), loadOrder()])
-        } catch (error) {
-          console.error('[OrderView] Error deleting product:', error)
-          toast.add({
-            severity: 'error',
-            summary: _('error'),
-            detail: error.message || _('error_deleting_data'),
-            life: 5000,
-          })
-        }
-      },
-    })
-  }
-
-  /**
-   * Load order logs
-   */
-  async function loadLogs() {
-    try {
-      const response = await request.get(`/api/mgr/orders/${orderId.value}/logs`)
-      logs.value = response.results || response || []
-    } catch (error) {
-      console.error('[OrderView] Error loading logs:', error)
-      logs.value = []
-    }
-  }
-
-  /**
-   * Берём поля заказа из ответа пересчёта без служебных ключей breakdown/warnings.
-   * @param {Record<string, unknown>|null|undefined} raw
-   * @returns {{ orderPayload: Record<string, unknown>, warnings: string[] }}
-   */
-  function stripRecalculateCostMeta(raw) {
-    if (!raw || typeof raw !== 'object') {
-      return { orderPayload: {}, warnings: [] }
-    }
-    const merged = /** @type {Record<string, unknown>} */ ({ ...raw })
-    delete merged.breakdown
-    const w = merged.warnings
-    delete merged.warnings
-    return {
-      orderPayload: merged,
-      warnings: Array.isArray(w) ? w.map(String) : [],
-    }
-  }
-
-  /**
-   * Пересчитать стоимость заказа (Manager API, #212).
-   * @param {{ mode?: string, manual_delivery_cost?: number }} opts
-   */
-  async function recalculateOrderCost(opts = {}) {
-    if (isCreateMode.value || !orderId.value || orderId.value === 'new') {
-      return
-    }
-
-    recalculatingCost.value = true
-    costRecalcWarnings.value = []
-
-    try {
-      const body = {
-        mode: opts.mode ?? 'auto',
-      }
-      if (opts.manual_delivery_cost !== undefined && opts.manual_delivery_cost !== null) {
-        body.manual_delivery_cost = opts.manual_delivery_cost
-      }
-
-      const raw = await request.post(`/api/mgr/orders/${orderId.value}/recalculate-cost`, body)
-      const { orderPayload, warnings } = stripRecalculateCostMeta(raw)
-      order.value = { ...(order.value || {}), ...orderPayload }
-      costRecalcWarnings.value = warnings
-      syncShippingPaymentBaselineFromOrder()
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('order_cost_recalculated'),
-        life: 3000,
-      })
-    } catch (error) {
-      console.error('[OrderView] Error recalculateCost:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      recalculatingCost.value = false
-    }
-  }
-
-  /**
-   * Save order
-   */
-  async function saveOrder() {
-    saving.value = true
-
-    try {
-      // Collect all editable order fields
-      const orderData = {}
-      for (const field of orderFields.value) {
-        if (fieldHelpers.isFieldEditable(field.name) && order.value[field.name] !== undefined) {
-          orderData[field.name] = order.value[field.name]
-        }
-      }
-
-      // Collect all editable address fields
-      for (const field of addressFields.value) {
-        if (order.value[field.name] !== undefined) {
-          orderData[field.name] = order.value[field.name]
-        }
-      }
-
-      // Collect extra fields for msOrder (from Object Extension)
-      for (const field of orderExtraFields.value) {
-        if (order.value[field.key] !== undefined) {
-          orderData[field.key] = order.value[field.key]
-        }
-      }
-
-      // Collect extra fields for msOrderAddress (from Object Extension)
-      for (const field of addressExtraFields.value) {
-        if (order.value[field.key] !== undefined) {
-          orderData[field.key] = order.value[field.key]
-        }
-      }
-
-      await request.put(`/api/mgr/orders/${orderId.value}`, orderData)
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('order_saved'),
-        life: 3000,
-      })
-
-      syncShippingPaymentBaselineFromOrder()
-
-      await loadLogs()
-    } catch (error) {
-      console.error('[OrderView] Error saving order:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      saving.value = false
-    }
-  }
-
-  /**
-   * Finalize order (convert draft to final order)
-   * Shows confirmation dialog first
-   */
-  function confirmFinalizeOrder() {
-    confirm.require({
-      message: _('ms3_order_finalize_confirm_desc'),
-      header: _('ms3_order_finalize_confirm'),
-      icon: 'pi pi-check-circle',
-      acceptLabel: _('ms3_order_finalize_btn'),
-      rejectLabel: _('cancel'),
-      accept: () => {
-        finalizeOrder()
-      },
-    })
-  }
-
-  /**
-   * Finalize order API call
-   */
-  async function finalizeOrder(forceCreateCustomer = false) {
-    finalizing.value = true
-
-    try {
-      // Build request data
-      const requestData = {}
-
-      // If create customer checkbox is checked and no customer linked
-      if (createCustomerFromData.value && !order.value.customer_id) {
-        requestData.create_customer = true
-        if (forceCreateCustomer) {
-          requestData.force_create_customer = true
-        }
-      }
-
-      const response = await request.post(`/api/mgr/orders/${orderId.value}/finalize`, requestData)
-
-      // Check if duplicate customer was found
-      if (response.duplicate_found) {
-        // Store for later and show dialog
-        pendingOrderData.value = { finalize: true }
-        duplicateCustomer.value = response.customer
-        showDuplicateDialog.value = true
-        finalizing.value = false
-        return
-      }
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('ms3_order_finalized'),
-        life: 3000,
-      })
-
-      // Reload order to get updated status and order number
-      await loadOrder()
-      await loadLogs()
-    } catch (error) {
-      console.error('[OrderView] Error finalizing order:', error)
-
-      // Show each validation error as separate toast
-      // Response structure: error.data.object.errors contains array of field names
-      const validationErrors = error.data?.object?.errors
-      if (validationErrors && Array.isArray(validationErrors) && validationErrors.length > 0) {
-        validationErrors.forEach(field => {
-          const fieldError = _(`ms3_order_err_${field}`) || field
-          toast.add({
-            severity: 'error',
-            summary: _('ms3_order_err_validation'),
-            detail: fieldError,
-            life: 5000,
-          })
-        })
-      } else {
-        // Fallback to general error message
-        toast.add({
-          severity: 'error',
-          summary: _('error'),
-          detail: error.message || _('ms3_order_finalize_error'),
-          life: 5000,
-        })
-      }
-    } finally {
-      finalizing.value = false
-    }
-  }
-
-  /**
-   * Initialize empty order for create mode
-   */
-  async function initEmptyOrder() {
-    loading.value = true
-
-    try {
-      // Initialize empty order object
-      order.value = {
-        id: null,
-        num: '',
-        status_id: 1, // Draft status
-        delivery_id: null,
-        payment_id: null,
-        customer_id: 0,
-        order_comment: '',
-        cart_cost: 0,
-        delivery_cost: 0,
-        cost: 0,
-        weight: 0,
-        // Address fields
-        first_name: '',
-        last_name: '',
-        phone: '',
-        email: '',
-        country: '',
-        index: '',
-        region: '',
-        city: '',
-        metro: '',
-        street: '',
-        building: '',
-        entrance: '',
-        floor: '',
-        room: '',
-        comment: '',
-        text_address: '',
-      }
-
-      // Load field configurations and combo options
-      await Promise.all([
-        loadOrderFields(),
-        loadAddressFields(),
-        loadOrderExtraFields(),
-        loadAddressExtraFields(),
-      ])
-
-      // Initialize empty products and logs
-      products.value = []
-      logs.value = []
-    } catch (error) {
-      console.error('[OrderView] Error initializing empty order:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: _('error_loading_config'),
-        life: 5000,
-      })
-    } finally {
-      loading.value = false
-    }
-  }
-
-  /**
-   * Collect order data from form
-   */
-  function collectOrderData() {
-    const orderData = {}
-
-    // Order fields
-    for (const field of orderFields.value) {
-      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
-        orderData[field.name] = order.value[field.name]
-      }
-    }
-
-    // Address fields
-    for (const field of addressFields.value) {
-      if (order.value[field.name] !== undefined && order.value[field.name] !== null) {
-        orderData[field.name] = order.value[field.name]
-      }
-    }
-
-    // Extra fields
-    for (const field of orderExtraFields.value) {
-      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
-        orderData[field.key] = order.value[field.key]
-      }
-    }
-
-    for (const field of addressExtraFields.value) {
-      if (order.value[field.key] !== undefined && order.value[field.key] !== null) {
-        orderData[field.key] = order.value[field.key]
-      }
-    }
-
-    // If customer was selected, add customer_id
-    if (selectedCustomer.value?.id) {
-      orderData.customer_id = selectedCustomer.value.id
-    }
-
-    // If create customer checkbox is checked and no customer selected
-    if (createCustomerFromData.value && !selectedCustomer.value?.id) {
-      orderData.create_customer = true
-    }
-
-    return orderData
-  }
-
-  /**
-   * Validate customer data before creation
-   * @returns {string|null} Error message or null if valid
-   */
-  function validateCustomerData(orderData) {
-    // If creating customer, need at least email or phone
-    if (orderData.create_customer) {
-      const email = (orderData.email || '').trim()
-      const phone = (orderData.phone || '').trim()
-
-      if (!email && !phone) {
-        return _('ms3_customer_validation_email_or_phone')
-      }
-
-      // Basic email validation
-      if (email && !email.includes('@')) {
-        return _('ms3_customer_validation_invalid_email')
-      }
-    }
-
-    return null
-  }
-
-  /**
-   * Create new order
-   */
-  async function createOrder(forceCreateCustomer = false) {
-    saving.value = true
-
-    try {
-      const orderData = collectOrderData()
-
-      // Add force flag if retrying after duplicate found
-      if (forceCreateCustomer) {
-        orderData.force_create_customer = true
-      }
-
-      // Validate customer data if creating customer
-      const validationError = validateCustomerData(orderData)
-      if (validationError) {
-        toast.add({
-          severity: 'warn',
-          summary: _('warning'),
-          detail: validationError,
-          life: 5000,
-        })
-        saving.value = false
-        return
-      }
-
-      // Create order via API
-      const response = await request.post('/api/mgr/orders', orderData)
-
-      // Check if duplicate customer was found
-      if (response.duplicate_found) {
-        // Store data for later and show dialog
-        pendingOrderData.value = orderData
-        duplicateCustomer.value = response.customer
-        showDuplicateDialog.value = true
-        saving.value = false
-        return
-      }
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('ms3_order_created'),
-        life: 3000,
-      })
-
-      // Redirect to edit the created order
-      const createdOrderId = response.id || response.object?.id
-      if (createdOrderId) {
-        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
-      }
-    } catch (error) {
-      console.error('[OrderView] Error creating order:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      saving.value = false
-    }
-  }
-
-  /**
-   * Handle duplicate dialog: use existing customer
-   */
-  async function useDuplicateCustomer() {
-    showDuplicateDialog.value = false
-
-    if (!duplicateCustomer.value || !pendingOrderData.value) {
-      return
-    }
-
-    // Check if this is from finalize or create
-    if (pendingOrderData.value.finalize) {
-      // For finalize: update order's customer_id and retry finalize
-      try {
-        // Update order with existing customer
-        await request.put(`/api/mgr/orders/${orderId.value}`, {
-          customer_id: duplicateCustomer.value.id,
-        })
-
-        // Disable create customer flag and finalize
-        createCustomerFromData.value = false
-        await finalizeOrder()
-      } catch (error) {
-        console.error('[OrderView] Error updating order customer:', error)
-        toast.add({
-          severity: 'error',
-          summary: _('error'),
-          detail: error.message || _('error_saving_data'),
-          life: 5000,
-        })
-      } finally {
-        pendingOrderData.value = null
-        duplicateCustomer.value = null
-      }
-      return
-    }
-
-    // For create: set existing customer and create order without create_customer flag
-    selectedCustomer.value = duplicateCustomer.value
-    pendingOrderData.value.customer_id = duplicateCustomer.value.id
-    delete pendingOrderData.value.create_customer
-    delete pendingOrderData.value.force_create_customer
-
-    saving.value = true
-    try {
-      const response = await request.post('/api/mgr/orders', pendingOrderData.value)
-
-      toast.add({
-        severity: 'success',
-        summary: _('success'),
-        detail: _('ms3_order_created'),
-        life: 3000,
-      })
-
-      const createdOrderId = response.id || response.object?.id
-      if (createdOrderId) {
-        window.location.href = `?a=mgr/order&namespace=minishop3&id=${createdOrderId}`
-      }
-    } catch (error) {
-      console.error('[OrderView] Error creating order:', error)
-      toast.add({
-        severity: 'error',
-        summary: _('error'),
-        detail: error.message || _('error_saving_data'),
-        life: 5000,
-      })
-    } finally {
-      saving.value = false
-      pendingOrderData.value = null
-      duplicateCustomer.value = null
-    }
-  }
-
-  /**
-   * Handle duplicate dialog: create new customer anyway
-   */
-  async function createNewCustomerAnyway() {
-    showDuplicateDialog.value = false
-    duplicateCustomer.value = null
-
-    // Check if this is from finalize or create
-    if (pendingOrderData.value?.finalize) {
-      // Retry finalize with force flag
-      pendingOrderData.value = null
-      await finalizeOrder(true)
-    } else {
-      // Retry create with force flag
-      await createOrder(true)
-      pendingOrderData.value = null
-    }
-  }
+  const save = useOrderSave({
+    _,
+    toast,
+    confirm,
+    order,
+    orderId,
+    saving,
+    orderFields: load.orderFields,
+    addressFields: load.addressFields,
+    orderExtraFields: load.orderExtraFields,
+    addressExtraFields: load.addressExtraFields,
+    selectedCustomer: customer.selectedCustomer,
+    createCustomerFromData: customer.createCustomerFromData,
+    showDuplicateDialog: customer.showDuplicateDialog,
+    duplicateCustomer: customer.duplicateCustomer,
+    pendingOrderData: customer.pendingOrderData,
+    fieldHelpers,
+    loadOrder: load.loadOrder,
+    loadLogs: load.loadLogs,
+    syncShippingPaymentBaselineFromOrder: costRecalc.syncShippingPaymentBaselineFromOrder,
+  })
 
-  /**
-   * Handle duplicate dialog: cancel
-   */
-  function cancelDuplicateDialog() {
-    showDuplicateDialog.value = false
-    duplicateCustomer.value = null
-    pendingOrderData.value = null
-  }
+  // Wire circular customer ↔ save dependency now that save.finalizeOrder / createOrder exist.
+  orderActions.finalizeOrder = save.finalizeOrder
+  orderActions.createOrder = save.createOrder
 
-  /**
-   * Search customers for autocomplete
-   */
-  async function searchCustomers(event) {
-    const query = event.query
-    if (!query || query.length < 2) {
-      customerSuggestions.value = []
-      return
-    }
+  // Options composable reads editingProduct (owned by orchestrator, shared with products).
+  const editingProduct = ref(null)
+  const options = useOrderProductOptions({ _, editingProduct })
 
-    searchingCustomers.value = true
-    try {
-      const response = await request.get('/api/mgr/references/customers', { query })
-      customerSuggestions.value = response.results || []
-    } catch (error) {
-      console.error('[OrderView] Error searching customers:', error)
-      customerSuggestions.value = []
-    } finally {
-      searchingCustomers.value = false
-    }
-  }
+  const products = useOrderProducts({
+    _,
+    toast,
+    confirm,
+    orderId,
+    products: load.products,
+    editingProduct,
+    loadProducts: load.loadProducts,
+    loadOrder: load.loadOrder,
+    options,
+  })
 
-  /**
-   * Handle customer selection from autocomplete
-   */
-  function onCustomerSelect(event) {
-    const customer = event.value
-    if (customer) {
-      // Set customer_id in order
-      order.value.customer_id = customer.id
+  const tabs = useOrderPluginTabs({
+    _,
+    order,
+    orderId,
+    isCreateMode,
+    managerConfig,
+  })
 
-      // Fill address fields from customer data
-      order.value.first_name = customer.first_name || order.value.first_name
-      order.value.last_name = customer.last_name || order.value.last_name
-      order.value.email = customer.email || order.value.email
-      order.value.phone = customer.phone || order.value.phone
-    }
-  }
+  const draftStatusId = computed(() => {
+    const ms3Config = typeof ms3 !== 'undefined' ? ms3.config : null
+    return ms3Config?.status_draft || 1
+  })
 
-  /**
-   * Clear selected customer
-   */
-  function clearCustomer() {
-    selectedCustomer.value = null
-    // Clear customer_id in order
-    if (order.value) {
-      order.value.customer_id = 0
-    }
-  }
+  const isDraft = computed(() => {
+    if (!order.value) return false
+    return parseInt(order.value.status_id) === parseInt(draftStatusId.value)
+  })
 
-  /**
-   * Go back to orders list
-   */
   function goBack() {
     window.location.href = '?a=mgr/orders&namespace=minishop3'
   }
 
-  /**
-   * Registers a plugin tab (called by window.MS3OrderTabsRegistry or tests).
-   * Validation lives in normalizeOrderPluginTab().
-   */
-  function registerPluginTab(tabData) {
-    const normalized = normalizeOrderPluginTab(tabData)
-    if (!normalized.ok) {
-      console.error(`[OrderView] ${normalized.reason}`, tabData)
-      return false
-    }
-    const exists = pluginTabs.value.some(t => t.key === normalized.tab.key)
-    if (exists) {
-      console.warn(`[OrderView] Tab with key "${normalized.tab.key}" already registered`)
-      return false
-    }
-    pluginTabs.value.push(normalized.tab)
-    return true
-  }
-
-  /**
-   * Props passed to Vue plugin tab components (same contract as ExtJS tabs below).
-   * User `tab.props` is spread first; core fields override name collisions intentionally.
-   */
-  function pluginVueProps(tab) {
-    return {
-      ...(tab.props || {}),
-      orderId: orderId.value,
-      order: order.value,
-      config: managerConfig.value,
-      isCreateMode: isCreateMode.value,
-    }
-  }
-
-  /** Waits for TabPanel DOM element via MutationObserver (consistent with other entry points). */
-  function waitForOrderTabElement(id, callback) {
-    const element = document.getElementById(id)
-    if (element) {
-      callback(element)
-      return
-    }
-    const observer = new MutationObserver(() => {
-      const el = document.getElementById(id)
-      if (el) {
-        observer.disconnect()
-        callback(el)
-      }
-    })
-    observer.observe(document.body, { childList: true, subtree: true })
-  }
-
-  /**
-   * Lazy-mounts an ExtJS panel into the plugin tab container.
-   * Merge order: xtype/renderTo/width, then extConfig, then core fields (order, orderId, config, isCreateMode).
-   *
-   * The Ext instance is created once per tab key when the user first selects the tab. Later changes to
-   * Vue’s `order` (after API load, save, etc.) are not pushed into Ext — plugin panels must implement
-   * their own listeners, polling, or `load` hooks if they need live data.
-   */
-  function mountExtJSOrderPlugin(tab) {
-    if (mountedExtPluginComponents.value[tab.key]) {
-      return
-    }
-    const containerId = `ms3-order-tab-${tab.key}`
-    waitForOrderTabElement(containerId, container => {
-      try {
-        if (typeof Ext === 'undefined') {
-          console.error('[OrderView] Ext is not defined')
-          return
-        }
-        const extComponent = Ext.create({
-          xtype: tab.xtype,
-          renderTo: container,
-          width: '100%',
-          ...tab.extConfig,
-          order: order.value,
-          orderId: orderId.value,
-          config: managerConfig.value,
-          isCreateMode: isCreateMode.value,
-        })
-        mountedExtPluginComponents.value[tab.key] = extComponent
-      } catch (error) {
-        console.error(`[OrderView] Failed to mount ExtJS order tab ${tab.key}:`, error)
-      }
-    })
-  }
-
-  function destroyPluginExtComponents() {
-    Object.keys(mountedExtPluginComponents.value).forEach(key => {
-      const component = mountedExtPluginComponents.value[key]
-      if (component && typeof component.destroy === 'function') {
-        try {
-          component.destroy()
-        } catch (e) {
-          console.warn(`[OrderView] Error destroying plugin ExtJS component ${key}:`, e)
-        }
-      }
-    })
-    mountedExtPluginComponents.value = {}
-  }
-
   watch(
-    () => orderTabsConfig.value.map(t => t.key),
+    () => tabs.orderTabsConfig.value.map(t => t.key),
     keys => {
       if (keys.length === 0) return
-      if (!keys.includes(orderActiveTab.value)) {
-        orderActiveTab.value = keys[0]
+      if (!keys.includes(tabs.orderActiveTab.value)) {
+        tabs.orderActiveTab.value = keys[0]
       }
     },
     { immediate: true }
   )
 
-  watch(orderActiveTab, () => {
+  watch(tabs.orderActiveTab, () => {
     nextTick(() => {
-      const tab = orderTabsConfig.value.find(t => t.key === orderActiveTab.value)
+      const tab = tabs.orderTabsConfig.value.find(t => t.key === tabs.orderActiveTab.value)
       if (
         tab &&
         tab.kind === 'plugin' &&
         tab.type === 'extjs' &&
         tab.xtype &&
-        !mountedExtPluginComponents.value[tab.key]
+        !tabs.mountedExtPluginComponents.value[tab.key]
       ) {
-        mountExtJSOrderPlugin(tab)
+        tabs.mountExtJSOrderPlugin(tab)
       }
     })
   })
 
   onBeforeUnmount(() => {
-    destroyPluginExtComponents()
+    tabs.destroyPluginExtComponents()
     if (window.MS3OrderTabsRegistry) {
       window.MS3OrderTabsRegistry._onUnmounted()
     }
@@ -1657,97 +186,98 @@ export function useOrderView() {
 
   onMounted(async () => {
     if (isCreateMode.value) {
-      await initEmptyOrder()
+      await load.initEmptyOrder()
     } else {
-      await loadOrder()
+      await load.loadOrder()
     }
   })
 
   const orderContext = {
     order,
-    saving,
+    saving: save.saving,
     isDraft,
     isCreateMode,
-    finalizing,
-    customerSuggestions,
-    searchingCustomers,
+    finalizing: save.finalizing,
+    customerSuggestions: customer.customerSuggestions,
+    searchingCustomers: customer.searchingCustomers,
     ...fieldHelpers,
     formatDate,
     formatPrice,
     getFieldWidthClass,
-    saveOrder,
-    createOrder,
+    saveOrder: save.saveOrder,
+    createOrder: save.createOrder,
     goBack,
-    confirmFinalizeOrder,
-    handleProductAction,
-    openAddProductDialog,
-    searchCustomers,
-    onCustomerSelect,
-    clearCustomer,
-    recalculateOrderCost,
-    recalculatingCost,
-    costRecalcWarnings,
-    manualDeliveryCost,
-    hasUnsavedShippingPaymentChanges,
+    confirmFinalizeOrder: save.confirmFinalizeOrder,
+    handleProductAction: products.handleProductAction,
+    openAddProductDialog: products.openAddProductDialog,
+    searchCustomers: customer.searchCustomers,
+    onCustomerSelect: customer.onCustomerSelect,
+    clearCustomer: customer.clearCustomer,
+    recalculateOrderCost: costRecalc.recalculateOrderCost,
+    recalculatingCost: costRecalc.recalculatingCost,
+    costRecalcWarnings: costRecalc.costRecalcWarnings,
+    manualDeliveryCost: costRecalc.manualDeliveryCost,
+    hasUnsavedShippingPaymentChanges: costRecalc.hasUnsavedShippingPaymentChanges,
   }
+
   return {
     orderContext,
-    registerPluginTab,
-    pluginVueProps,
+    registerPluginTab: tabs.registerPluginTab,
+    pluginVueProps: tabs.pluginVueProps,
 
-    loading,
-    saving,
+    loading: load.loading,
+    saving: save.saving,
     order,
-    products,
-    productsColumns,
-    logs,
-    orderFieldsBySection,
-    orderExtraFields,
-    orderActiveTab,
-    orderTabsConfig,
+    products: load.products,
+    productsColumns: load.productsColumns,
+    logs: load.logs,
+    orderFieldsBySection: load.orderFieldsBySection,
+    orderExtraFields: load.orderExtraFields,
+    orderActiveTab: tabs.orderActiveTab,
+    orderTabsConfig: tabs.orderTabsConfig,
     isCreateMode,
-    selectedCustomer,
-    createCustomerFromData,
-    addressFieldsBySection,
-    addressExtraFields,
+    selectedCustomer: customer.selectedCustomer,
+    createCustomerFromData: customer.createCustomerFromData,
+    addressFieldsBySection: load.addressFieldsBySection,
+    addressExtraFields: load.addressExtraFields,
     goBack,
     formatPrice,
 
-    editProductDialogVisible,
-    editingProduct,
-    editProductForm,
-    savingProduct,
-    optionsEditMode,
-    optionsTableData,
-    productOptionFields,
-    optionsJsonText,
-    optionsJsonError,
-    editedProductCost,
-    switchOptionsMode,
-    onOptionTypeChange,
-    onFieldKeyChange,
-    syncTableToJson,
-    addOptionRow,
-    removeOptionRow,
-    saveEditedProduct,
-    cancelEditProduct,
-
-    addProductDialogVisible,
-    selectedProduct,
-    productSuggestions,
-    searchingProducts,
-    addProductForm,
-    savingNewProduct,
-    newProductCost,
-    searchProducts,
-    onProductSelect,
-    saveNewProduct,
-    cancelAddProduct,
-
-    showDuplicateDialog,
-    duplicateCustomer,
-    cancelDuplicateDialog,
-    useDuplicateCustomer,
-    createNewCustomerAnyway,
+    editProductDialogVisible: products.editProductDialogVisible,
+    editingProduct: products.editingProduct,
+    editProductForm: products.editProductForm,
+    savingProduct: products.savingProduct,
+    optionsEditMode: options.optionsEditMode,
+    optionsTableData: options.optionsTableData,
+    productOptionFields: options.productOptionFields,
+    optionsJsonText: options.optionsJsonText,
+    optionsJsonError: options.optionsJsonError,
+    editedProductCost: products.editedProductCost,
+    switchOptionsMode: options.switchOptionsMode,
+    onOptionTypeChange: options.onOptionTypeChange,
+    onFieldKeyChange: options.onFieldKeyChange,
+    syncTableToJson: options.syncTableToJson,
+    addOptionRow: options.addOptionRow,
+    removeOptionRow: options.removeOptionRow,
+    saveEditedProduct: products.saveEditedProduct,
+    cancelEditProduct: products.cancelEditProduct,
+
+    addProductDialogVisible: products.addProductDialogVisible,
+    selectedProduct: products.selectedProduct,
+    productSuggestions: products.productSuggestions,
+    searchingProducts: products.searchingProducts,
+    addProductForm: products.addProductForm,
+    savingNewProduct: products.savingNewProduct,
+    newProductCost: products.newProductCost,
+    searchProducts: products.searchProducts,
+    onProductSelect: products.onProductSelect,
+    saveNewProduct: products.saveNewProduct,
+    cancelAddProduct: products.cancelAddProduct,
+
+    showDuplicateDialog: customer.showDuplicateDialog,
+    duplicateCustomer: customer.duplicateCustomer,
+    cancelDuplicateDialog: customer.cancelDuplicateDialog,
+    useDuplicateCustomer: customer.useDuplicateCustomer,
+    createNewCustomerAnyway: customer.createNewCustomerAnyway,
   }
 }