@feedmepos/mf-order-setting 0.0.49 → 0.0.50

package/src/views/kiosk/devices/KioskDeviceCard.vue

@@ -1,104 +1,185 @@
 <template>
-  <div class="border fm-corner-radius-lg flex justify-between pr-[1rem] w-11/12">
-    <FmSideSheet
-      :header="t('order.deviceDetails')"
-      dismiss-away
-      class="w-full"
-      :maxWidth="700"
-      @on:clickedAway="closeUpdateDevicePin"
-    >
-      <template #side-sheet-button>
-        <FmListItem
-          class="flex-1"
-          :label="device.name"
-          :sublabel="`${t('order.activatedDate')}: ${dayjs(device.activatedAt).format('DD MMM YYYY HH:mm')}`"
+  <div class="border fm-corner-radius-lg p-12 hover:bg-fm-color-neutral-gray-50 transition-colors">
+    <!-- Header Row: Type Badge + Slot + Actions -->
+    <div class="flex items-center justify-between mb-2">
+      <div class="flex items-center gap-2">
+        <span
+          class="px-2 py-1 fm-corner-radius-md fm-typo-en-body-sm-600 uppercase bg-fm-color-neutral-gray-200 text-fm-color-typo-secondary"
         >
-        </FmListItem>
-      </template>
-      <div v-if="!showPinSetting" class="py-[1rem] flex flex-col gap-6">
-        <span class="fm-typo-en-title-sm-600">{{ device.name }}</span>
-        <div class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2">
-          <span class="fm-typo-en-title-sm-600 mb-3">App Info</span>
-          <div class="flex flex-col gap-1 mb-2">
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Type</span>
-            <span class="fm-typo-en-body-lg-600 block">{{ appType }}</span>
-          </div>
-          <div class="flex flex-col gap-1 mb-2">
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Version</span>
-            <span class="fm-typo-en-body-lg-600 block">{{
-              device.deviceAppVersion ?? 'Below 0.0.42'
-            }}</span>
-          </div>
-          <div class="flex flex-col gap-1 mb-2">
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">OTA Version</span>
-            <span class="fm-typo-en-body-lg-600 block">{{
-              device.deviceAppOTAVersion ?? 'Not available'
-            }}</span>
-          </div>
-          <div class="flex flex-col gap-1 mb-2">
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">PIN Code</span>
-            <span class="fm-typo-en-body-lg-600 block">{{ isPinUpdate ? 'Yes' : 'No' }}</span>
-          </div>
-          <FmButton
-            class="w-auto"
-            variant="primary"
-            :label="device?.pinInfo ? 'Reset Device PIN' : 'Set Device PIN'"
-            @click="showUpdateDevicePin"
-          />
-        </div>
-        <div
-          v-for="config in configs.filter((c) => c[1])"
-          class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2"
+          {{ isTabletApp ? 'Tablet' : 'Kiosk' }}
+        </span>
+        <span
+          v-if="isTabletApp && device.slotInfo"
+          class="fm-typo-en-body-md-600 text-fm-color-typo-primary"
         >
-          <span class="fm-typo-en-title-sm-600" v-if="config[1]">{{ config[0] }}</span>
-          <div
-            class="flex flex-col gap-1"
-            v-if="config[1]"
-            v-for="configEntry in Object.entries(config[1])"
-          >
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{
-              configEntry[0]
-            }}</span>
-            <span class="fm-typo-en-body-lg-600 block">{{
-              configEntry[1] == '' ? '-' : configEntry[1]
-            }}</span>
-          </div>
-        </div>
+          {{ device.slotInfo }}
+        </span>
       </div>
-      <div v-else>
-        <div class="py-[1rem] flex flex-col gap-6 text-center items-center">
-          <div class="flex flex-col gap-1 mb-2">
-            <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{ pinText }}</span>
-            <span class="mt-5 block">
-              <FmPinField v-if="!isPinEntered" :length="4" @complete="(val) => pinEntered(val)" />
-              <FmPinField v-if="isPinEntered" :length="4" @complete="(val) => pinEntered(val)" />
-            </span>
+      <div class="flex items-center gap-1">
+        <FmSideSheet
+          :header="t('order.deviceDetails')"
+          dismiss-away
+          :maxWidth="700"
+          @on:clickedAway="closeUpdateDevicePin"
+        >
+          <template #side-sheet-button>
+            <FmButton variant="tertiary" icon="more_vert" />
+          </template>
+          <div v-if="!showPinSetting" class="py-[1rem] flex flex-col gap-6">
+            <span class="fm-typo-en-title-sm-600">{{ device.name }}</span>
+            <div class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2">
+              <span class="fm-typo-en-title-sm-600 mb-3">App Info</span>
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Type</span>
+                <span class="fm-typo-en-body-lg-600 block">{{ appType }}</span>
+              </div>
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Machine ID</span>
+                <span class="fm-typo-en-body-lg-600 block font-mono text-sm break-all">{{
+                  device.machineId
+                }}</span>
+              </div>
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">Version</span>
+                <span class="fm-typo-en-body-lg-600 block">{{
+                  device.deviceAppVersion ?? 'Below 0.0.42'
+                }}</span>
+              </div>
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">OTA Version</span>
+                <span class="fm-typo-en-body-lg-600 block">{{
+                  device.deviceAppOTAVersion ?? 'Not available'
+                }}</span>
+              </div>
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">PIN Code</span>
+                <span class="fm-typo-en-body-lg-600 block">{{ isPinUpdate ? 'Yes' : 'No' }}</span>
+              </div>
+              <FmButton
+                class="w-auto"
+                variant="primary"
+                :label="device?.pinInfo ? 'Reset Device PIN' : 'Set Device PIN'"
+                @click="showUpdateDevicePin"
+              />
+            </div>
+            <div
+              v-for="config in configs.filter((c) => c[1])"
+              :key="config[0]"
+              class="w-full border p-[1.5rem] fm-corner-radius-lg flex flex-col gap-2"
+            >
+              <span class="fm-typo-en-title-sm-600" v-if="config[1]">{{ config[0] }}</span>
+              <div
+                class="flex flex-col gap-1"
+                v-if="config[1]"
+                v-for="configEntry in Object.entries(config[1])"
+                :key="configEntry[0]"
+              >
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{
+                  configEntry[0]
+                }}</span>
+                <span class="fm-typo-en-body-lg-600 block">{{
+                  configEntry[1] == '' ? '-' : configEntry[1]
+                }}</span>
+              </div>
+            </div>
           </div>
-          <FmButton
-            class="w-1/3"
-            variant="secondary"
-            label="Cancel reset PIN"
-            @click="closeUpdateDevicePin"
-          />
-        </div>
+          <div v-else>
+            <div class="py-[1rem] flex flex-col gap-6 text-center items-center">
+              <div class="flex flex-col gap-1 mb-2">
+                <span class="fm-typo-en-body-lg-400 text-fm-color-typo-secondary">{{
+                  pinText
+                }}</span>
+                <span class="mt-5 block">
+                  <FmPinField
+                    v-if="!isPinEntered"
+                    :length="4"
+                    @complete="(val) => pinEntered(val)"
+                  />
+                  <FmPinField
+                    v-if="isPinEntered"
+                    :length="4"
+                    @complete="(val) => pinEntered(val)"
+                  />
+                </span>
+              </div>
+              <FmButton
+                class="w-1/3"
+                variant="secondary"
+                label="Cancel reset PIN"
+                @click="closeUpdateDevicePin"
+              />
+            </div>
+          </div>
+        </FmSideSheet>
+        <FmButton
+          variant="plain"
+          icon="link_off"
+          class="text-fm-color-system-error-300"
+          @click="openUnbindDialog"
+        />
       </div>
-    </FmSideSheet>
-    <FmButton
-      variant="plain"
-      append-icon="link_off"
-      class="text-fm-color-system-error-300 align-middle my-auto"
-      @click="openUnbindDialog"
-    />
+    </div>
+
+    <!-- Device Name (truncated for long names) -->
+    <div
+      class="fm-typo-en-body-md-600 text-fm-color-typo-primary mb-1 overflow-hidden text-ellipsis whitespace-nowrap"
+      :title="device.name"
+    >
+      {{ device.name }}
+    </div>
+
+    <!-- Machine ID Row (clickable to copy) -->
+    <div
+      class="flex items-center gap-1 mb-2 cursor-pointer group"
+      @click="copyMachineId"
+      :title="t('order.clickToCopy')"
+    >
+      <span class="fm-typo-en-body-sm-400 text-fm-color-typo-tertiary font-mono">
+        {{ truncatedMachineId }}
+      </span>
+      <FmIcon
+        name="content_copy"
+        class="text-fm-color-typo-tertiary opacity-0 group-hover:opacity-100 transition-opacity"
+      />
+    </div>
+
+    <!-- Info Row: Version, OTA, PIN, Last Startup -->
+    <div
+      class="flex items-center gap-3 flex-wrap fm-typo-en-body-sm-400 text-fm-color-typo-secondary"
+    >
+      <span class="flex items-center gap-1">
+        <FmIcon name="smartphone" />
+        v{{ device.deviceAppVersion ?? '?' }}
+      </span>
+      <span v-if="device.deviceAppOTAVersion" class="flex items-center gap-1">
+        <FmIcon name="system_update" />
+        {{ device.deviceAppOTAVersion }}
+      </span>
+      <span class="flex items-center gap-1">
+        <FmIcon name="lock" />
+        {{ isPinUpdate ? t('order.pinSet') : t('order.noPin') }}
+      </span>
+      <span
+        v-if="device.lastStartup"
+        class="flex items-center gap-1"
+        :title="formatFullDate(device.lastStartup)"
+      >
+        <FmIcon name="schedule" />
+        {{ formatRelativeTime(device.lastStartup) }}
+      </span>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
 import type { MfKioskDevice } from '@/modules/kiosk/interface'
-import { type SnackbarPosition, useDialog, useSnackbar } from '@feedmepos/ui-library'
-import KioskUnbindConfirm from './KioskUnbindConfirm.vue'
-import { computed, onUnmounted, ref } from 'vue'
 import { useKioskStore } from '@/stores/kiosk'
-import dayjs from 'dayjs'
 import { useI18n } from '@feedmepos/mf-common'
+import { useDialog, useSnackbar, type SnackbarPosition } from '@feedmepos/ui-library'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import { computed, ref } from 'vue'
+import KioskUnbindConfirm from './KioskUnbindConfirm.vue'
+dayjs.extend(relativeTime)
 
 const { t } = useI18n()
 
@@ -121,6 +202,41 @@ const appType = computed(() => {
   return props.device?.deviceAppType === 'TABLET_APP' ? 'Tablet App' : 'Kiosk App'
 })
 
+const isTabletApp = computed(() => {
+  return props.device?.deviceAppType === 'TABLET_APP'
+})
+
+const truncatedMachineId = computed(() => {
+  const id = props.device.machineId
+  if (!id || id.length <= 16) return id
+  return `${id.slice(0, 8)}...${id.slice(-4)}`
+})
+
+async function copyMachineId() {
+  try {
+    await navigator.clipboard.writeText(props.device.machineId)
+    Snackbar.open({
+      type: 'success',
+      message: t('order.machineIdCopied'),
+      position: 'bottom' as SnackbarPosition
+    })
+  } catch {
+    Snackbar.open({
+      type: 'error',
+      message: t('order.copyFailed'),
+      position: 'bottom' as SnackbarPosition
+    })
+  }
+}
+
+function formatRelativeTime(date: Date): string {
+  return dayjs(date).fromNow()
+}
+
+function formatFullDate(date: Date): string {
+  return dayjs(date).format('DD MMM YYYY HH:mm:ss')
+}
+
 // function showDeviceDetails() {
 //     Dialog.open({
 //         title: props.device.name,

package/src/views/kiosk/devices/KioskDevicesView.vue

@@ -1,29 +1,145 @@
 <template>
-    <div>
+  <div>
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center justify-between">
         <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <span class="fm-typo-en-title-sm-600 block"> {{ t('order.kioskDisplay') }} </span>
-                <span class="fm-typo-en-body-md-400 block"> {{ t('order.kioskDisplayDescription') }} </span>
-            </div>
-            <div class="flex flex-col gap-6">
-                <KioskDeviceCard v-for="device in devices" :key="device.machineId" :device="device"></KioskDeviceCard>
-                <FmButton variant="plain" class="w-[10rem] border border-fm-color-primary fm-corner-radius-lg"
-                    :label="t('order.bindDevice')" size="md" prepend-icon="link" @click="requestOtp" />
-            </div>
+          <span class="fm-typo-en-title-sm-600 block"> {{ t('order.kioskDisplay') }} </span>
+          <span class="fm-typo-en-body-md-400 block"> {{ t('order.kioskDisplayDescription') }} </span>
         </div>
+        <FmButton
+          variant="primary"
+          :label="t('order.bindDevice')"
+          size="md"
+          prepend-icon="link"
+          @click="$emit('requestOtp')"
+        />
+      </div>
+
+      <!-- Search and Filter Bar -->
+      <div class="flex items-center gap-3 flex-wrap">
+        <FmSearch
+          v-model:model-value="searchQuery"
+          class="flex-1 min-w-[200px] max-w-[400px]"
+          :placeholder="t('order.searchDevices')"
+        />
+        <FmMenu>
+          <template #menu-button>
+            <FmButton
+              variant="tertiary"
+              prepend-icon="filter_list"
+              :label="activeFilterLabel"
+              class="fm-typo-en-body-md-600"
+            />
+          </template>
+          <FmMenuItem
+            :model-value="filterType === 'all'"
+            :label="t('order.allTypes')"
+            @click="filterType = 'all'"
+          />
+          <FmMenuItem
+            :model-value="filterType === 'tablet'"
+            :label="t('order.tabletOnly')"
+            @click="filterType = 'tablet'"
+          />
+          <FmMenuItem
+            :model-value="filterType === 'kiosk'"
+            :label="t('order.kioskOnly')"
+            @click="filterType = 'kiosk'"
+          />
+        </FmMenu>
+        <span class="fm-typo-en-body-sm-400 text-fm-color-typo-tertiary">
+          {{ t('order.showingDevices', { count: filteredDevices.length, total: devices.length }) }}
+        </span>
+      </div>
+
+      <!-- Device Cards -->
+      <div class="grid grid-cols-2 gap-2 py-8">
+        <KioskDeviceCard
+          v-for="device in filteredDevices"
+          :key="device.machineId"
+          :device="device"
+        />
+        <div
+          v-if="filteredDevices.length === 0 && devices.length > 0"
+          class="text-center py-8 text-fm-color-typo-tertiary fm-typo-en-body-md-400 col-span-2"
+        >
+          {{ t('order.noDevicesMatch') }}
+        </div>
+        <div
+          v-if="devices.length === 0"
+          class="text-center py-8 text-fm-color-typo-tertiary fm-typo-en-body-md-400 col-span-2"
+        >
+          {{ t('order.noDevicesBound') }}
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import KioskDeviceCard from "./KioskDeviceCard.vue";
-import type { MfKioskDevice } from "@/modules/kiosk/interface";
+import type { MfKioskDevice } from '@/modules/kiosk/interface'
 import { useI18n } from '@feedmepos/mf-common'
+import { computed, ref } from 'vue'
+import KioskDeviceCard from './KioskDeviceCard.vue'
 
-const { t } = useI18n();
+const { t } = useI18n()
 
 interface Props {
-    devices: MfKioskDevice[],
-    requestOtp: () => Promise<void>;
+  devices: MfKioskDevice[]
 }
 
-const props = defineProps<Props>();
-</script>
+const props = defineProps<Props>()
+defineEmits<{
+  (e: 'requestOtp'): void
+}>()
+
+const searchQuery = ref('')
+const filterType = ref<'all' | 'tablet' | 'kiosk'>('all')
+
+const activeFilterLabel = computed(() => {
+  switch (filterType.value) {
+    case 'tablet':
+      return t('order.tabletOnly')
+    case 'kiosk':
+      return t('order.kioskOnly')
+    default:
+      return t('order.allTypes')
+  }
+})
+
+const filteredDevices = computed(() => {
+  let result = props.devices
+
+  // Apply type filter
+  if (filterType.value === 'tablet') {
+    result = result.filter((d) => d.deviceAppType === 'TABLET_APP')
+  } else if (filterType.value === 'kiosk') {
+    result = result.filter((d) => d.deviceAppType !== 'TABLET_APP')
+  }
+
+  // Apply search filter
+  const query = searchQuery.value.toLowerCase().trim()
+  if (query) {
+    result = result.filter((d) => {
+      const name = d.name?.toLowerCase() || ''
+      const machineId = d.machineId?.toLowerCase() || ''
+      const slot = d.slotInfo?.toLowerCase() || ''
+      return name.includes(query) || machineId.includes(query) || slot.includes(query)
+    })
+  }
+
+  // Sort tablets by slot, kiosks by name
+  return result.sort((a, b) => {
+    // Tablets first
+    if (a.deviceAppType === 'TABLET_APP' && b.deviceAppType !== 'TABLET_APP') return -1
+    if (a.deviceAppType !== 'TABLET_APP' && b.deviceAppType === 'TABLET_APP') return 1
+
+    // For tablets, sort by slot
+    if (a.deviceAppType === 'TABLET_APP' && b.deviceAppType === 'TABLET_APP') {
+      return (a.slotInfo || '').localeCompare(b.slotInfo || '')
+    }
+
+    // For kiosks, sort by name
+    return (a.name || '').localeCompare(b.name || '')
+  })
+})
+</script>