@feedmepos/mf-order-setting 0.0.91 → 0.0.93

package/src/modules/display-system/legacy-ods/interface.ts

@@ -0,0 +1,108 @@
+export type RecursivePartial<T> = {
+  [P in keyof T]?: T[P] extends (...args: any[]) => any
+    ? T[P]
+    : T[P] extends readonly (infer U)[]
+      ? ReadonlyArray<RecursivePartial<U>>
+      : T[P] extends (infer U)[]
+        ? RecursivePartial<U>[]
+        : T[P] extends object
+          ? RecursivePartial<T[P]>
+          : T[P]
+}
+
+export type BaseBrandKit = {
+  colors: {
+    primary: string
+    secondary: string
+    accent: string
+    background: {
+      base: string
+      elevated: string
+    }
+    neutral: {
+      light: string
+      mid: string
+      dark: string
+    }
+    status: {
+      success: string
+      warning: string
+      error: string
+      info?: string
+    }
+    text: {
+      onPrimary: string
+      primary: string
+      secondary: string
+      tertiary: string
+    }
+  }
+}
+
+export type OdsConfigEntry = {
+  label?: string
+  isDefault: boolean
+  restaurantIds?: string[]
+  brandkitOverride?: RecursivePartial<BaseBrandKit>
+  layout?: OdsLayoutConfig
+  display?: OdsDisplayConfig
+}
+
+export type OdsFooterMode = 'feedme' | 'settingsIcon'
+
+export type OrderGroupingMode = 'type' | 'status'
+
+export type OrderStatusBoardLayout = 'horizontal' | 'vertical'
+
+export type StatusSectionTemplateName =
+  'default' | 'bordered-card' | 'floating-tab' | 'centered-pill'
+
+export type OdsLayoutConfig = {
+  background?: {
+    url: string
+    size?: string
+    position?: string
+  } | null
+  sidePanel?: {
+    url: string
+    position: 'left' | 'right'
+    widthPercent: number
+    objectFit?: string
+  } | null
+  boardWidthPercent?: number
+  boardAlign?: 'left' | 'right' | 'center'
+  footerMode?: OdsFooterMode
+}
+
+export type OdsDisplayConfig = {
+  groupBy: OrderGroupingMode
+  statusLayout: OrderStatusBoardLayout
+  statusSlidingPeriod: number
+  currentOrder?: {
+    enabled?: boolean
+  }
+  showProgressBar: boolean
+  statusColumnCount: number
+  showDeliveryIcons: boolean
+  showOrderTypeTabs: boolean
+  showOrderCount: boolean
+  showEstimatedTime: boolean
+  hideCompletedOrders?: boolean
+  statusTemplate?: StatusSectionTemplateName
+}
+
+export type BrandKit = Partial<BaseBrandKit> & {
+  ods?: OdsConfigEntry[]
+  [key: string]: unknown
+}
+
+export function migrateOdsToArray(ods: unknown, defaultLabel: string): OdsConfigEntry[] {
+  if (!ods) return []
+  if (Array.isArray(ods)) return ods
+  const legacy = ods as Partial<OdsConfigEntry>
+  const entry: OdsConfigEntry = { label: defaultLabel, isDefault: true }
+  if (legacy.brandkitOverride) entry.brandkitOverride = legacy.brandkitOverride
+  if (legacy.layout) entry.layout = legacy.layout
+  if (legacy.display) entry.display = legacy.display
+  return [entry]
+}

package/src/router/routes.ts

@@ -57,7 +57,7 @@ const routes: RouteRecordRaw[] = [
     component: withPermission(
       defineAsyncComponent(() => import('@/views/display-system/DisplaySystemView.vue')),
     ),
-    meta: permissionMeta([manageOrderSetting]),
+    meta: permissionMeta([{ ...manageOrderSetting, coverSubject: Permission.Subject.Business.miniProgram_brandkit }]),
   },
 ];
 

package/src/views/display-system/DisplaySystemView.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import { useCoreStore, useI18n } from '@feedmepos/mf-common'
 import type { FmTabProps, ISelectItem } from '@feedmepos/ui-library'
 
@@ -10,21 +11,83 @@ import { useDisplaySystemStore } from '@/stores/display-system'
 import DisplayScreenEditor from './DisplayScreenEditor.vue'
 import DisplayTemplateEditor from './DisplayTemplateEditor.vue'
 import DisplayLayoutMap from './DisplayLayoutMap.vue'
+import { useOrderSettingPermission } from '@/composables/useOrderSettingPermission'
+import { useMiniProgramPermission } from '@/composables/useMiniProgramPermission'
+import { getBusinessBrandkit } from '@/api/brandkit'
+import { availableDisplaySystemViews, defaultDisplaySystemView, isPosV8, requestedDisplaySystemView, type DisplaySystemView } from './view-selection'
+import LegacyOdsTemplateList from './legacy-ods/LegacyOdsTemplateList.vue'
 
-type Tab = 'screens' | 'templates'
 const { t } = useI18n()
 const { showError, showSuccess } = useSnackbarFunctions()
+const route = useRoute()
+const router = useRouter()
 const core = useCoreStore()
 const store = useDisplaySystemStore()
-const selectedTab = ref<Tab>('screens')
+const { canManageOrderSetting } = useOrderSettingPermission()
+const { canManageBrandkit } = useMiniProgramPermission()
+const hasLegacyOdsConfigs = ref(false)
+const availableViews = computed(() =>
+  availableDisplaySystemViews({
+    canManageOrderSetting: canManageOrderSetting.value,
+    canManageBrandkit: canManageBrandkit.value,
+    outlets: core.restaurants.value,
+    hasLegacyOdsConfigs: hasLegacyOdsConfigs.value
+  })
+)
+const selectedView = ref<DisplaySystemView>()
+// The default is settled once the outlets and the current outlet have loaded;
+// after that, picking another outlet on the Screens tab must not swap the view.
+let viewSettled = false
+watch(
+  [availableViews, () => core.restaurants.value.length, () => core.currentRestaurant.value?._id],
+  ([available, outletCount, currentOutletId]) => {
+    const requested = requestedDisplaySystemView(route.query)
+    if (requested && available.includes(requested)) {
+      selectedView.value = requested
+      viewSettled = true
+    } else if (!viewSettled || !selectedView.value || !available.includes(selectedView.value)) {
+      selectedView.value = defaultDisplaySystemView(available, core.restaurants.value, currentOutletId)
+      viewSettled = Boolean(outletCount && currentOutletId)
+    }
+  },
+  { immediate: true }
+)
+const otherView = computed(() => availableViews.value.find((view) => view !== selectedView.value))
+function switchView(view: DisplaySystemView) {
+  selectedView.value = view
+  viewSettled = true
+  const { tab: _tab, ...query } = route.query
+  router.replace({ query: { ...query, view } })
+}
+// Only an all-v8 business needs this: one with a v7 outlet already gets the v7 view.
+watch(
+  [() => core.currentBusiness.value?._id, canManageBrandkit, () => core.restaurants.value.some((outlet) => outlet.posVersion && !isPosV8(outlet.posVersion))],
+  async ([businessId, canManage, hasV7Outlet]) => {
+    hasLegacyOdsConfigs.value = false
+    if (!businessId || !canManage || hasV7Outlet) return
+    try {
+      const brandkit = await getBusinessBrandkit(businessId, core.namespace.value)
+      hasLegacyOdsConfigs.value = Boolean(Array.isArray(brandkit.ods) ? brandkit.ods.length : brandkit.ods)
+    } catch {
+      hasLegacyOdsConfigs.value = false
+    }
+  },
+  { immediate: true }
+)
+const selectedTab = ref<'screens' | 'templates'>('screens')
 const selectedRestaurantId = ref(core.currentRestaurant.value?._id ?? '')
 const templateEditorOpen = ref(false)
 const screenEditorOpen = ref(false)
 const editingTemplate = ref<DisplayTemplate>()
 const editingScreen = ref<DisplayScreen>()
 const saving = ref(false)
+const legacyOdsList = ref<InstanceType<typeof LegacyOdsTemplateList>>()
 
 const tabs = computed<FmTabProps[]>(() => [{ label: t('order.displaySystem.screens'), value: 'screens' }, { label: t('order.displaySystem.templates'), value: 'templates' }])
+const selectedRestaurant = computed(() =>
+  core.restaurants.value.find((item) => item._id === selectedRestaurantId.value)
+)
+const selectedRestaurantIsV8 = computed(() => isPosV8(selectedRestaurant.value?.posVersion))
 const restaurantItems = computed<ISelectItem[]>(() => core.restaurants.value.map((restaurant) => ({ label: restaurant.profile.name, value: restaurant._id })))
 const entitlement = computed(() => store.screenCapabilities)
 // Oldest screens keep the licence, so the newest lose it first. Merchants can
@@ -33,7 +96,7 @@ const unlicensedScreens = computed(() =>
   unlicensedScreenIds(store.screens, entitlement.value?.screenLimit ?? 0))
 const remainingScreens = computed(() => Math.max(0, (entitlement.value?.screenLimit ?? 0) - (entitlement.value?.screenUsed ?? 0)))
 const applicableTemplates = computed(() => store.templates.filter((template) => !template.restaurantIds?.length || template.restaurantIds.includes(selectedRestaurantId.value)))
-const canAddScreen = computed(() => Boolean(selectedRestaurantId.value && entitlement.value?.posV8 && remainingScreens.value > 0 && applicableTemplates.value.length))
+const canAddScreen = computed(() => Boolean(selectedRestaurantId.value && selectedRestaurantIsV8.value && entitlement.value?.posV8 && remainingScreens.value > 0 && applicableTemplates.value.length))
 
 function templateName(id: string) { return store.templates.find((template) => template._id === id)?.label ?? 'Unknown template' }
 function orientationMismatch(screen: DisplayScreen) {
@@ -49,7 +112,7 @@ function layoutSummary(template: DisplayTemplate) {
 function isOnline(screen: DisplayScreen) { return Boolean(screen.lastSeenAt && Date.now() - new Date(screen.lastSeenAt).getTime() < 120_000) }
 
 async function loadContext() {
-  if (!selectedRestaurantId.value) return
+  if (!canManageOrderSetting.value || !selectedRestaurantId.value) return
   try { await Promise.all([store.loadScreens(selectedRestaurantId.value), store.loadScreenCapabilities(selectedRestaurantId.value)]) }
   catch (error) { showError(error instanceof Error ? error.message : t('order.displaySystem.loadFailed')) }
 }
@@ -109,6 +172,7 @@ async function toggleStatus(screen: DisplayScreen) {
 
 onMounted(async () => {
   if (!selectedRestaurantId.value && core.restaurants.value.length) selectedRestaurantId.value = core.restaurants.value[0]._id
+  if (!canManageOrderSetting.value) return
   try { await store.loadTemplates() } catch (error) { showError(error instanceof Error ? error.message : t('order.displaySystem.loadFailed')) }
   await loadContext()
 })
@@ -116,14 +180,19 @@ watch(() => core.restaurants.value.length, async (length) => { if (!selectedRest
 </script>
 
 <template>
-  <div class="py-[1.5rem]"><FmPageHead :title="t('order.displaySystem.title')" />
+  <div class="py-[1.5rem]"><FmPageHead :title="selectedView === 'v7' ? t('order.displaySystem.legacyOds.title') : t('order.displaySystem.title')" />
     <div class="px-[1.5rem]">
-      <div class="display-toolbar"><p class="text-sm text-gray-500">{{ t('order.displaySystem.description') }}</p><FmButton icon="add" size="md" :label="selectedTab === 'screens' ? t('order.displaySystem.addScreen') : t('order.displaySystem.addTemplateAction')" :disabled="selectedTab === 'screens' && !canAddScreen" @click="selectedTab === 'screens' ? addScreen() : addTemplate()" /></div>
+      <div class="display-toolbar"><p class="text-sm text-gray-500">{{ selectedView === 'v7' ? t('order.displaySystem.legacyOds.description') : t('order.displaySystem.description') }}</p><div class="display-actions"><FmButton v-if="otherView" variant="plain" size="md" :label="otherView === 'v7' ? t('order.displaySystem.legacyOds.switchToLegacy') : t('order.displaySystem.legacyOds.switchToDisplaySystem')" @click="switchView(otherView)" /><FmButton v-if="selectedView === 'v7'" icon="add" size="md" :label="t('order.displaySystem.legacyOds.addConfiguration')" @click="legacyOdsList?.addOdsEntry()" /><FmButton v-else-if="selectedView === 'v8'" icon="add" size="md" :label="selectedTab === 'screens' ? t('order.displaySystem.addScreen') : t('order.displaySystem.addTemplateAction')" :disabled="selectedTab === 'screens' && !canAddScreen" @click="selectedTab === 'screens' ? addScreen() : addTemplate()" /></div></div>
+      <template v-if="selectedView === 'v8'">
       <!-- The outlet picker and its allowance belong to the Screens tab only:
            screens are bought and paired per outlet, while templates are
            business-wide and would read as outlet-scoped next to a picker. -->
       <div class="display-controls"><FmTabs v-model:model-value="selectedTab" :items="tabs" /><div v-if="selectedTab === 'screens'" class="display-outlet"><p v-if="entitlement" class="display-entitlement">{{ t('order.displaySystem.screensUsed', { used: entitlement.screenUsed, limit: entitlement.screenLimit }) }} · {{ entitlement.capabilities.join(', ') || t('order.displaySystem.noModulesLicensed') }}</p><FmSelect class="display-restaurant-select" :model-value="selectedRestaurantId" :items="restaurantItems" :placeholder="t('order.displaySystem.selectRestaurant')" searchable @update:model-value="selectRestaurant" /></div></div>
-      <p v-if="selectedTab === 'screens' && !canAddScreen && !store.loadingScreenCapabilities" class="restriction-note">A POS v8 restaurant, an available total screen entitlement, and an applicable template are required.</p>
+      <div v-if="selectedTab === 'screens' && selectedRestaurant && !selectedRestaurantIsV8" class="restriction-note">
+        <p>{{ selectedRestaurant.posVersion ? t('order.displaySystem.posV8RequiredVersion', { version: selectedRestaurant.posVersion }) : t('order.displaySystem.posV8Required') }}</p>
+        <FmButton v-if="availableViews.includes('v7')" variant="plain" :label="t('order.displaySystem.legacyOds.openLegacyTab')" @click="switchView('v7')" />
+      </div>
+      <p v-else-if="selectedTab === 'screens' && !canAddScreen && !store.loadingScreenCapabilities" class="restriction-note">{{ applicableTemplates.length ? t('order.displaySystem.screenLimitReached') : t('order.displaySystem.noTemplatesDescription') }}</p>
 
       <section v-if="selectedTab === 'screens'" class="mt-12">
         <div v-if="store.loadingScreens" class="flex justify-center py-40"><FmCircularProgress size="lg" /></div>
@@ -132,17 +201,19 @@ watch(() => core.restaurants.value.length, async (length) => { if (!selectedRest
           <article v-for="screen in store.screens" :key="screen._id" class="resource-card"><div class="flex justify-between gap-12"><div class="min-w-0"><div class="flex flex-wrap items-center gap-8"><h3 class="truncate text-lg font-semibold">{{ screen.name }}</h3><span class="status-badge" :class="screen.status.toLowerCase()">{{ screen.status }}</span><span class="online-dot" :class="{ online: isOnline(screen) }">{{ isOnline(screen) ? t('order.displaySystem.online') : t('order.displaySystem.offline') }}</span><span v-if="unlicensedScreens.has(screen._id)" class="status-badge unlicensed">{{ t('order.displaySystem.unlicensed') }}</span></div><p class="mt-4 text-sm text-gray-500">{{ templateName(screen.templateId) }}</p><p v-if="orientationMismatch(screen)" class="mt-2 text-xs text-orange-700">Reported viewport orientation does not match the template.</p><p v-if="unlicensedScreens.has(screen._id)" class="mt-2 text-xs text-red-700">{{ t('order.displaySystem.unlicensedNote') }}</p></div><div class="flex gap-4"><FmButton :icon="screen.status === 'DISABLED' ? 'play_arrow' : 'pause'" variant="plain" @click="toggleStatus(screen)" /><FmButton icon="edit" variant="plain" @click="editScreen(screen)" /><FmButton icon="delete" variant="plain" @click="removeScreen(screen)" /></div></div><dl class="meta-grid"><div><dt>{{ t('order.displaySystem.deviceId') }}</dt><dd>{{ screen.deviceId || '—' }}</dd></div><div><dt>{{ t('order.displaySystem.lastSeen') }}</dt><dd>{{ screen.lastSeenAt ? new Date(screen.lastSeenAt).toLocaleString() : '—' }}</dd></div></dl></article>
         </div>
       </section>
-      <section v-else class="mt-12">
+      <section v-else-if="selectedTab === 'templates'" class="mt-12">
         <div v-if="store.loadingTemplates" class="flex justify-center py-40"><FmCircularProgress size="lg" /></div>
         <div v-else-if="!store.templates.length" class="empty-state"><strong>{{ t('order.displaySystem.noTemplates') }}</strong><span>{{ t('order.displaySystem.noTemplatesDescription') }}</span></div>
         <div v-else class="grid grid-cols-1 gap-16 xl:grid-cols-2"><article v-for="template in store.templates" :key="template._id" class="resource-card"><div class="flex justify-between gap-12"><div class="min-w-0"><div class="flex items-center gap-8"><h3 class="truncate text-lg font-semibold">{{ template.label }}</h3><span class="mode-badge">{{ template.orientation }}</span></div><p class="mt-2 text-xs text-gray-500">{{ templateCapabilities(template).join(', ') || 'INFO' }}</p></div><div class="flex gap-4"><FmButton icon="edit" variant="plain" @click="editTemplate(template)" /><FmButton icon="content_copy" variant="plain" @click="duplicateTemplate(template)" /><FmButton icon="delete" variant="plain" @click="removeTemplate(template)" /></div></div><div class="layout-thumb"><DisplayLayoutMap :node="template.root as never" selected-zone-id="" :start-index="1" /></div><p class="thumb-caption">{{ t('order.displaySystem.areasCount', { count: layoutSummary(template).areas }) }} · {{ t('order.displaySystem.modulesCount', { count: layoutSummary(template).modules }) }}</p></article></div>
       </section>
+      </template>
+      <LegacyOdsTemplateList v-else-if="selectedView === 'v7'" ref="legacyOdsList" />
     </div>
   </div>
-  <DisplayTemplateEditor v-model="templateEditorOpen" :template="editingTemplate" :preview-restaurant-id="selectedRestaurantId" :outlet-capabilities="entitlement?.capabilities ?? []" :saving="saving" @save="saveTemplate" />
-  <DisplayScreenEditor v-if="selectedRestaurantId" v-model="screenEditorOpen" :screen="editingScreen" :templates="applicableTemplates" :restaurant-id="selectedRestaurantId" :saving="saving" @save="saveScreen" />
+  <DisplayTemplateEditor v-if="canManageOrderSetting" v-model="templateEditorOpen" :template="editingTemplate" :preview-restaurant-id="selectedRestaurantId" :outlet-capabilities="entitlement?.capabilities ?? []" :saving="saving" @save="saveTemplate" />
+  <DisplayScreenEditor v-if="canManageOrderSetting && selectedRestaurantId" v-model="screenEditorOpen" :screen="editingScreen" :templates="applicableTemplates" :restaurant-id="selectedRestaurantId" :saving="saving" @save="saveScreen" />
 </template>
 
 <style scoped>
-.display-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7eb;padding-bottom:14px}.display-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}.display-restaurant-select{width:min(360px,100%)}.display-outlet{display:flex;align-items:center;gap:16px}.display-entitlement{color:#6b7280;font-size:12px;white-space:nowrap}.restriction-note{margin-top:12px;border:1px solid #fed7aa;border-radius:10px;padding:10px 12px;color:#9a3412;background:#fff7ed;font-size:13px}.empty-state{display:grid;justify-items:center;gap:6px;border:1px dashed #d1d5db;border-radius:12px;padding:56px 20px;color:#6b7280;text-align:center}.empty-state strong{color:#111827}.layout-thumb{display:flex;height:auto;min-height:96px;margin-top:16px;border-radius:10px;background:#f3f4f6;padding:5px;pointer-events:none}.thumb-caption{margin-top:8px;color:#6b7280;font-size:11px}.resource-card{border:1px solid #e5e7eb;border-radius:12px;padding:20px;background:white;box-shadow:0 2px 8px #0000000a}.mode-badge,.status-badge{border-radius:999px;padding:3px 8px;background:#f3f4f6;font-size:11px;font-weight:700}.status-badge.active{color:#166534;background:#dcfce7}.status-badge.disabled{color:#991b1b;background:#fee2e2}.status-badge.unlicensed{color:#b42318;background:#fef3f2;border:1px solid #fecdca}.online-dot{color:#6b7280;font-size:11px}.online-dot::before{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#9ca3af;content:''}.online-dot.online{color:#15803d}.online-dot.online::before{background:#22c55e}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;border-top:1px solid #f0f0f0;padding-top:16px}.meta-grid dt{color:#6b7280;font-size:11px}.meta-grid dd{overflow:hidden;margin-top:2px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.display-toolbar{align-items:flex-start}.display-controls{align-items:stretch;flex-direction:column}.display-outlet{align-items:stretch;flex-direction:column;gap:8px}.display-restaurant-select{width:100%}}
+.display-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e5e7eb;padding-bottom:14px}.display-actions{display:flex;flex-shrink:0;align-items:center;gap:8px}.display-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:12px}.display-restaurant-select{width:min(360px,100%)}.display-outlet{display:flex;align-items:center;gap:16px}.display-entitlement{color:#6b7280;font-size:12px;white-space:nowrap}.restriction-note{margin-top:12px;border:1px solid #fed7aa;border-radius:10px;padding:10px 12px;color:#9a3412;background:#fff7ed;font-size:13px}.empty-state{display:grid;justify-items:center;gap:6px;border:1px dashed #d1d5db;border-radius:12px;padding:56px 20px;color:#6b7280;text-align:center}.empty-state strong{color:#111827}.layout-thumb{display:flex;height:auto;min-height:96px;margin-top:16px;border-radius:10px;background:#f3f4f6;padding:5px;pointer-events:none}.thumb-caption{margin-top:8px;color:#6b7280;font-size:11px}.resource-card{border:1px solid #e5e7eb;border-radius:12px;padding:20px;background:white;box-shadow:0 2px 8px #0000000a}.mode-badge,.status-badge{border-radius:999px;padding:3px 8px;background:#f3f4f6;font-size:11px;font-weight:700}.status-badge.active{color:#166534;background:#dcfce7}.status-badge.disabled{color:#991b1b;background:#fee2e2}.status-badge.unlicensed{color:#b42318;background:#fef3f2;border:1px solid #fecdca}.online-dot{color:#6b7280;font-size:11px}.online-dot::before{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#9ca3af;content:''}.online-dot.online{color:#15803d}.online-dot.online::before{background:#22c55e}.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;border-top:1px solid #f0f0f0;padding-top:16px}.meta-grid dt{color:#6b7280;font-size:11px}.meta-grid dd{overflow:hidden;margin-top:2px;font-size:12px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:640px){.display-toolbar{align-items:flex-start}.display-controls{align-items:stretch;flex-direction:column}.display-outlet{align-items:stretch;flex-direction:column;gap:8px}.display-restaurant-select{width:100%}}
 </style>

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

@@ -0,0 +1,223 @@
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+import ColorSelection from './ColorSelection.vue'
+import {
+  type BaseBrandKit,
+  type RecursivePartial
+} from '@/modules/display-system/legacy-ods/interface'
+import { useI18n } from '@feedmepos/mf-common'
+
+type ColorField = { key: string; title: string; description: string }
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    title: string
+    description?: string
+    baseBrandkit: BaseBrandKit
+    value?: RecursivePartial<BaseBrandKit>
+    colorFields: ColorField[]
+  }>(),
+  {
+    colorFields: () => []
+  }
+)
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: boolean): void
+  (e: 'save', v: RecursivePartial<BaseBrandKit> | undefined): void
+  (e: 'cancel'): void
+}>()
+
+const { t } = useI18n()
+
+const opened = computed({
+  get: () => props.modelValue,
+  set: (v) => emit('update:modelValue', v)
+})
+
+const draft = ref<RecursivePartial<BaseBrandKit>>({})
+
+const cloneValue = () => JSON.parse(JSON.stringify(props.value ?? {}))
+
+const syncDraft = () => {
+  draft.value = cloneValue()
+}
+
+watch(
+  () => props.modelValue,
+  (v) => {
+    if (v) syncDraft()
+  }
+)
+
+watch(
+  () => props.value,
+  () => {
+    if (props.modelValue) syncDraft()
+  },
+  { deep: true }
+)
+
+const getFromPath = (obj: any, path: string) =>
+  path.split('.').reduce((acc, key) => (acc && typeof acc === 'object' ? acc[key] : undefined), obj)
+
+const pruneEmpty = (value: any): any => {
+  if (Array.isArray(value)) {
+    const pruned = value.map(pruneEmpty).filter((v) => v !== undefined)
+    return pruned.length ? pruned : undefined
+  }
+  if (value && typeof value === 'object') {
+    const entries = Object.entries(value)
+      .map(([k, v]) => [k, pruneEmpty(v)] as const)
+      .filter(([, v]) => v !== undefined)
+    if (!entries.length) return undefined
+    return Object.fromEntries(entries)
+  }
+  return value
+}
+
+const setAtPath = (obj: any, path: string, value: any) => {
+  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 deleteAtPath = (obj: any, path: string) => {
+  const keys = path.split('.')
+  const stack: { parent: any; key: string }[] = []
+  let current = obj
+  for (const key of keys) {
+    if (!current || typeof current !== 'object') return
+    stack.push({ parent: current, key })
+    current = current[key]
+  }
+  const last = stack.pop()
+  if (last) {
+    delete last.parent[last.key]
+  }
+  for (let i = stack.length - 1; i >= 0; i--) {
+    const { parent, key } = stack[i]
+    if (parent[key] && typeof parent[key] === 'object' && !Object.keys(parent[key]).length) {
+      delete parent[key]
+    }
+  }
+}
+
+const baseColor = (path: string) => {
+  const value = getFromPath(props.baseBrandkit, path)
+  if (typeof value === 'string') return value
+  return '#000000'
+}
+
+const displayColor = (path: string) => {
+  const fromOverride = getFromPath(draft.value, path)
+  if (typeof fromOverride === 'string') return fromOverride
+  return baseColor(path)
+}
+
+const toggleOverride = (path: string, enabled: boolean) => {
+  if (!enabled) {
+    deleteAtPath(draft.value, path)
+    const pruned = pruneEmpty(draft.value)
+    draft.value = pruned ?? {}
+    return
+  }
+  setAtPath(draft.value, path, baseColor(path))
+}
+
+const onReset = (path: string) => {
+  setAtPath(draft.value, path, baseColor(path))
+}
+
+const onUpdateColor = (path: string, color: string) => {
+  setAtPath(draft.value, path, color)
+}
+
+const isOverrideEnabled = (path: string) => getFromPath(draft.value, path) !== undefined
+
+const onClose = () => {
+  syncDraft()
+  emit('cancel')
+  opened.value = false
+}
+
+const onSave = () => {
+  const allowedDraft: RecursivePartial<BaseBrandKit> = {}
+  for (const field of props.colorFields) {
+    const value = getFromPath(draft.value, field.key)
+    if (value !== undefined) {
+      setAtPath(allowedDraft, field.key, value)
+    }
+  }
+  const cleaned = pruneEmpty(allowedDraft)
+  emit('save', cleaned)
+  opened.value = false
+}
+</script>
+
+<template>
+  <FmDialog v-model="opened" :max-width="720">
+    <template #dialog-header>
+      <div class="fm-typo-en-body-lg-600 text-fm-color-typo-primary">
+        {{ title }}
+      </div>
+    </template>
+    <div class="space-y-16 max-h-[70vh] overflow-y-auto">
+      <div
+        v-for="field in colorFields"
+        :key="field.key"
+        class="border border-fm-color-neutral-gray-100 rounded-lg overflow-hidden"
+      >
+        <div
+          class="flex items-center justify-between px-16 py-12 border-b border-fm-color-neutral-gray-100"
+        >
+          <div class="flex flex-col gap-4">
+            <div class="fm-typo-en-body-md-600 text-fm-color-typo-primary">
+              {{ field.title }}
+            </div>
+            <div class="fm-typo-en-body-sm-400 text-fm-color-typo-secondary">
+              {{ field.description }}
+            </div>
+          </div>
+          <FmSwitch
+            :model-value="isOverrideEnabled(field.key)"
+            @update:model-value="(v: boolean) => toggleOverride(field.key, v)"
+          />
+        </div>
+        <div
+          class="px-16 py-12"
+          :class="{
+            'opacity-50 pointer-events-none': !isOverrideEnabled(field.key)
+          }"
+        >
+          <ColorSelection
+            :initial-color="baseColor(field.key)"
+            :color="displayColor(field.key)"
+            @update="(v) => onUpdateColor(field.key, v)"
+            @remove="onReset(field.key)"
+            :title="field.title"
+            :description="field.description"
+          />
+        </div>
+      </div>
+    </div>
+    <template #dialog-footer>
+      <div class="w-full flex justify-end gap-8">
+        <FmButton
+          variant="secondary"
+          :label="t('order.displaySystem.legacyOds.close')"
+          @click="onClose"
+        />
+        <FmButton :label="t('order.displaySystem.legacyOds.save')" @click="onSave" />
+      </div>
+    </template>
+  </FmDialog>
+</template>

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

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { ColorPicker } from 'vue-accessible-color-picker'
+import 'vue-accessible-color-picker/styles'
+
+defineProps<{
+  initialColor: string
+  color: string
+  title: string
+  description: string
+}>()
+
+const handleCopy = (v: string) => {
+  void v
+}
+
+const emits = defineEmits<{
+  (e: 'remove'): void
+  (e: 'update', value: string): void
+}>()
+</script>
+
+<template>
+  <div class="fm-typo-en-body-md-400">
+    <div class="flex gap-8 items-center">
+      <div class="p-4 relative">
+        <FmPopover>
+          <template #popover-button>
+            <div
+              class="aspect-square w-[60px] rounded-sm border border-fm-color-neutral-gray-200 cursor-pointer"
+              :style="{
+                backgroundColor: color
+              }"
+            ></div>
+          </template>
+          <div class="shadow-lg rounded-lg p-8">
+            <ColorPicker
+              :copy="handleCopy"
+              @color-copy="(v) => handleCopy(v.cssColor)"
+              :default-format="'hex'"
+              :color="color"
+              @color-change="(v) => emits('update', v.cssColor)"
+            >
+              <template #copy-button>
+                <FmButton class="w-full h-32" variant="secondary" icon="content_copy" />
+              </template>
+            </ColorPicker>
+          </div>
+        </FmPopover>
+        <div class="absolute top-8 right-8" v-if="initialColor != color">
+          <div
+            @click="emits('remove')"
+            class="h-16 w-16 rounded-full bg-fm-color-neutral-white flex items-center justify-center cursor-pointer"
+          >
+            <FmIcon name="close_small" class="!text-[16px]" />
+          </div>
+        </div>
+      </div>
+      <div class="space-y-4">
+        <div>{{ title }}</div>
+        <div class="text-fm-color-typo-secondary">{{ description }}</div>
+      </div>
+    </div>
+    <div class="text-fm-color-typo-secondary px-4">
+      {{ color }}
+    </div>
+  </div>
+</template>