@feedmepos/mf-order-setting 0.0.54 → 0.0.56-dev.1

package/src/locales/en-US.json

@@ -246,6 +246,62 @@
         "current": "Current",
         "paxMin": "Pax Min",
         "paxMax": "Pax Max",
+        "reservation": "Reservation",
+        "reservationStatus": "Reservation Status",
+        "reservationSettings": "Reservation Settings",
+        "reservationRanges": "Reservation Ranges",
+        "reservationAvailability": "Reservation Availability",
+        "addRange": "Add Range",
+        "range": "Range",
+        "rangeName": "Range Name",
+        "priority": "Priority",
+        "priorityDescription": "Higher number = higher priority when matching slots",
+        "capacity": "Capacity",
+        "capacityDescription": "Maximum concurrent reservations for this range",
+        "minPax": "Min Pax",
+        "maxPax": "Max Pax",
+        "slotInterval": "Slot Interval",
+        "slotIntervalDescription": "Time between each available booking slot (e.g., 30 mins)",
+        "bookingDuration": "Booking Duration",
+        "bookingDurationDescription": "Duration of each reservation (e.g., 60 mins)",
+        "minLeadDays": "Min Lead Days",
+        "minLeadDaysDescription": "Minimum days in advance customers must book (0 = same day)",
+        "maxLeadDays": "Max Lead Days",
+        "maxLeadDaysDescription": "Maximum days in advance customers can book",
+        "operatingWindows": "Operating Windows",
+        "addWindow": "Add Window",
+        "startTime": "Start Time",
+        "endTime": "End Time",
+        "customPresetRemarks": "Custom Preset Remarks",
+        "addRemark": "Add Remark",
+        "noRangesConfigured": "No reservation ranges configured. Click 'Add Range' to get started.",
+        "addFirstRange": "Add your first reservation range to get started",
+        "globalSettings": "Global Settings",
+        "paxRange": "Pax Range",
+        "noOperatingHours": "No operating hours",
+        "saveAllChanges": "Save All Changes",
+        "confirmDeleteRange": "Are you sure you want to delete {name}?",
+        "settingUpdated": "Settings updated successfully",
+        "newReservationRange": "New Reservation Range",
+        "basicInformation": "Basic Information",
+        "guestRequirements": "Guest Requirements",
+        "bookingConfiguration": "Booking Configuration",
+        "rangeNamePlaceholder": "e.g., VIP Room, Main Hall",
+        "presetRemarkPlaceholder": "e.g., Window seat, Quiet area",
+        "saveRange": "Save Range",
+        "draftHoldTimeMinutes": "Draft Hold Time (Minutes)",
+        "draftHoldTimeDescription": "How long to hold a draft reservation before it expires",
+        "posCanOverbook": "POS Can Overbook",
+        "posCanOverbookDescription": "Allow POS to create reservations even when capacity is full",
+        "notificationSettings": "Notification Settings",
+        "smsEnabled": "Enable SMS Notifications",
+        "smsEnabledDescription": "Send SMS notifications to customers for reservation updates",
+        "emailEnabled": "Enable Email Notifications",
+        "emailEnabledDescription": "Send email notifications to customers for reservation updates",
+        "notifyOnConfirm": "Notify on Confirmation",
+        "notifyOnConfirmDescription": "Send notifications when a reservation is confirmed",
+        "notifyOnCancel": "Notify on Cancellation",
+        "notifyOnCancelDescription": "Send notifications when a reservation is cancelled",
         "qrPay": "QR Pay",
         "terminalScanPay": "Terminal Scan Pay",
         "terminalQrPay": "Terminal QR Pay",

package/src/locales/th-TH.json

@@ -243,6 +243,60 @@
         "current": "ปัจจุบัน",
         "paxMin": "จำนวนผู้โดยสารขั้นต่ำ",
         "paxMax": "จำนวนผู้โดยสารสูงสุด",
+        "reservation": "การจอง",
+        "reservationSettings": "การตั้งค่าการจอง",
+        "reservationRanges": "ช่วงการจอง",
+        "addRange": "เพิ่มช่วง",
+        "range": "ช่วง",
+        "rangeName": "ชื่อช่วง",
+        "priority": "ลำดับความสำคัญ",
+        "priorityDescription": "ตัวเลขที่สูงกว่า = ลำดับความสำคัญสูงกว่าเมื่อจับคู่ช่วงเวลา",
+        "capacity": "ความจุ",
+        "capacityDescription": "จำนวนการจองพร้อมกันสูงสุดสำหรับช่วงนี้",
+        "minPax": "จำนวนผู้โดยสารขั้นต่ำ",
+        "maxPax": "จำนวนผู้โดยสารสูงสุด",
+        "slotInterval": "ช่วงเวลา",
+        "slotIntervalDescription": "เวลาระหว่างช่วงการจองที่ว่าง (เช่น 30 นาที)",
+        "bookingDuration": "ระยะเวลาการจอง",
+        "bookingDurationDescription": "ระยะเวลาของการจองแต่ละครั้ง (เช่น 60 นาที)",
+        "minLeadDays": "จำนวนวันล่วงหน้าขั้นต่ำ",
+        "minLeadDaysDescription": "จำนวนวันขั้นต่ำที่ลูกค้าต้องจองล่วงหน้า (0 = วันเดียวกัน)",
+        "maxLeadDays": "จำนวนวันล่วงหน้าสูงสุด",
+        "maxLeadDaysDescription": "จำนวนวันสูงสุดที่ลูกค้าสามารถจองล่วงหน้าได้",
+        "operatingWindows": "ช่วงเวลาทำการ",
+        "addWindow": "เพิ่มช่วงเวลา",
+        "startTime": "เวลาเริ่มต้น",
+        "endTime": "เวลาสิ้นสุด",
+        "customPresetRemarks": "หมายเหตุที่กำหนดไว้ล่วงหน้า",
+        "addRemark": "เพิ่มหมายเหตุ",
+        "noRangesConfigured": "ยังไม่มีการกำหนดช่วงการจอง คลิก 'เพิ่มช่วง' เพื่อเริ่มต้น",
+        "addFirstRange": "เพิ่มช่วงการจองแรกของคุณเพื่อเริ่มต้น",
+        "globalSettings": "การตั้งค่าทั่วไป",
+        "paxRange": "ช่วงจำนวนผู้โดยสาร",
+        "noOperatingHours": "ไม่มีเวลาทำการ",
+        "saveAllChanges": "บันทึกการเปลี่ยนแปลงทั้งหมด",
+        "confirmDeleteRange": "คุณแน่ใจหรือไม่ว่าต้องการลบ {name}?",
+        "settingUpdated": "อัปเดตการตั้งค่าสำเร็จ",
+        "newReservationRange": "ช่วงการจองใหม่",
+        "basicInformation": "ข้อมูลพื้นฐาน",
+        "guestRequirements": "ความต้องการของแขก",
+        "bookingConfiguration": "การกำหนดค่าการจอง",
+        "rangeNamePlaceholder": "เช่น ห้อง VIP, ห้องโถง",
+        "presetRemarkPlaceholder": "เช่น ที่นั่งริมหน้าต่าง, พื้นที่เงียบ",
+        "saveRange": "บันทึกช่วง",
+        "draftHoldTimeMinutes": "เวลาเก็บร่าง (นาที)",
+        "draftHoldTimeDescription": "ระยะเวลาในการเก็บการจองแบบร่างก่อนที่จะหมดอายุ",
+        "posCanOverbook": "POS สามารถจองเกินได้",
+        "posCanOverbookDescription": "อนุญาตให้ POS สร้างการจองแม้ว่าความจุเต็มแล้ว",
+        "notificationSettings": "การตั้งค่าการแจ้งเตือน",
+        "smsEnabled": "เปิดใช้งานการแจ้งเตือนผ่าน SMS",
+        "smsEnabledDescription": "ส่งการแจ้งเตือนผ่าน SMS ให้กับลูกค้าสำหรับการอัพเดทการจอง",
+        "emailEnabled": "เปิดใช้งานการแจ้งเตือนผ่านอีเมล",
+        "emailEnabledDescription": "ส่งการแจ้งเตือนผ่านอีเมลให้กับลูกค้าสำหรับการอัพเดทการจอง",
+        "notifyOnConfirm": "แจ้งเตือนเมื่อยืนยัน",
+        "notifyOnConfirmDescription": "ส่งการแจ้งเตือนเมื่อการจองได้รับการยืนยัน",
+        "notifyOnCancel": "แจ้งเตือนเมื่อยกเลิก",
+        "notifyOnCancelDescription": "ส่งการแจ้งเตือนเมื่อการจองถูกยกเลิก",
         "qrPay": "ชำระเงินด้วย QR",
         "terminalScanPay": "ชำระเงินด้วยการสแกนเทอร์มินัล",
         "terminalQrPay": "ชำระเงินด้วย QR เทอร์มินัล",

package/src/locales/zh-CN.json

@@ -247,6 +247,60 @@
         "current": "当前",
         "paxMin": "最少人数",
         "paxMax": "最多人数",
+        "reservation": "预订",
+        "reservationSettings": "预订设置",
+        "reservationRanges": "预订范围",
+        "addRange": "添加范围",
+        "range": "范围",
+        "rangeName": "范围名称",
+        "priority": "优先级",
+        "priorityDescription": "数字越大，匹配时段时优先级越高",
+        "capacity": "容量",
+        "capacityDescription": "此范围的最大并发预订数",
+        "minPax": "最少人数",
+        "maxPax": "最多人数",
+        "slotInterval": "时段间隔",
+        "slotIntervalDescription": "每个可预订时段之间的时间（例如30分钟）",
+        "bookingDuration": "预订时长",
+        "bookingDurationDescription": "每次预订的持续时间（例如60分钟）",
+        "minLeadDays": "最少提前天数",
+        "minLeadDaysDescription": "顾客必须提前预订的最少天数（0 = 当天）",
+        "maxLeadDays": "最多提前天数",
+        "maxLeadDaysDescription": "顾客可以提前预订的最多天数",
+        "operatingWindows": "营业时段",
+        "addWindow": "添加时段",
+        "startTime": "开始时间",
+        "endTime": "结束时间",
+        "customPresetRemarks": "自定义预设备注",
+        "addRemark": "添加备注",
+        "noRangesConfigured": "未配置预订范围。点击\"添加范围\"开始",
+        "addFirstRange": "添加您的第一个预订范围以开始",
+        "globalSettings": "全局设置",
+        "paxRange": "人数范围",
+        "noOperatingHours": "无营业时间",
+        "saveAllChanges": "保存所有更改",
+        "confirmDeleteRange": "您确定要删除{name}吗？",
+        "settingUpdated": "设置已成功更新",
+        "newReservationRange": "新预订范围",
+        "basicInformation": "基本信息",
+        "guestRequirements": "客人要求",
+        "bookingConfiguration": "预订配置",
+        "rangeNamePlaceholder": "例如：VIP包厢、大厅",
+        "presetRemarkPlaceholder": "例如：靠窗座位、安静区域",
+        "saveRange": "保存范围",
+        "draftHoldTimeMinutes": "草稿保留时间（分钟）",
+        "draftHoldTimeDescription": "在草稿预订过期前保留的时间",
+        "posCanOverbook": "POS可以超额预订",
+        "posCanOverbookDescription": "允许POS在容量已满时创建预订",
+        "notificationSettings": "通知设置",
+        "smsEnabled": "启用短信通知",
+        "smsEnabledDescription": "向客户发送预订更新的短信通知",
+        "emailEnabled": "启用电子邮件通知",
+        "emailEnabledDescription": "向客户发送预订更新的电子邮件通知",
+        "notifyOnConfirm": "确认时通知",
+        "notifyOnConfirmDescription": "当预订被确认时发送通知",
+        "notifyOnCancel": "取消时通知",
+        "notifyOnCancelDescription": "当预订被取消时发送通知",
         "qrPay": "二维码支付",
         "terminalScanPay": "终端扫描支付",
         "terminalQrPay": "终端二维码支付",

package/src/views/kiosk/settings/KioskSettingView.vue

@@ -156,6 +156,7 @@
           v-if="!getCoverImagePreview('coverImageLandscape')"
           accept="image/*"
           :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-full max-w-[400px] aspect-video"
           @file-upload="uploadCoverImage('coverImageLandscape', $event)"
           @file-rejected="handleCoverImageRejected('coverImageLandscape', $event)"
         />
@@ -163,13 +164,13 @@
           <img
             :src="getCoverImagePreview('coverImageLandscape')!"
             :alt="t('order.coverImageLandscape')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImageLandscape')"
+            class="max-w-[400px] aspect-video object-cover rounded-md border border-fm-color-neutral-gray-200"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImageLandscape')"
           />
         </div>
       </div>
@@ -183,6 +184,7 @@
           v-if="!getCoverImagePreview('coverImagePortrait')"
           accept="image/*"
           :max-file-size="MAX_IMAGE_FILE_SIZE"
+          content-class="w-[240px] aspect-[9/16]"
           @file-upload="uploadCoverImage('coverImagePortrait', $event)"
           @file-rejected="handleCoverImageRejected('coverImagePortrait', $event)"
         />
@@ -190,13 +192,13 @@
           <img
             :src="getCoverImagePreview('coverImagePortrait')!"
             :alt="t('order.coverImagePortrait')"
-            class="w-full max-w-[360px] max-h-[200px] object-cover rounded-md border border-fm-color-neutral-gray-200"
-          />
-          <FmButton
-            variant="tertiary"
-            class="mr-auto"
-            :label="t('common.delete')"
-            @click="clearCoverImage('coverImagePortrait')"
+            class="max-w-[200px] aspect-[9/16] object-cover rounded-md border border-fm-color-neutral-gray-200"
+          />
+          <FmButton
+            variant="tertiary"
+            class="mr-auto"
+            :label="t('common.delete')"
+            @click="clearCoverImage('coverImagePortrait')"
           />
         </div>
       </div>

package/src/views/order-settings/OrderSettingsView.vue

@@ -27,6 +27,7 @@ import SmsSetting from './sms/SmsSetting.vue'
 
 import GeneralSetting from './general/GeneralSetting.vue'
 import QueueSetting from './queue/QueueSetting.vue'
+import ReservationSetting from './reservation/ReservationSetting.vue'
 import { useI18n, useCoreStore } from '@feedmepos/mf-common'
 import { useMenuStore } from '@/stores/menu/menu'
 import { useSnackbarFunctions } from '@/components/snackbar'
@@ -45,6 +46,7 @@ type OrderSettingMenuItemValue =
   // | 'discountRule'
   | 'general'
   | 'queue'
+  | 'reservation'
 const selectedOrderSetting = ref<OrderSettingMenuItemValue>('delivery')
 
 const settingItem = computed<FmTabProps[]>(() => [
@@ -56,7 +58,8 @@ const settingItem = computed<FmTabProps[]>(() => [
   // { label: t('order.discountRule.title'), value: 'discountRule' },
   { label: t('order.sms'), value: 'sms' },
   { label: t('order.general'), value: 'general' },
-  { label: t('order.queue'), value: 'queue' }
+  { label: t('order.queue'), value: 'queue' },
+  { label: t('order.reservation'), value: 'reservation' }
 ])
 
 const currentComponent = computed(() => {
@@ -79,6 +82,8 @@ const currentComponent = computed(() => {
       return GeneralSetting
     case 'queue':
       return QueueSetting
+    case 'reservation':
+      return ReservationSetting
   }
 })
 

package/src/views/order-settings/reservation/CopySettingsSheet.vue

@@ -0,0 +1,256 @@
+<template>
+  <FmSideSheet :max-width="560" v-model="showSheet">
+    <template #side-sheet-button>
+      <FmButton label="Copy settings from another restaurant" icon="edit" variant="plain"
+        class="border-1 rounded-lg border-fm-color-primary" />
+    </template>
+
+    <template #side-sheet-header> Copy settings from </template>
+
+    <template #default>
+      <div class="flex flex-col gap-24">
+        <!-- Restaurant Selector -->
+        <div>
+          <FmSelect :items="availableRestaurants" :model-value="selectedRestaurantId"
+            @update:model-value="(v: string) => (selectedRestaurantId = v)" placeholder="Select" :width="512" />
+        </div>
+
+        <!-- Configuration Section -->
+        <div>
+          <div class="fm-typo-en-title-sm-600 mb-16">Configuration</div>
+
+          <div class="flex flex-col gap-12 pl-8">
+            <!-- All Checkbox -->
+            <FmCheckbox label="All" :model-value="isAllSelected" value="all" @update:model-value="toggleAll" />
+
+            <!-- Individual Configuration Checkboxes -->
+            <FmCheckbox label="Reservation Availability" :model-value="configOptions.reservationAvailability"
+              value="reservationAvailability"
+              @update:model-value="(v: boolean) => updateConfigOption('reservationAvailability', v)" />
+
+            <FmCheckbox label="Time Settings" :model-value="configOptions.timeSettings" value="timeSettings"
+              @update:model-value="(v: boolean) => updateConfigOption('timeSettings', v)" />
+
+            <FmCheckbox label="Table Capacity Settings" :model-value="configOptions.tableCapacity" value="tableCapacity"
+              @update:model-value="(v: boolean) => updateConfigOption('tableCapacity', v)" />
+
+            <FmCheckbox label="Pre-order" :model-value="configOptions.preorder" value="preorder"
+              @update:model-value="(v: boolean) => updateConfigOption('preorder', v)" />
+
+            <FmCheckbox label="Guest Preferences" :model-value="configOptions.guestPreferences" value="guestPreferences"
+              @update:model-value="(v: boolean) => updateConfigOption('guestPreferences', v)" />
+
+            <FmCheckbox label="Guest Message" :model-value="configOptions.guestMessage" value="guestMessage"
+              @update:model-value="(v: boolean) => updateConfigOption('guestMessage', v)" />
+
+            <FmCheckbox label="Cancellation Policy" :model-value="configOptions.cancellationPolicy"
+              value="cancellationPolicy"
+              @update:model-value="(v: boolean) => updateConfigOption('cancellationPolicy', v)" />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #side-sheet-footer>
+      <div class="flex flex-col gap-16 w-full">
+        <FmSnackbar variant="warning" class="!shadow-none"
+          :description="`This will overwrite all reservation settings for ${targetRestaurantName}`" />
+        <div class="flex items-center justify-start gap-8">
+          <FmButton label="Apply" @click="handleApply" :disabled="!canApply" :loading="isLoading" />
+          <FmButton label="Cancel" variant="tertiary" @click="handleCancel" />
+        </div>
+      </div>
+    </template>
+  </FmSideSheet>
+</template>
+
+<script setup lang="ts">
+import { useCoreStore, useI18n } from '@feedmepos/mf-common'
+import { computed, ref, watch } from 'vue'
+import { ReservationApi } from '@/api/reservation'
+import { useSnackbarFunctions } from '@/components/snackbar'
+import type { FdoOrderReservationSettingsV2 } from '@entity'
+
+const { t } = useI18n()
+const { showSuccess, showError } = useSnackbarFunctions()
+const Core = useCoreStore()
+
+// Props
+const props = defineProps<{
+  currentSettings: FdoOrderReservationSettingsV2
+}>()
+
+// Emits
+const emit = defineEmits<{
+  apply: [settings: Partial<FdoOrderReservationSettingsV2>]
+}>()
+
+// State
+const showSheet = ref(false)
+const isLoading = ref(false)
+
+const configOptions = ref({
+  reservationAvailability: false,
+  timeSettings: false,
+  tableCapacity: false,
+  preorder: false,
+  guestPreferences: false,
+  guestMessage: false,
+  cancellationPolicy: false
+})
+
+// Computed
+const { currentRestaurant } = Core
+
+const availableRestaurants = computed(() => {
+  // Filter out current restaurant from the list
+  return (Core.restaurants.value ?? [])
+    .filter((r) => r._id !== currentRestaurant.value?._id)
+    .map((r) => ({ label: r.profile.name, value: r._id }))
+})
+
+const selectedRestaurantId = ref<string>('')
+
+// Watch to set initial value when availableRestaurants loads
+watch(availableRestaurants, (newRestaurants) => {
+  if (newRestaurants.length > 0 && !selectedRestaurantId.value) {
+    selectedRestaurantId.value = newRestaurants[0].value
+  }
+}, { immediate: true })
+
+const targetRestaurantName = computed(() => {
+  return currentRestaurant.value?.profile.name ?? ''
+})
+
+const isAllSelected = computed(() => {
+  return Object.values(configOptions.value).every((v) => v === true)
+})
+
+const canApply = computed(() => {
+  return (
+    selectedRestaurantId.value !== '' && Object.values(configOptions.value).some((v) => v === true)
+  )
+})
+
+// Methods
+function toggleAll(value: boolean) {
+  Object.keys(configOptions.value).forEach((key) => {
+    configOptions.value[key as keyof typeof configOptions.value] = value
+  })
+}
+
+function updateConfigOption(key: keyof typeof configOptions.value, value: boolean) {
+  configOptions.value[key] = value
+}
+
+async function handleApply() {
+  if (!selectedRestaurantId.value) {
+    showError('Please select a restaurant')
+    return
+  }
+
+  if (!Object.values(configOptions.value).some((v) => v)) {
+    showError('Please select at least one configuration option')
+    return
+  }
+
+  try {
+    isLoading.value = true
+
+    // Fetch settings from selected restaurant
+    const sourceSettings = await ReservationApi.getReservationSetting(selectedRestaurantId.value)
+
+    if (!sourceSettings || !sourceSettings.ranges || sourceSettings.ranges.length === 0) {
+      showError('No settings found for the selected restaurant')
+      return
+    }
+
+    // Build partial settings object based on selected options
+    const updatedSettings: Partial<FdoOrderReservationSettingsV2> = {}
+    const sourceRange = sourceSettings.ranges[0]
+    const currentRange = props.currentSettings.ranges[0]
+
+    // Create a copy of the current range to modify
+    const updatedRange = { ...currentRange }
+
+    // Copy selected configuration sections
+    if (configOptions.value.reservationAvailability) {
+      // Copy enable state, min/max lead duration
+      updatedRange.enable = sourceRange.enable
+      updatedRange.minLeadDuration = { ...sourceRange.minLeadDuration }
+      updatedRange.maxLeadDuration = { ...sourceRange.maxLeadDuration }
+    }
+
+    if (configOptions.value.timeSettings) {
+      // Copy operating hours, slot interval, booking duration
+      updatedRange.operatingHours = JSON.parse(JSON.stringify(sourceRange.operatingHours))
+      updatedRange.slotInterval = sourceRange.slotInterval
+      updatedRange.bookingDuration = sourceRange.bookingDuration
+    }
+
+    if (configOptions.value.tableCapacity) {
+      // Copy capacity tiers
+      updatedRange.capacityTiers = JSON.parse(JSON.stringify(sourceRange.capacityTiers))
+    }
+
+    if (configOptions.value.preorder) {
+      // Copy preorder setting
+      updatedRange.enablePreorder = sourceRange.enablePreorder
+    }
+
+    if (configOptions.value.guestPreferences) {
+      // Copy preferences
+      updatedRange.preferences = JSON.parse(JSON.stringify(sourceRange.preferences))
+    }
+
+    if (configOptions.value.guestMessage) {
+      // Copy guest message
+      updatedRange.guestMessage = sourceRange.guestMessage
+    }
+
+    if (configOptions.value.cancellationPolicy) {
+      // Copy cancellation policy
+      updatedRange.cancellationPolicy = sourceRange.cancellationPolicy
+    }
+
+    // Update the settings with the modified range
+    updatedSettings.ranges = [updatedRange]
+
+    // Emit the updated settings to parent
+    emit('apply', updatedSettings)
+
+    // Show success with source outlet name
+    const sourceName = availableRestaurants.value.find(r => r.value === selectedRestaurantId.value)?.label ?? 'selected outlet'
+    showSuccess(`Settings from "${sourceName}" have been applied. Please review and save changes.`)
+
+    // Close the side sheet
+    showSheet.value = false
+
+    // Reset form
+    resetForm()
+  } catch (error) {
+    console.error('Error copying settings:', error)
+    showError('Failed to copy settings. Please try again.')
+  } finally {
+    isLoading.value = false
+  }
+}
+
+function handleCancel() {
+  showSheet.value = false
+  resetForm()
+}
+
+function resetForm() {
+  selectedRestaurantId.value = ''
+  configOptions.value = {
+    reservationAvailability: false,
+    timeSettings: false,
+    tableCapacity: false,
+    preorder: false,
+    guestPreferences: false,
+    guestMessage: false,
+    cancellationPolicy: false
+  }
+}
+</script>

package/src/views/order-settings/reservation/CustomSelect.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { components } from '@feedmepos/ui-library';
+
+interface SelectItem {
+  label: string
+  value: string
+  icon?: 'radio' | 'checkbox'
+}
+
+const props = defineProps<{
+  modelValue: string
+  items: SelectItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const selectRef = ref<HTMLDivElement | null>(null)
+const menuRef = ref<typeof components['FmMenu'] | null>(null);
+
+const selectedItem = computed(() => {
+  const found = props.items.find((item) => item.value === props.modelValue)
+  return found || props.items[0] || { label: 'Select...', value: '', icon: undefined }
+})
+
+function selectItem(item: SelectItem) {
+  emit('update:modelValue', item.value)
+  menuRef.value?.toggleMenu();
+}
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    menuRef.value?.toggleMenu();
+  }
+}
+
+// Setup click outside listener when component mounts/unmounts
+import { onMounted, onUnmounted } from 'vue'
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="relative w-full" ref="selectRef">
+    <!-- Use FmMenu for dropdown behavior -->
+    <FmMenu ref="menuRef" @menu-changed="(v) => isOpen = v">
+      <template #menu-button>
+        <FmField>
+          <div class="flex items-center gap-4 w-full">
+            <FmCheckbox v-if="selectedItem.icon == 'checkbox'" :value="true" :model-value="true"
+              @update:model-value="(v) => v" />
+            <div v-if="selectedItem.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <!-- Label -->
+            <span class="text-gray-900 flex-1">
+              {{ selectedItem.label }}
+            </span>
+            <FmIcon name="keyboard_arrow_down" class="text-gray-500 transition-transform duration-200 ml-2"
+              :class="{ 'rotate-180': isOpen }" />
+          </div>
+        </FmField>
+      </template>
+
+      <!-- Dropdown Menu Items -->
+      <template #default>
+        <div :style="{ width: `${selectRef?.clientWidth}px` }" class="rounded-md flex flex-col gap-4">
+          <div v-for="item in items" :key="item.value" @click="selectItem(item)"
+            class="cursor-pointer transition-colors duration-150 flex items-center p-8 rounded-sm hover:bg-orange-100">
+            <FmCheckbox v-if="item.icon == 'checkbox'" :value="true" :model-value="true" @update:model-value="(v) => v"
+              class="mr-8" />
+            <div v-if="item.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <span class="text-gray-900 flex-1"> {{ item.label }} </span>
+          </div>
+        </div>
+      </template>
+    </FmMenu>
+  </div>
+</template>
+
+<style scoped>
+/* Match FmTextField styling */
+.fm-text-field-input {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+</style>