@feedmepos/mf-order-setting 0.0.92 → 0.0.93

package/src/views/display-system/legacy-ods/LegacyOdsEditorDialog.vue

@@ -0,0 +1,1677 @@
+<script setup lang="ts">
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { RestaurantSelector, useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { MediaPickerModal, type MediaSelection } from '@feedmepos/media-picker'
+import ColorOverrideDialog from './ColorOverrideDialog.vue'
+import { useLegacyOdsAccess } from '@/composables/useLegacyOdsAccess'
+import {
+  type BaseBrandKit,
+  type BrandKit,
+  type OdsConfigEntry,
+  type OdsDisplayConfig,
+  type OdsFooterMode,
+  type OdsLayoutConfig,
+  type OrderGroupingMode,
+  type OrderStatusBoardLayout,
+  type RecursivePartial,
+  type StatusSectionTemplateName
+} from '@/modules/display-system/legacy-ods/interface'
+
+interface ButtonGroupItemWithValue<T = string> {
+  label: string
+  value: T
+  icon?: string | null
+  disabled?: boolean
+}
+
+const props = defineProps<{
+  modelValue: boolean
+  entry: OdsConfigEntry
+  editingIndex: number
+  allEntries: OdsConfigEntry[]
+  brandkit: BrandKit
+  colorFields: { key: string; title: string; description: string }[]
+  saving?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'save', entry: OdsConfigEntry): void
+  (e: 'cancel'): void
+}>()
+
+const Core = useCoreStore()
+const { t } = useI18n()
+
+const { canAccessOdsTemplateSettings, isAdvancedCustomizationEnabled } = useLegacyOdsAccess()
+
+const show = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+type OdsPresetKey = 'preset1' | 'preset2'
+
+const draft = ref<OdsConfigEntry>({ isDefault: false })
+
+const cloneEntry = (): OdsConfigEntry => JSON.parse(JSON.stringify(props.entry))
+
+const syncDraft = () => {
+  const entry = cloneEntry()
+  if (!entry.display) entry.display = createDefaultOdsDisplay()
+  if (!entry.layout) {
+    entry.layout = JSON.parse(JSON.stringify(ODS_PRESETS[0].layout))
+  }
+  draft.value = entry
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v) syncDraft()
+  }
+)
+
+const anotherDefaultExists = computed(() =>
+  props.allEntries.some((e, i) => e.isDefault && i !== props.editingIndex)
+)
+
+const selectedRestaurantIds = computed({
+  get: () => draft.value.restaurantIds ?? [],
+  set: (v: string[] | null | undefined) => {
+    draft.value.restaurantIds = v ?? []
+  }
+})
+
+const DEFAULT_CURRENT_ORDER = {
+  enabled: true
+} satisfies NonNullable<OdsDisplayConfig['currentOrder']>
+
+const DEFAULT_ODS_DISPLAY: OdsDisplayConfig = {
+  groupBy: 'type',
+  statusLayout: 'horizontal',
+  statusSlidingPeriod: 10000,
+  currentOrder: { ...DEFAULT_CURRENT_ORDER },
+  showProgressBar: false,
+  statusColumnCount: 1,
+  showDeliveryIcons: true,
+  showOrderTypeTabs: false,
+  showOrderCount: false,
+  showEstimatedTime: false,
+  hideCompletedOrders: false,
+  statusTemplate: 'default'
+}
+
+const createDefaultOdsDisplay = (): OdsDisplayConfig => ({
+  ...DEFAULT_ODS_DISPLAY,
+  currentOrder: { ...DEFAULT_CURRENT_ORDER }
+})
+
+const DEFAULT_ODS_LAYOUT: OdsLayoutConfig = {
+  background: {
+    url: '/images/feedme-bg.png',
+    size: 'cover',
+    position: 'center'
+  },
+  sidePanel: null,
+  boardWidthPercent: 100,
+  boardAlign: 'right',
+  footerMode: 'feedme'
+}
+
+const ensureDisplay = () => {
+  if (!draft.value.display) {
+    draft.value.display = createDefaultOdsDisplay()
+  }
+}
+
+const resolveDisplay = (display?: OdsDisplayConfig): OdsDisplayConfig => ({
+  ...createDefaultOdsDisplay(),
+  ...display,
+  currentOrder: {
+    ...DEFAULT_CURRENT_ORDER,
+    ...display?.currentOrder
+  }
+})
+
+const odsDisplay = computed<OdsDisplayConfig>(() => resolveDisplay(draft.value.display))
+
+const updateDisplay = <K extends keyof OdsDisplayConfig>(key: K, value: OdsDisplayConfig[K]) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureDisplay()
+  draft.value.display![key] = value
+}
+
+const updateCurrentOrderEnabled = (enabled: boolean) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureDisplay()
+  draft.value.display!.currentOrder = {
+    ...(draft.value.display!.currentOrder ?? {}),
+    enabled
+  }
+}
+
+const updateHideCompletedOrders = (hide: boolean) => {
+  ensureDisplay()
+  draft.value.display!.hideCompletedOrders = hide
+}
+
+const resetDisplay = () => {
+  if (!canAccessOdsTemplateSettings.value) return
+  draft.value.display = {
+    ...createDefaultOdsDisplay(),
+    hideCompletedOrders: odsDisplay.value.hideCompletedOrders
+  }
+}
+
+const ensureLayout = () => {
+  if (!draft.value.layout) {
+    draft.value.layout = {}
+  }
+}
+
+const resolveLayout = (layout?: OdsLayoutConfig): OdsLayoutConfig => {
+  if (!layout) return DEFAULT_ODS_LAYOUT
+  return {
+    ...DEFAULT_ODS_LAYOUT,
+    ...layout,
+    background: layout.background === undefined ? DEFAULT_ODS_LAYOUT.background : layout.background,
+    sidePanel: layout.sidePanel === undefined ? DEFAULT_ODS_LAYOUT.sidePanel : layout.sidePanel
+  }
+}
+
+const odsLayout = computed<OdsLayoutConfig>(() => resolveLayout(draft.value.layout))
+
+const updateLayoutField = <K extends keyof OdsLayoutConfig>(key: K, value: OdsLayoutConfig[K]) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureLayout()
+  draft.value.layout![key] = value
+}
+
+const resetLayout = () => {
+  if (!canAccessOdsTemplateSettings.value) return
+  draft.value.layout = undefined
+  syncBackgroundSource()
+  syncSidePanelSource()
+}
+
+type OdsPreset = {
+  key: OdsPresetKey
+  labelKey: string
+  layout: OdsLayoutConfig
+  display: OdsDisplayConfig
+}
+
+const ODS_PRESETS: OdsPreset[] = [
+  {
+    key: 'preset1',
+    labelKey: 'order.displaySystem.legacyOds.preset1',
+    layout: {
+      background: {
+        url: '/images/feedme-bg.png',
+        size: 'cover',
+        position: 'center'
+      },
+      sidePanel: null,
+      boardWidthPercent: 100,
+      boardAlign: 'right'
+    },
+    display: {
+      groupBy: 'type',
+      statusLayout: 'horizontal',
+      statusSlidingPeriod: 10000,
+      showProgressBar: false,
+      statusColumnCount: 1,
+      showDeliveryIcons: true,
+      showOrderTypeTabs: false,
+      showOrderCount: false,
+      showEstimatedTime: false,
+      hideCompletedOrders: false,
+      statusTemplate: 'default',
+      currentOrder: {
+        enabled: true
+      }
+    }
+  },
+  {
+    key: 'preset2',
+    labelKey: 'order.displaySystem.legacyOds.preset2',
+    layout: {
+      background: null,
+      sidePanel: {
+        url: '/images/feedme-side.png',
+        position: 'left',
+        widthPercent: 33
+      },
+      boardWidthPercent: 100,
+      boardAlign: 'right'
+    },
+    display: {
+      groupBy: 'status',
+      statusLayout: 'horizontal',
+      statusSlidingPeriod: 10000,
+      showProgressBar: true,
+      statusColumnCount: 1,
+      showDeliveryIcons: true,
+      showOrderTypeTabs: false,
+      showOrderCount: false,
+      showEstimatedTime: false,
+      hideCompletedOrders: false,
+      statusTemplate: 'default',
+      currentOrder: {
+        enabled: true
+      }
+    }
+  }
+]
+
+const presetItems = computed<ButtonGroupItemWithValue<OdsPresetKey>[]>(() =>
+  ODS_PRESETS.map((preset) => ({
+    label: t(preset.labelKey),
+    value: preset.key
+  }))
+)
+
+const stableStringify = (value: unknown): string => {
+  if (Array.isArray(value)) {
+    return `[${value.map((item) => stableStringify(item)).join(',')}]`
+  }
+  if (value && typeof value === 'object') {
+    return `{${Object.keys(value)
+      .sort()
+      .map(
+        (key) =>
+          `${JSON.stringify(key)}:${stableStringify((value as Record<string, unknown>)[key])}`
+      )
+      .join(',')}}`
+  }
+  return JSON.stringify(value) ?? 'undefined'
+}
+
+const presetDisplayKey = (display: OdsDisplayConfig) =>
+  stableStringify({ ...display, hideCompletedOrders: undefined })
+
+const activePresetKey = computed<OdsPresetKey | null>(
+  () =>
+    ODS_PRESETS.find(
+      (preset) =>
+        presetDisplayKey(resolveDisplay(preset.display)) === presetDisplayKey(odsDisplay.value) &&
+        stableStringify(resolveLayout(preset.layout)) === stableStringify(odsLayout.value)
+    )?.key ?? null
+)
+
+const applyPreset = (presetKey: OdsPresetKey) => {
+  const preset = ODS_PRESETS.find((item) => item.key === presetKey)
+  if (!preset) return
+
+  const hideCompletedOrders = odsDisplay.value.hideCompletedOrders
+  draft.value.layout = JSON.parse(JSON.stringify(preset.layout))
+  draft.value.display = {
+    ...JSON.parse(JSON.stringify(preset.display)),
+    hideCompletedOrders
+  }
+  syncBackgroundSource()
+  syncSidePanelSource()
+}
+
+type BackgroundSource = 'disable' | 'default' | 'left' | 'custom'
+
+const ODS_BACKGROUND_DEFAULT_URL = '/images/feedme-bg.png'
+const ODS_BACKGROUND_LEFT_URL = '/images/feedme-bg-left-image.png'
+
+const backgroundSource = ref<BackgroundSource>('default')
+
+const getDefaultBackground = (url: string = ODS_BACKGROUND_DEFAULT_URL) => ({
+  url,
+  size: 'cover',
+  position: 'center'
+})
+
+const syncBackgroundSource = () => {
+  const bg = draft.value.layout?.background
+  if (bg === null) {
+    backgroundSource.value = 'disable'
+  } else if (!bg || bg.url === ODS_BACKGROUND_DEFAULT_URL) {
+    backgroundSource.value = 'default'
+  } else if (bg.url === ODS_BACKGROUND_LEFT_URL) {
+    backgroundSource.value = 'left'
+  } else {
+    backgroundSource.value = 'custom'
+  }
+}
+
+const setBackgroundSource = (source: BackgroundSource) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureLayout()
+  if (source === 'disable') {
+    draft.value.layout!.background = null
+    backgroundSource.value = 'disable'
+    return
+  }
+  if (source === 'custom') {
+    const current = draft.value.layout!.background
+    if (
+      current &&
+      current !== null &&
+      current.url !== ODS_BACKGROUND_DEFAULT_URL &&
+      current.url !== ODS_BACKGROUND_LEFT_URL
+    ) {
+      draft.value.layout!.background = current
+    } else {
+      draft.value.layout!.background = {
+        url: '',
+        size: current?.size ?? 'cover',
+        position: current?.position ?? 'center'
+      }
+    }
+    backgroundSource.value = 'custom'
+    return
+  }
+  const presetUrl = source === 'left' ? ODS_BACKGROUND_LEFT_URL : ODS_BACKGROUND_DEFAULT_URL
+  const current = draft.value.layout!.background
+  draft.value.layout!.background = {
+    ...(current && current !== null ? current : getDefaultBackground(presetUrl)),
+    url: presetUrl
+  }
+  backgroundSource.value = source
+}
+
+const hasCustomBackground = computed(() => {
+  const url = draft.value.layout?.background?.url
+  return !!url && url !== ODS_BACKGROUND_DEFAULT_URL && url !== ODS_BACKGROUND_LEFT_URL
+})
+
+type SidePanelSource = 'disable' | 'default' | 'custom'
+
+const sidePanelSource = ref<SidePanelSource>('default')
+
+const ODS_SIDE_PANEL_DEFAULT_URL = '/images/feedme-side.png'
+
+const getDefaultSidePanel = () => ({
+  url: ODS_SIDE_PANEL_DEFAULT_URL,
+  position: 'left' as const,
+  widthPercent: 33
+})
+
+const syncSidePanelSource = () => {
+  const sp = draft.value.layout?.sidePanel
+  if (!sp) {
+    sidePanelSource.value = 'disable'
+  } else if (sp.url === ODS_SIDE_PANEL_DEFAULT_URL) {
+    sidePanelSource.value = 'default'
+  } else {
+    sidePanelSource.value = 'custom'
+  }
+}
+
+const setSidePanelSource = (source: SidePanelSource) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureLayout()
+  if (source === 'disable') {
+    draft.value.layout!.sidePanel = null
+    sidePanelSource.value = 'disable'
+    return
+  }
+  if (source === 'default') {
+    const current = draft.value.layout!.sidePanel
+    draft.value.layout!.sidePanel = {
+      ...(current && current !== null ? current : getDefaultSidePanel()),
+      url: ODS_SIDE_PANEL_DEFAULT_URL
+    }
+    sidePanelSource.value = 'default'
+    return
+  }
+
+  const current = draft.value.layout!.sidePanel
+  if (current && current !== null && current.url !== ODS_SIDE_PANEL_DEFAULT_URL) {
+    draft.value.layout!.sidePanel = current
+  } else {
+    draft.value.layout!.sidePanel = {
+      url: '',
+      position: current?.position ?? 'left',
+      widthPercent: current?.widthPercent ?? 33
+    }
+  }
+  sidePanelSource.value = 'custom'
+}
+
+const hasCustomSidePanel = computed(() => {
+  const url = draft.value.layout?.sidePanel?.url
+  return !!url && url !== ODS_SIDE_PANEL_DEFAULT_URL
+})
+
+type MediaTarget = 'background' | 'sidePanel'
+const mediaPickerOpen = ref(false)
+const mediaTarget = ref<MediaTarget>('background')
+
+const pickImage = (target: MediaTarget) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  mediaTarget.value = target
+  mediaPickerOpen.value = true
+}
+
+const selectImage = (selection: MediaSelection) => {
+  mediaPickerOpen.value = false
+  if (!canAccessOdsTemplateSettings.value) return
+  ensureLayout()
+  if (mediaTarget.value === 'background') {
+    draft.value.layout!.background = {
+      url: selection.url,
+      size: draft.value.layout!.background?.size ?? 'cover',
+      position: draft.value.layout!.background?.position ?? 'center'
+    }
+    backgroundSource.value = 'custom'
+  } else {
+    draft.value.layout!.sidePanel = {
+      url: selection.url,
+      position: draft.value.layout!.sidePanel?.position ?? 'left',
+      widthPercent: draft.value.layout!.sidePanel?.widthPercent ?? 30,
+      objectFit: draft.value.layout!.sidePanel?.objectFit ?? 'cover'
+    }
+    sidePanelSource.value = 'custom'
+  }
+}
+
+const overrideDialogOpen = ref(false)
+const baseBrandkit = computed(() => ({ colors: props.brandkit.colors }) as BaseBrandKit)
+
+const getFromPath = (obj: any, path: string) =>
+  path.split('.').reduce((acc, key) => (acc && typeof acc === 'object' ? acc[key] : undefined), obj)
+
+const setAtPath = (obj: any, path: string, value: unknown) => {
+  const keys = path.split('.')
+  let current = obj
+  keys.forEach((key, idx) => {
+    if (idx === keys.length - 1) {
+      current[key] = value
+      return
+    }
+    current[key] = current[key] ?? {}
+    current = current[key]
+  })
+}
+
+const filterColorOverride = (override: RecursivePartial<BaseBrandKit> | undefined) => {
+  if (!override) return undefined
+
+  const allowedOverride: RecursivePartial<BaseBrandKit> = {}
+  props.colorFields.forEach((field) => {
+    const value = getFromPath(override, field.key)
+    if (value !== undefined) {
+      setAtPath(allowedOverride, field.key, value)
+    }
+  })
+
+  return Object.keys(allowedOverride).length ? allowedOverride : undefined
+}
+
+const overrideCount = computed(() => {
+  const existing = draft.value.brandkitOverride ?? {}
+  return props.colorFields.reduce((acc, field) => {
+    return acc + (getFromPath(existing, field.key) !== undefined ? 1 : 0)
+  }, 0)
+})
+
+const onSaveOverride = (override: RecursivePartial<BaseBrandKit> | undefined) => {
+  if (!canAccessOdsTemplateSettings.value) return
+  const allowedOverride = filterColorOverride(override)
+  if (allowedOverride) {
+    draft.value.brandkitOverride = allowedOverride
+  } else {
+    delete draft.value.brandkitOverride
+  }
+}
+
+const groupByItems = computed<ButtonGroupItemWithValue<OrderGroupingMode>[]>(() => [
+  { label: t('order.displaySystem.legacyOds.groupByStatus'), value: 'status' },
+  { label: t('order.displaySystem.legacyOds.groupByType'), value: 'type' }
+])
+
+const statusLayoutItems = computed<ButtonGroupItemWithValue<OrderStatusBoardLayout>[]>(() => [
+  { label: t('order.displaySystem.legacyOds.layoutHorizontal'), value: 'horizontal' },
+  { label: t('order.displaySystem.legacyOds.layoutVertical'), value: 'vertical' }
+])
+
+const statusColumnItems: ButtonGroupItemWithValue<number>[] = [
+  { label: '1', value: 1 },
+  { label: '2', value: 2 },
+  { label: '3', value: 3 }
+]
+
+const boardAlignItems = computed<ButtonGroupItemWithValue[]>(() => [
+  { label: t('order.displaySystem.legacyOds.alignLeft'), value: 'left' },
+  { label: t('order.displaySystem.legacyOds.alignCenter'), value: 'center' },
+  { label: t('order.displaySystem.legacyOds.alignRight'), value: 'right' }
+])
+
+const sidePanelPositionItems = computed<ButtonGroupItemWithValue[]>(() => [
+  { label: t('order.displaySystem.legacyOds.alignLeft'), value: 'left' },
+  { label: t('order.displaySystem.legacyOds.alignRight'), value: 'right' }
+])
+
+const statusTemplateItems = computed<ButtonGroupItemWithValue<StatusSectionTemplateName>[]>(() => [
+  { label: t('order.displaySystem.legacyOds.templateDefault'), value: 'default' },
+  { label: t('order.displaySystem.legacyOds.templateBorderedCard'), value: 'bordered-card' },
+  { label: t('order.displaySystem.legacyOds.templateFloatingTab'), value: 'floating-tab' },
+  { label: t('order.displaySystem.legacyOds.templateCenteredPill'), value: 'centered-pill' }
+])
+
+const footerModeItems = computed<ButtonGroupItemWithValue<OdsFooterMode>[]>(() => [
+  { label: t('order.displaySystem.legacyOds.footerModeFeedme'), value: 'feedme' },
+  { label: t('order.displaySystem.legacyOds.footerModeSettingsIcon'), value: 'settingsIcon' }
+])
+
+const ODS_PREVIEW_WIDTH = 1920
+const ODS_PREVIEW_HEIGHT = 1080
+
+const previewViewportRef = ref<HTMLElement | null>(null)
+const previewScale = ref(1)
+let resizeObserver: ResizeObserver | null = null
+
+const odsPreviewBaseUrl = computed(() => 'https://v2-dev.feedme-ods.pages.dev/')
+
+const resolveAssetPreviewUrl = (url: string) => {
+  if (!url.startsWith('/')) return url
+  if (!odsPreviewBaseUrl.value) return url
+  try {
+    return new URL(url, odsPreviewBaseUrl.value).toString()
+  } catch {
+    return url
+  }
+}
+
+const encodeUrlSafeBase64 = (value: string) => {
+  const bytes = new TextEncoder().encode(value)
+  const binary = Array.from(bytes, (byte) => String.fromCharCode(byte)).join('')
+  return window.btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '')
+}
+
+const previewBrandkitOverride = computed<RecursivePartial<BaseBrandKit> | undefined>(() => {
+  const override = draft.value.brandkitOverride
+  if (!override) return undefined
+
+  const previewOverride: RecursivePartial<BaseBrandKit> = {}
+  props.colorFields.forEach((field) => {
+    const overrideValue = getFromPath(override, field.key)
+    if (overrideValue === undefined) return
+    if (overrideValue === getFromPath(props.brandkit, field.key)) return
+    setAtPath(previewOverride, field.key, overrideValue)
+  })
+
+  return Object.keys(previewOverride).length ? previewOverride : undefined
+})
+
+const previewBrandKit = computed<BrandKit>(() => ({
+  ...props.brandkit,
+  ods: [
+    {
+      isDefault: true,
+      layout: draft.value.layout,
+      display: draft.value.display,
+      brandkitOverride: previewBrandkitOverride.value
+    }
+  ]
+}))
+
+const previewUrl = computed(() => {
+  if (!odsPreviewBaseUrl.value) return ''
+  try {
+    const url = new URL(odsPreviewBaseUrl.value, window.location.origin)
+    url.searchParams.set('preview', '1')
+    url.searchParams.set('brandKit', encodeUrlSafeBase64(JSON.stringify(previewBrandKit.value)))
+    return url.toString()
+  } catch {
+    return ''
+  }
+})
+
+const openPreviewInNewTab = () => {
+  if (previewUrl.value) {
+    window.open(previewUrl.value, '_blank', 'noopener,noreferrer')
+  }
+}
+
+const updatePreviewScale = () => {
+  const vp = previewViewportRef.value
+  if (!vp) {
+    previewScale.value = 1
+    return
+  }
+  const wScale = vp.clientWidth / ODS_PREVIEW_WIDTH
+  const hScale = vp.clientHeight / ODS_PREVIEW_HEIGHT
+  previewScale.value = Math.min(wScale, hScale, 1)
+}
+
+watch(
+  previewViewportRef,
+  (vp) => {
+    resizeObserver?.disconnect()
+    resizeObserver = null
+    if (vp) {
+      resizeObserver = new ResizeObserver(() => updatePreviewScale())
+      resizeObserver.observe(vp)
+      updatePreviewScale()
+    }
+  },
+  { flush: 'post' }
+)
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v) {
+      syncBackgroundSource()
+      syncSidePanelSource()
+    }
+  }
+)
+
+onUnmounted(() => resizeObserver?.disconnect())
+
+const onClose = () => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  emit('cancel')
+  show.value = false
+}
+
+const onSave = () => {
+  const entry = JSON.parse(JSON.stringify(draft.value)) as OdsConfigEntry
+  if (!entry.display) entry.display = createDefaultOdsDisplay()
+  if (!entry.layout) {
+    entry.layout = JSON.parse(JSON.stringify(ODS_PRESETS[0].layout))
+  }
+  const allowedOverride = filterColorOverride(entry.brandkitOverride)
+  if (allowedOverride) {
+    entry.brandkitOverride = allowedOverride
+  } else {
+    delete entry.brandkitOverride
+  }
+  emit('save', entry)
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="fade">
+      <div
+        v-if="show"
+        class="fixed inset-0 flex flex-col w-screen h-dvh bg-fm-color-neutral-white"
+        style="z-index: 50"
+        tabindex="-1"
+        @keyup.esc="onClose"
+      >
+        <div
+          class="flex items-center px-24 pt-16 pb-8 border-b border-fm-color-neutral-gray-100 space-x-4"
+        >
+          <p class="fm-typo-en-title-sm-600 mr-auto">
+            {{ t('order.displaySystem.legacyOds.odsConfiguration')
+            }}{{ draft.label ? ` - ${draft.label}` : '' }}
+          </p>
+          <FmButton
+            :label="t('order.displaySystem.legacyOds.cancel')"
+            variant="tertiary"
+            @click="onClose"
+          />
+          <FmButton
+            :label="t('order.displaySystem.legacyOds.confirm')"
+            variant="primary"
+            :disabled="saving"
+            @click="onSave"
+          />
+        </div>
+
+        <div class="flex flex-col flex-1 overflow-scroll w-full px-24 py-24">
+          <div class="flex flex-col gap-24 max-w-[1600px] w-full mx-auto">
+            <div class="rounded-lg border border-fm-color-neutral-gray-100 p-16 space-y-12">
+              <div class="grid grid-cols-1 md:grid-cols-2 gap-12">
+                <FmTextField
+                  v-model="draft.label"
+                  :label="t('order.displaySystem.legacyOds.label')"
+                  placeholder="e.g. Default, Flagship, Express"
+                />
+                <div class="flex items-center gap-12 pt-24">
+                  <FmSwitch
+                    v-model="draft.isDefault"
+                    :label="t('order.displaySystem.legacyOds.defaultConfiguration')"
+                  />
+                </div>
+              </div>
+              <div
+                v-if="draft.isDefault && anotherDefaultExists"
+                class="flex items-start gap-8 rounded-lg bg-fm-color-warning-50 border border-fm-color-warning-200 px-12 py-8"
+              >
+                <FmIcon
+                  name="warning"
+                  size="sm"
+                  class="text-fm-color-warning-500 flex-shrink-0 mt-2"
+                />
+                <span class="fm-typo-en-body-sm-400 text-fm-color-warning-700">
+                  {{ t('order.displaySystem.legacyOds.defaultWarning') }}
+                </span>
+              </div>
+              <div v-if="!draft.isDefault">
+                <RestaurantSelector
+                  v-model="selectedRestaurantIds"
+                  multiple
+                  :managable-only="false"
+                />
+              </div>
+              <div v-else class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                {{ t('order.displaySystem.legacyOds.restaurantInfo') }}
+              </div>
+            </div>
+
+            <div class="grid grid-cols-1 lg:grid-cols-2 gap-24 items-start">
+              <div class="space-y-24">
+                <div class="rounded-lg overflow-hidden border border-fm-color-neutral-gray-100">
+                  <div
+                    class="py-16 px-24 bg-fm-color-neutral-gray-50 border-b border-fm-color-neutral-gray-100"
+                  >
+                    <div class="flex items-center gap-12 mb-8">
+                      <div
+                        class="inline-flex items-center justify-center w-10 h-10 bg-fm-color-neutral-gray-100 rounded-full"
+                      >
+                        <FmIcon
+                          name="dashboard_customize"
+                          class="text-fm-color-typo-secondary"
+                          size="md"
+                          outline
+                        />
+                      </div>
+                      <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+                        {{ t('order.displaySystem.legacyOds.selectPreset') }}
+                      </div>
+                    </div>
+                    <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                      {{ t('order.displaySystem.legacyOds.selectPresetDescription') }}
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                      <FmButtonGroup
+                        :items="presetItems"
+                        :model-value="presetItems.find((i) => i.value === activePresetKey) ?? null"
+                        @update:model-value="(v: any) => applyPreset(v.value)"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div class="rounded-lg overflow-hidden border border-fm-color-neutral-gray-100">
+                  <div
+                    class="py-16 px-24 bg-fm-color-neutral-gray-50 border-b border-fm-color-neutral-gray-100"
+                  >
+                    <div class="flex items-center gap-12 mb-8">
+                      <div
+                        class="inline-flex items-center justify-center w-10 h-10 bg-fm-color-neutral-gray-100 rounded-full"
+                      >
+                        <FmIcon
+                          name="visibility_off"
+                          class="text-fm-color-typo-secondary"
+                          size="md"
+                          outline
+                        />
+                      </div>
+                      <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+                        {{ t('order.displaySystem.legacyOds.hideCollectedOrders') }}
+                      </div>
+                    </div>
+                    <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                      {{ t('order.displaySystem.legacyOds.hideCollectedOrdersDescription') }}
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div
+                      class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                    >
+                      <FmSwitch
+                        :label="t('order.displaySystem.legacyOds.hideCollectedOrders')"
+                        :model-value="odsDisplay.hideCompletedOrders ?? false"
+                        @update:model-value="(v: boolean) => updateHideCompletedOrders(v)"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="canAccessOdsTemplateSettings"
+                  class="rounded-lg overflow-hidden border border-fm-color-neutral-gray-100"
+                >
+                  <div
+                    class="py-16 px-24 bg-fm-color-secondary-50 border-b border-fm-color-neutral-gray-100"
+                  >
+                    <div class="flex items-center gap-12 mb-8">
+                      <div
+                        class="inline-flex items-center justify-center w-10 h-10 bg-fm-color-secondary-100 rounded-full"
+                      >
+                        <FmIcon
+                          name="monitor"
+                          class="text-fm-color-secondary-500"
+                          size="md"
+                          outline
+                        />
+                      </div>
+                      <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+                        {{ t('order.displaySystem.legacyOds.displaySettings') }}
+                      </div>
+                    </div>
+                    <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                      {{ t('order.displaySystem.legacyOds.displaySettingsDescription') }}
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="flex items-center justify-end gap-8">
+                      <FmButton
+                        icon="autorenew"
+                        :label="t('order.displaySystem.legacyOds.resetToDefault')"
+                        variant="plain"
+                        :disabled="!canAccessOdsTemplateSettings"
+                        @click="resetDisplay"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.colorOverride') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.colorOverrideConfigDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{
+                            t('order.displaySystem.legacyOds.colorsOverridden', {
+                              count: overrideCount
+                            })
+                          }}
+                        </div>
+                        <FmButton
+                          variant="secondary"
+                          icon="palette"
+                          :label="t('order.displaySystem.legacyOds.configure')"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @click="canAccessOdsTemplateSettings && (overrideDialogOpen = true)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.groupOrdersBy') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.groupOrdersByDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="groupByItems"
+                          :model-value="
+                            groupByItems.find((i) => i.value === odsDisplay.groupBy) ??
+                            groupByItems[0]
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: any) => updateDisplay('groupBy', v.value)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showCurrentOrder') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showCurrentOrderDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showCurrentOrder')"
+                          :model-value="odsDisplay.currentOrder?.enabled ?? true"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: boolean) => updateCurrentOrderEnabled(v)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.statusBoardLayout') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.statusBoardLayoutDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="statusLayoutItems"
+                          :model-value="
+                            statusLayoutItems.find((i) => i.value === odsDisplay.statusLayout) ??
+                            statusLayoutItems[0]
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: any) => updateDisplay('statusLayout', v.value)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    v-if="odsDisplay.groupBy === 'status' && odsDisplay.statusLayout !== 'vertical'"
+                    class="px-24 py-12"
+                  >
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.statusColumnCount') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.statusColumnCountDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="statusColumnItems"
+                          :model-value="
+                            statusColumnItems.find(
+                              (i) => i.value === odsDisplay.statusColumnCount
+                            ) ?? statusColumnItems[1]
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: any) => updateDisplay('statusColumnCount', v.value)
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.slidingInterval') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.slidingIntervalDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmStepperField
+                          :model-value="odsDisplay.statusSlidingPeriod / 1000"
+                          label="Sliding interval (seconds)"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          :min="1"
+                          :max="60"
+                          :step="1"
+                          :append-text="'s'"
+                          :max-fraction-digits="0"
+                          @update:model-value="
+                            (v: any) =>
+                              updateDisplay(
+                                'statusSlidingPeriod',
+                                Math.max(1000, Math.min(60000, (Number(v) || 10) * 1000))
+                              )
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showDeliveryIcons') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showDeliveryIconsDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showDeliveryIcons')"
+                          :model-value="odsDisplay.showDeliveryIcons"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: boolean) => updateDisplay('showDeliveryIcons', v)
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showOrderCount') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showOrderCountDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showOrderCount')"
+                          :model-value="odsDisplay.showOrderCount"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: boolean) => updateDisplay('showOrderCount', v)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showEstimatedTime') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showEstimatedTimeDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showEstimatedTime')"
+                          :model-value="odsDisplay.showEstimatedTime"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: boolean) => updateDisplay('showEstimatedTime', v)
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy === 'type'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showOrderTypeTabs') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showOrderTypeTabsDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showOrderTypeTabs')"
+                          :model-value="odsDisplay.showOrderTypeTabs"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: boolean) => updateDisplay('showOrderTypeTabs', v)
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="odsDisplay.groupBy !== 'status'" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.showProgressBar') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.showProgressBarDescription') }}
+                        </div>
+                      </div>
+                      <div
+                        class="bg-fm-color-neutral-gray-50 rounded-lg p-12 flex items-center justify-between"
+                      >
+                        <FmSwitch
+                          :label="t('order.displaySystem.legacyOds.showProgressBar')"
+                          :model-value="odsDisplay.showProgressBar"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: boolean) => updateDisplay('showProgressBar', v)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div
+                    v-if="
+                      isAdvancedCustomizationEnabled &&
+                      odsDisplay.groupBy === 'status' &&
+                      odsDisplay.statusLayout === 'horizontal'
+                    "
+                    class="px-24 py-12"
+                  >
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.statusTemplate') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.statusTemplateDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="statusTemplateItems"
+                          :model-value="
+                            statusTemplateItems.find(
+                              (i) => i.value === (odsDisplay.statusTemplate ?? 'default')
+                            ) ?? null
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="(v: any) => updateDisplay('statusTemplate', v.value)"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div
+                  v-if="canAccessOdsTemplateSettings"
+                  class="rounded-lg overflow-hidden border border-fm-color-neutral-gray-100"
+                >
+                  <div
+                    class="py-16 px-24 bg-fm-color-primary-50 border-b border-fm-color-neutral-gray-100"
+                  >
+                    <div class="flex items-center gap-12 mb-8">
+                      <div
+                        class="inline-flex items-center justify-center w-10 h-10 bg-fm-color-primary-100 rounded-full"
+                      >
+                        <FmIcon
+                          name="dashboard"
+                          class="text-fm-color-primary-500"
+                          size="md"
+                          outline
+                        />
+                      </div>
+                      <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+                        {{ t('order.displaySystem.legacyOds.layoutSettings') }}
+                      </div>
+                    </div>
+                    <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                      {{ t('order.displaySystem.legacyOds.layoutSettingsDescription') }}
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="flex items-center justify-end gap-8">
+                      <FmButton
+                        icon="autorenew"
+                        :label="t('order.displaySystem.legacyOds.resetToDefault')"
+                        variant="plain"
+                        :disabled="!canAccessOdsTemplateSettings"
+                        @click="resetLayout"
+                      />
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.backgroundImage') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.backgroundImageDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12 space-y-12">
+                        <div class="flex flex-wrap gap-12">
+                          <FmRadio
+                            :model-value="backgroundSource"
+                            :label="t('order.displaySystem.legacyOds.disable')"
+                            value="disable"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setBackgroundSource('disable')"
+                          />
+                          <FmRadio
+                            :model-value="backgroundSource"
+                            :label="t('order.displaySystem.legacyOds.defaultImage1')"
+                            value="default"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setBackgroundSource('default')"
+                          />
+                          <FmRadio
+                            :model-value="backgroundSource"
+                            :label="t('order.displaySystem.legacyOds.defaultImage2')"
+                            value="left"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setBackgroundSource('left')"
+                          />
+                          <FmRadio
+                            :model-value="backgroundSource"
+                            :label="t('order.displaySystem.legacyOds.custom')"
+                            value="custom"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setBackgroundSource('custom')"
+                          />
+                        </div>
+
+                        <div
+                          v-if="
+                            backgroundSource !== 'disable' &&
+                            (backgroundSource !== 'custom' || hasCustomBackground)
+                          "
+                          class="relative"
+                        >
+                          <div
+                            class="w-full h-[120px] border border-fm-color-neutral-gray-200 rounded-lg overflow-hidden bg-fm-color-neutral-white"
+                          >
+                            <img
+                              :src="resolveAssetPreviewUrl(odsLayout.background?.url ?? '')"
+                              class="w-full h-full object-contain"
+                            />
+                          </div>
+                          <div
+                            v-if="backgroundSource === 'custom'"
+                            class="mt-8 flex items-center gap-8"
+                          >
+                            <FmButton
+                              variant="secondary"
+                              icon="photo_library"
+                              :label="t('order.displaySystem.legacyOds.changeImage')"
+                              :disabled="!canAccessOdsTemplateSettings"
+                              @click="pickImage('background')"
+                            />
+                          </div>
+                        </div>
+
+                        <FmButton
+                          v-if="backgroundSource === 'custom' && !hasCustomBackground"
+                          variant="secondary"
+                          icon="photo_library"
+                          :label="t('order.displaySystem.legacyOds.chooseImage')"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @click="pickImage('background')"
+                        />
+
+                        <div
+                          v-if="backgroundSource === 'disable'"
+                          class="rounded-lg border border-dashed border-fm-color-neutral-gray-200 bg-white px-16 py-16"
+                        >
+                          <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                            {{ t('order.displaySystem.legacyOds.backgroundDisabled') }}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.sidePanelImage') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.sidePanelImageDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12 space-y-12">
+                        <div class="flex flex-wrap gap-12">
+                          <FmRadio
+                            :model-value="sidePanelSource"
+                            :label="t('order.displaySystem.legacyOds.disable')"
+                            value="disable"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setSidePanelSource('disable')"
+                          />
+                          <FmRadio
+                            :model-value="sidePanelSource"
+                            :label="t('order.displaySystem.legacyOds.defaultImage')"
+                            value="default"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setSidePanelSource('default')"
+                          />
+                          <FmRadio
+                            :model-value="sidePanelSource"
+                            :label="t('order.displaySystem.legacyOds.customImage')"
+                            value="custom"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @update:model-value="() => setSidePanelSource('custom')"
+                          />
+                        </div>
+
+                        <div
+                          v-if="sidePanelSource === 'disable'"
+                          class="rounded-lg border border-dashed border-fm-color-neutral-gray-200 bg-white px-16 py-16"
+                        >
+                          <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                            {{ t('order.displaySystem.legacyOds.sidePanelDisabled') }}
+                          </div>
+                        </div>
+
+                        <template v-else>
+                          <div
+                            v-if="sidePanelSource !== 'custom' || hasCustomSidePanel"
+                            class="relative"
+                          >
+                            <div
+                              class="w-full h-[120px] border border-fm-color-neutral-gray-200 rounded-lg overflow-hidden bg-fm-color-neutral-white"
+                            >
+                              <img
+                                :src="resolveAssetPreviewUrl(odsLayout.sidePanel?.url ?? '')"
+                                class="w-full h-full object-contain"
+                              />
+                            </div>
+                            <div
+                              v-if="sidePanelSource === 'custom'"
+                              class="mt-8 flex items-center gap-8"
+                            >
+                              <FmButton
+                                variant="secondary"
+                                icon="photo_library"
+                                :label="t('order.displaySystem.legacyOds.changeImage')"
+                                :disabled="!canAccessOdsTemplateSettings"
+                                @click="pickImage('sidePanel')"
+                              />
+                            </div>
+                          </div>
+
+                          <FmButton
+                            v-if="sidePanelSource === 'custom' && !hasCustomSidePanel"
+                            variant="secondary"
+                            icon="photo_library"
+                            :label="t('order.displaySystem.legacyOds.chooseImage')"
+                            :disabled="!canAccessOdsTemplateSettings"
+                            @click="pickImage('sidePanel')"
+                          />
+
+                          <template v-if="draft.layout?.sidePanel">
+                            <div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
+                              <div>
+                                <div class="fm-typo-en-body-sm-600 text-fm-color-typo-primary mb-4">
+                                  {{ t('order.displaySystem.legacyOds.position') }}
+                                </div>
+                                <FmButtonGroup
+                                  :items="sidePanelPositionItems"
+                                  :model-value="
+                                    sidePanelPositionItems.find(
+                                      (i) => i.value === odsLayout.sidePanel?.position
+                                    ) ?? sidePanelPositionItems[0]
+                                  "
+                                  :disabled="!canAccessOdsTemplateSettings"
+                                  @update:model-value="
+                                    (v: any) => {
+                                      if (!canAccessOdsTemplateSettings) return
+                                      ensureLayout()
+                                      if (draft.layout!.sidePanel) {
+                                        draft.layout!.sidePanel.position = v.value as
+                                          'left' | 'right'
+                                      }
+                                    }
+                                  "
+                                />
+                              </div>
+                              <div>
+                                <div class="fm-typo-en-body-sm-600 text-fm-color-typo-primary mb-4">
+                                  {{ t('order.displaySystem.legacyOds.widthPercent') }}
+                                </div>
+                                <FmTextField
+                                  type="number"
+                                  :model-value="String(odsLayout.sidePanel?.widthPercent ?? 30)"
+                                  placeholder="30"
+                                  :disabled="!canAccessOdsTemplateSettings"
+                                  @update:model-value="
+                                    (v: any) => {
+                                      if (!canAccessOdsTemplateSettings) return
+                                      ensureLayout()
+                                      if (draft.layout!.sidePanel) {
+                                        draft.layout!.sidePanel.widthPercent = Math.max(
+                                          1,
+                                          Math.min(80, Number(v) || 30)
+                                        )
+                                      }
+                                    }
+                                  "
+                                />
+                              </div>
+                            </div>
+                          </template>
+                        </template>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.boardWidth') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.boardWidthDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmStepperField
+                          :model-value="odsLayout.boardWidthPercent ?? 100"
+                          label="Board width percent"
+                          :disabled="!canAccessOdsTemplateSettings"
+                          :min="10"
+                          :max="100"
+                          :step="5"
+                          :append-text="'%'"
+                          :max-fraction-digits="0"
+                          @update:model-value="
+                            (v: any) =>
+                              updateLayoutField(
+                                'boardWidthPercent',
+                                Math.max(10, Math.min(100, Number(v) || 100))
+                              )
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="(odsLayout.boardWidthPercent ?? 100) < 100" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.boardAlignment') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.boardAlignmentDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="boardAlignItems"
+                          :model-value="
+                            boardAlignItems.find(
+                              (i) => i.value === (odsLayout.boardAlign ?? 'left')
+                            ) ?? boardAlignItems[0]
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: any) =>
+                              updateLayoutField(
+                                'boardAlign',
+                                v.value as 'left' | 'right' | 'center'
+                              )
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div v-if="isAdvancedCustomizationEnabled" class="px-24 py-12">
+                    <div class="space-y-12">
+                      <div>
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-4">
+                          {{ t('order.displaySystem.legacyOds.footerMode') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.footerModeDescription') }}
+                        </div>
+                      </div>
+                      <div class="bg-fm-color-neutral-gray-50 rounded-lg p-12">
+                        <FmButtonGroup
+                          :items="footerModeItems"
+                          :model-value="
+                            footerModeItems.find(
+                              (i) => i.value === (odsLayout.footerMode ?? 'feedme')
+                            ) ?? footerModeItems[0]
+                          "
+                          :disabled="!canAccessOdsTemplateSettings"
+                          @update:model-value="
+                            (v: any) => updateLayoutField('footerMode', v.value as OdsFooterMode)
+                          "
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="min-w-0 lg:sticky lg:top-24">
+                <div
+                  class="overflow-hidden rounded-lg border border-fm-color-neutral-gray-100 bg-white"
+                >
+                  <div
+                    class="border-b border-fm-color-neutral-gray-100 bg-fm-color-neutral-gray-50 px-24 py-16"
+                  >
+                    <div class="flex flex-col gap-12 lg:flex-row lg:items-start lg:justify-between">
+                      <div>
+                        <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+                          {{ t('order.displaySystem.legacyOds.odsPreview') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          {{ t('order.displaySystem.legacyOds.previewDescription') }}
+                        </div>
+                      </div>
+                      <div class="flex flex-wrap items-center gap-8">
+                        <FmButton
+                          variant="secondary"
+                          :label="t('order.displaySystem.legacyOds.openInNewTab')"
+                          :disabled="!previewUrl"
+                          @click="openPreviewInNewTab"
+                        />
+                      </div>
+                    </div>
+                  </div>
+
+                  <div class="bg-fm-color-neutral-gray-50 p-16">
+                    <div
+                      v-if="previewUrl"
+                      ref="previewViewportRef"
+                      class="flex h-[300px] w-full items-center justify-center overflow-auto md:h-[400px] lg:h-[480px]"
+                    >
+                      <div
+                        class="relative flex-shrink-0 overflow-hidden rounded-[12px] border border-black/10 bg-white shadow-[0_8px_24px_rgba(15,23,42,0.16)]"
+                        :style="{
+                          width: `${ODS_PREVIEW_WIDTH * previewScale}px`,
+                          height: `${ODS_PREVIEW_HEIGHT * previewScale}px`
+                        }"
+                      >
+                        <div
+                          :style="{
+                            width: `${ODS_PREVIEW_WIDTH}px`,
+                            height: `${ODS_PREVIEW_HEIGHT}px`,
+                            transform: `scale(${previewScale})`,
+                            transformOrigin: 'top left'
+                          }"
+                        >
+                          <iframe
+                            :src="previewUrl"
+                            title="ODS Preview"
+                            :width="ODS_PREVIEW_WIDTH"
+                            :height="ODS_PREVIEW_HEIGHT"
+                            class="block border-0"
+                          />
+                        </div>
+                      </div>
+                    </div>
+
+                    <div
+                      v-else
+                      class="flex h-[200px] items-center justify-center rounded-[16px] border border-dashed border-fm-color-neutral-gray-200 bg-white px-24 text-center"
+                    >
+                      <div class="space-y-8">
+                        <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary">
+                          {{ t('order.displaySystem.legacyOds.previewUnavailable') }}
+                        </div>
+                        <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+                          Set a valid <code>VITE_ODS_PREVIEW_URL</code> to enable the embedded ODS
+                          preview.
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+    <MediaPickerModal
+      v-model:open="mediaPickerOpen"
+      :z-index="70"
+      :business-id="Core.currentBusiness.value?._id ?? ''"
+      :kinds="['image']"
+      @select="selectImage"
+    />
+  </Teleport>
+
+  <ColorOverrideDialog
+    v-model="overrideDialogOpen"
+    :title="t('order.displaySystem.legacyOds.colorOverrideTitle')"
+    :description="t('order.displaySystem.legacyOds.colorOverrideDescription')"
+    :color-fields="colorFields"
+    :base-brandkit="baseBrandkit"
+    :value="draft.brandkitOverride"
+    @save="onSaveOverride"
+  />
+</template>
+
+<style scoped>
+.fade-enter-from {
+  opacity: 0;
+}
+
+.fade-enter-to {
+  opacity: 1;
+}
+
+.fade-leave-from {
+  opacity: 1;
+}
+
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+</style>