diff --git a/.gitignore b/.gitignore
index 8e8bb85bef..f4008a005a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -88,3 +88,6 @@ mongod
 #=========
 nc_minimal_dbs/
 test_noco.db
+
+# ngrok config
+httpbin
diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts
index 41be648f73..39a481c989 100644
--- a/packages/nc-gui/components.d.ts
+++ b/packages/nc-gui/components.d.ts
@@ -147,6 +147,7 @@ declare module '@vue/runtime-core' {
     MdiCloseCircleOutline: typeof import('~icons/mdi/close-circle-outline')['default']
     MdiCloseThick: typeof import('~icons/mdi/close-thick')['default']
     MdiCodeJson: typeof import('~icons/mdi/code-json')['default']
+    MdiCodeScan: typeof import('~icons/mdi/code-scan')['default']
     MdiCodeTags: typeof import('~icons/mdi/code-tags')['default']
     MdiCog: typeof import('~icons/mdi/cog')['default']
     MdiCommentTextOutline: typeof import('~icons/mdi/comment-text-outline')['default']
@@ -220,6 +221,7 @@ declare module '@vue/runtime-core' {
     MdiPlusCircleOutline: typeof import('~icons/mdi/plus-circle-outline')['default']
     MdiPlusOutline: typeof import('~icons/mdi/plus-outline')['default']
     MdiPlusThick: typeof import('~icons/mdi/plus-thick')['default']
+    MdiQrcodeScan: typeof import('~icons/mdi/qrcode-scan')['default']
     MdiReddit: typeof import('~icons/mdi/reddit')['default']
     MdiRefresh: typeof import('~icons/mdi/refresh')['default']
     MdiReload: typeof import('~icons/mdi/reload')['default']
diff --git a/packages/nc-gui/components/account/License.vue b/packages/nc-gui/components/account/License.vue
index 66490d09a5..aaef6a00f3 100644
--- a/packages/nc-gui/components/account/License.vue
+++ b/packages/nc-gui/components/account/License.vue
@@ -14,9 +14,8 @@ let key = $ref('')
 const loadLicense = async () => {
   try {
     const response = await api.orgLicense.get()
-
-    key = response.key
-  } catch (e) {
+    key = response.key!
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -25,7 +24,7 @@ const setLicense = async () => {
     await api.orgLicense.set({ key: key })
     message.success('License key updated')
     await loadAppInfo()
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
   $e('a:account:license')
@@ -45,5 +44,3 @@ loadLicense()
     </div>
   </div>
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/components/account/SignupSettings.vue b/packages/nc-gui/components/account/SignupSettings.vue
index b9d2559d47..3db25fe6da 100644
--- a/packages/nc-gui/components/account/SignupSettings.vue
+++ b/packages/nc-gui/components/account/SignupSettings.vue
@@ -12,7 +12,7 @@ const loadSettings = async () => {
   try {
     const response = await api.orgAppSettings.get()
     settings = response
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -21,7 +21,7 @@ const saveSettings = async () => {
   try {
     await api.orgAppSettings.set(settings)
     message.success(t('msg.success.settingsSaved'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
diff --git a/packages/nc-gui/components/account/Token.vue b/packages/nc-gui/components/account/Token.vue
index 48760a5797..eb8d92ac66 100644
--- a/packages/nc-gui/components/account/Token.vue
+++ b/packages/nc-gui/components/account/Token.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { VNodeRef } from '@vue/runtime-core'
 import { Empty, Modal, message } from 'ant-design-vue'
 import type { ApiTokenType, RequestParams, UserType } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, useApi, useCopy, useNuxtApp } from '#imports'
@@ -42,7 +43,7 @@ const loadTokens = async (page = currentPage, limit = currentLimit) => {
     pagination.pageSize = 10
 
     tokens = response.list as UserType[]
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -55,11 +56,10 @@ const deleteToken = async (token: string) => {
     type: 'warn',
     onOk: async () => {
       try {
-        // todo: delete token
         await api.orgTokens.delete(token)
         message.success(t('msg.success.tokenDeleted'))
         await loadTokens()
-      } catch (e) {
+      } catch (e: any) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
       $e('a:account:token:delete')
@@ -75,7 +75,7 @@ const generateToken = async () => {
     message.success(t('msg.success.tokenGenerated'))
     selectedTokenData = {}
     await loadTokens()
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
   $e('a:api-token:generate')
@@ -90,14 +90,12 @@ const copyToken = async (token: string | undefined) => {
     message.info(t('msg.info.copiedToClipboard'))
 
     $e('c:api-token:copy')
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
 }
 
-const descriptionInput = (el) => {
-  el?.focus()
-}
+const descriptionInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/account/UserList.vue b/packages/nc-gui/components/account/UserList.vue
index 281d04a85a..b5bc127a52 100644
--- a/packages/nc-gui/components/account/UserList.vue
+++ b/packages/nc-gui/components/account/UserList.vue
@@ -50,7 +50,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
     pagination.pageSize = 10
 
     users = response.list as UserType[]
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -65,7 +65,7 @@ const updateRole = async (userId: string, roles: Role) => {
     message.success(t('msg.success.roleUpdated'))
 
     $e('a:org-user:role-updated', { role: roles })
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -80,7 +80,7 @@ const deleteUser = async (userId: string) => {
         message.success(t('msg.success.userDeleted'))
         await loadUsers()
         $e('a:org-user:user-deleted')
-      } catch (e) {
+      } catch (e: any) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
     },
@@ -94,7 +94,7 @@ const resendInvite = async (user: User) => {
     // Invite email sent successfully
     message.success(t('msg.success.inviteEmailSent'))
     await loadUsers()
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 
@@ -108,7 +108,7 @@ const copyInviteUrl = async (user: User) => {
 
     // Invite URL copied to clipboard
     message.success(t('msg.success.inviteURLCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
   $e('c:user:copy-url')
@@ -123,7 +123,7 @@ const copyPasswordResetUrl = async (user: User) => {
     // Invite URL copied to clipboard
     message.success(t('msg.success.passwordResetURLCopied'))
     $e('c:user:copy-url')
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
diff --git a/packages/nc-gui/components/account/UsersModal.vue b/packages/nc-gui/components/account/UsersModal.vue
index bb00f71371..ac5a7f65da 100644
--- a/packages/nc-gui/components/account/UsersModal.vue
+++ b/packages/nc-gui/components/account/UsersModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { UserType } from 'nocodb-sdk'
+import type { VNodeRef } from '@vue/runtime-core'
+import type { OrgUserReqType } from 'nocodb-sdk'
 import {
   Form,
   computed,
@@ -72,11 +73,10 @@ const saveUser = async () => {
   await formRef.value?.validateFields()
 
   try {
-    // todo: update sdk(swagger.json)
     const res = await $api.orgUsers.add({
       roles: usersData.role,
       email: usersData.emails,
-    } as unknown as UserType)
+    } as unknown as OrgUserReqType)
 
     usersData.invitationToken = res.invite_token
     emit('reload')
@@ -98,7 +98,7 @@ const copyUrl = async () => {
 
     // Copied shareable base url to clipboard!
     message.success(t('msg.success.shareableURLCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
   $e('c:shared-base:copy-url')
@@ -110,9 +110,8 @@ const clickInviteMore = () => {
   usersData.role = Role.OrgLevelViewer
   usersData.emails = ''
 }
-const emailInput = ref((el) => {
-  el?.focus()
-})
+
+const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 </script>
 
 <template>
diff --git a/packages/nc-gui/components/cell/Checkbox.vue b/packages/nc-gui/components/cell/Checkbox.vue
index f482d24511..61fdeed407 100644
--- a/packages/nc-gui/components/cell/Checkbox.vue
+++ b/packages/nc-gui/components/cell/Checkbox.vue
@@ -1,5 +1,14 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, IsFormInj, ReadonlyInj, getMdiIcon, inject, useSelectedCellKeyupListener } from '#imports'
+import {
+  ActiveCellInj,
+  ColumnInj,
+  IsFormInj,
+  ReadonlyInj,
+  getMdiIcon,
+  inject,
+  parseProp,
+  useSelectedCellKeyupListener,
+} from '#imports'
 
 interface Props {
   // If the previous cell value was a text, the initial checkbox value is a string type
@@ -35,7 +44,7 @@ const checkboxMeta = $computed(() => {
       unchecked: 'mdi-checkbox-blank-circle-outline',
     },
     color: 'primary',
-    ...(column?.value?.meta || {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 
diff --git a/packages/nc-gui/components/cell/Currency.vue b/packages/nc-gui/components/cell/Currency.vue
index bdef2b4b0c..ee025aa9a2 100644
--- a/packages/nc-gui/components/cell/Currency.vue
+++ b/packages/nc-gui/components/cell/Currency.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { VNodeRef } from '@vue/runtime-core'
-import { ColumnInj, EditModeInj, computed, inject, useVModel } from '#imports'
+import { ColumnInj, EditModeInj, computed, inject, parseProp, useVModel } from '#imports'
 
 interface Props {
   modelValue: number | null | undefined
@@ -35,7 +35,7 @@ const currencyMeta = computed(() => {
   return {
     currency_locale: 'en-US',
     currency_code: 'USD',
-    ...(column.value.meta ? column.value.meta : {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 
diff --git a/packages/nc-gui/components/cell/DatePicker.vue b/packages/nc-gui/components/cell/DatePicker.vue
index 1beb28fc9a..8c470da152 100644
--- a/packages/nc-gui/components/cell/DatePicker.vue
+++ b/packages/nc-gui/components/cell/DatePicker.vue
@@ -8,6 +8,7 @@ import {
   computed,
   inject,
   isDrawerOrModalExist,
+  parseProp,
   ref,
   useSelectedCellKeyupListener,
   watch,
@@ -34,7 +35,7 @@ const editable = inject(EditModeInj, ref(false))
 
 let isDateInvalid = $ref(false)
 
-const dateFormat = $computed(() => columnMeta?.value?.meta?.date_format ?? 'YYYY-MM-DD')
+const dateFormat = $computed(() => parseProp(columnMeta?.value?.meta)?.date_format ?? 'YYYY-MM-DD')
 
 let localState = $computed({
   get() {
diff --git a/packages/nc-gui/components/cell/DateTimePicker.vue b/packages/nc-gui/components/cell/DateTimePicker.vue
index 63931e018a..82f25ee283 100644
--- a/packages/nc-gui/components/cell/DateTimePicker.vue
+++ b/packages/nc-gui/components/cell/DateTimePicker.vue
@@ -7,6 +7,7 @@ import {
   dateFormats,
   inject,
   isDrawerOrModalExist,
+  parseProp,
   ref,
   timeFormats,
   useProject,
@@ -38,8 +39,8 @@ const column = inject(ColumnInj)!
 let isDateInvalid = $ref(false)
 
 const dateTimeFormat = $computed(() => {
-  const dateFormat = column?.value?.meta?.date_format ?? dateFormats[0]
-  const timeFormat = column?.value?.meta?.time_format ?? timeFormats[0]
+  const dateFormat = parseProp(column?.value?.meta)?.date_format ?? dateFormats[0]
+  const timeFormat = parseProp(column?.value?.meta)?.time_format ?? timeFormats[0]
   return `${dateFormat} ${timeFormat}`
 })
 
diff --git a/packages/nc-gui/components/cell/Decimal.vue b/packages/nc-gui/components/cell/Decimal.vue
index 04b5659968..abade14fb7 100644
--- a/packages/nc-gui/components/cell/Decimal.vue
+++ b/packages/nc-gui/components/cell/Decimal.vue
@@ -3,6 +3,9 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
+  // when we set a number, then it is number type
+  // for sqlite, when we clear a cell or empty the cell, it returns ""
+  // otherwise, it is null type
   modelValue?: number | null | string
 }
 
@@ -22,8 +25,10 @@ const _vModel = useVModel(props, 'modelValue', emits)
 
 const vModel = computed({
   get: () => _vModel.value,
-  set: (value: string) => {
+  set: (value) => {
     if (value === '') {
+      // if we clear / empty a cell in sqlite,
+      // the value is considered as ''
       _vModel.value = null
     } else {
       _vModel.value = value
diff --git a/packages/nc-gui/components/cell/Duration.vue b/packages/nc-gui/components/cell/Duration.vue
index fe3e85fadc..3d160dc0a2 100644
--- a/packages/nc-gui/components/cell/Duration.vue
+++ b/packages/nc-gui/components/cell/Duration.vue
@@ -8,6 +8,7 @@ import {
   convertMS2Duration,
   durationOptions,
   inject,
+  parseProp,
   ref,
 } from '#imports'
 
@@ -32,7 +33,7 @@ const durationInMS = ref(0)
 
 const isEdited = ref(false)
 
-const durationType = computed(() => column?.value?.meta?.duration || 0)
+const durationType = computed(() => parseProp(column?.value?.meta)?.duration || 0)
 
 const durationPlaceholder = computed(() => durationOptions[durationType.value].title)
 
diff --git a/packages/nc-gui/components/cell/Float.vue b/packages/nc-gui/components/cell/Float.vue
index fe0fcd9c85..b490854e1c 100644
--- a/packages/nc-gui/components/cell/Float.vue
+++ b/packages/nc-gui/components/cell/Float.vue
@@ -3,7 +3,10 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue?: number | null
+  // when we set a number, then it is number type
+  // for sqlite, when we clear a cell or empty the cell, it returns ""
+  // otherwise, it is null type
+  modelValue?: number | null | string
 }
 
 interface Emits {
@@ -22,8 +25,10 @@ const _vModel = useVModel(props, 'modelValue', emits)
 
 const vModel = computed({
   get: () => _vModel.value,
-  set: (value: string) => {
+  set: (value) => {
     if (value === '') {
+      // if we clear / empty a cell in sqlite,
+      // the value is considered as ''
       _vModel.value = null
     } else {
       _vModel.value = value
diff --git a/packages/nc-gui/components/cell/GeoData.vue b/packages/nc-gui/components/cell/GeoData.vue
index d17cd77076..a162337213 100644
--- a/packages/nc-gui/components/cell/GeoData.vue
+++ b/packages/nc-gui/components/cell/GeoData.vue
@@ -56,7 +56,7 @@ const onClickSetCurrentLocation = () => {
     isLoading = false
   }
 
-  const onError: PositionErrorCallback = (err) => {
+  const onError: PositionErrorCallback = (err: GeolocationPositionError) => {
     console.error(`ERROR(${err.code}): ${err.message}`)
     isLoading = false
   }
diff --git a/packages/nc-gui/components/cell/Integer.vue b/packages/nc-gui/components/cell/Integer.vue
index d654e3d127..e70b83f240 100644
--- a/packages/nc-gui/components/cell/Integer.vue
+++ b/packages/nc-gui/components/cell/Integer.vue
@@ -3,7 +3,10 @@ import type { VNodeRef } from '@vue/runtime-core'
 import { EditModeInj, inject, useVModel } from '#imports'
 
 interface Props {
-  modelValue?: number | null
+  // when we set a number, then it is number type
+  // for sqlite, when we clear a cell or empty the cell, it returns ""
+  // otherwise, it is null type
+  modelValue?: number | null | string
 }
 
 interface Emits {
@@ -22,8 +25,10 @@ const _vModel = useVModel(props, 'modelValue', emits)
 
 const vModel = computed({
   get: () => _vModel.value,
-  set: (value: string) => {
+  set: (value) => {
     if (value === '') {
+      // if we clear / empty a cell in sqlite,
+      // the value is considered as ''
       _vModel.value = null
     } else {
       _vModel.value = value
diff --git a/packages/nc-gui/components/cell/MultiSelect.vue b/packages/nc-gui/components/cell/MultiSelect.vue
index 9d6ec72434..cbe8aef82a 100644
--- a/packages/nc-gui/components/cell/MultiSelect.vue
+++ b/packages/nc-gui/components/cell/MultiSelect.vue
@@ -260,8 +260,7 @@ async function addIfMissingAndSave() {
     } else {
       activeOptCreateInProgress.value--
     }
-  } catch (e) {
-    // todo: handle error
+  } catch (e: any) {
     console.log(e)
     activeOptCreateInProgress.value--
     message.error(await extractSdkResponseErrorMsg(e))
diff --git a/packages/nc-gui/components/cell/Rating.vue b/packages/nc-gui/components/cell/Rating.vue
index 44308292e6..aab416582d 100644
--- a/packages/nc-gui/components/cell/Rating.vue
+++ b/packages/nc-gui/components/cell/Rating.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ActiveCellInj, ColumnInj, computed, inject, useSelectedCellKeyupListener } from '#imports'
+import { ActiveCellInj, ColumnInj, computed, inject, parseProp, useSelectedCellKeyupListener } from '#imports'
 
 interface Props {
   modelValue?: number | null | undefined
@@ -19,7 +19,7 @@ const ratingMeta = computed(() => {
     },
     color: '#fcb401',
     max: 5,
-    ...(column.value?.meta || {}),
+    ...parseProp(column.value?.meta),
   }
 })
 
diff --git a/packages/nc-gui/components/cell/Url.vue b/packages/nc-gui/components/cell/Url.vue
index 9fc73bccfb..335f307995 100644
--- a/packages/nc-gui/components/cell/Url.vue
+++ b/packages/nc-gui/components/cell/Url.vue
@@ -8,6 +8,7 @@ import {
   inject,
   isValidURL,
   message,
+  parseProp,
   ref,
   useCellUrlConfig,
   useI18n,
@@ -39,7 +40,7 @@ const vModel = computed({
   get: () => value,
   set: (val) => {
     localState.value = val
-    if (!column.value.meta?.validate || (val && isValidURL(val)) || !val) {
+    if (!parseProp(column.value.meta)?.validate || (val && isValidURL(val)) || !val) {
       emit('update:modelValue', val)
     }
   },
@@ -63,7 +64,7 @@ const focus: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
 watch(
   () => editEnabled.value,
   () => {
-    if (column.value.meta?.validate && !editEnabled.value && localState.value && !isValidURL(localState.value)) {
+    if (parseProp(column.value.meta)?.validate && !editEnabled.value && localState.value && !isValidURL(localState.value)) {
       message.error(t('msg.error.invalidURL'))
       localState.value = undefined
       return
@@ -126,6 +127,3 @@ watch(
     </div>
   </div>
 </template>
-
-<!--
--->
diff --git a/packages/nc-gui/components/cell/attachment/utils.ts b/packages/nc-gui/components/cell/attachment/utils.ts
index 86e490a4fb..28dd76d31b 100644
--- a/packages/nc-gui/components/cell/attachment/utils.ts
+++ b/packages/nc-gui/components/cell/attachment/utils.ts
@@ -12,6 +12,7 @@ import {
   inject,
   isImage,
   message,
+  parseProp,
   ref,
   storeToRefs,
   useApi,
@@ -102,7 +103,7 @@ export const [useProvideAttachmentCell, useAttachmentCell] = useInjectionState(
 
       const attachmentMeta = {
         ...defaultAttachmentMeta,
-        ...(typeof column.value?.meta === 'string' ? JSON.parse(column.value.meta) : column.value?.meta),
+        ...parseProp(column?.value?.meta),
       }
 
       const newAttachments = []
diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue
index 5b1d40e49e..456e649273 100644
--- a/packages/nc-gui/components/dashboard/TreeView.vue
+++ b/packages/nc-gui/components/dashboard/TreeView.vue
@@ -14,6 +14,7 @@ import {
   extractSdkResponseErrorMsg,
   isDrawerOrModalExist,
   isMac,
+  parseProp,
   reactive,
   ref,
   resolveComponent,
@@ -32,6 +33,8 @@ import {
 import MdiView from '~icons/mdi/eye-circle-outline'
 import MdiTableLarge from '~icons/mdi/table-large'
 
+const { isMobileMode } = useGlobal()
+
 const { addTab, updateTab } = useTabs()
 
 const { $api, $e } = useNuxtApp()
@@ -312,7 +315,7 @@ watch(
 const setIcon = async (icon: string, table: TableType) => {
   try {
     table.meta = {
-      ...(table.meta || {}),
+      ...parseProp(table.meta),
       icon,
     }
     tables.value.splice(tables.value.indexOf(table), 1, { ...table })
@@ -324,7 +327,7 @@ const setIcon = async (icon: string, table: TableType) => {
     })
 
     $e('a:table:icon:navdraw', { icon })
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -1018,9 +1021,10 @@ const setIcon = async (icon: string, table: TableType) => {
 
       <LazyGeneralHelpAndSupport class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
-      <GeneralJoinCloud class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
+      <GeneralJoinCloud v-if="!isMobileMode" class="color-transition px-2 text-gray-500 cursor-pointer select-none hover:text-accent" />
 
       <GithubButton
+        v-if="!isMobileMode"
         class="ml-2 py-1"
         href="https://github.com/nocodb/nocodb"
         data-icon="octicon-star"
diff --git a/packages/nc-gui/components/dashboard/settings/AuditTab.vue b/packages/nc-gui/components/dashboard/settings/AuditTab.vue
index b0319244d7..60d4a34956 100644
--- a/packages/nc-gui/components/dashboard/settings/AuditTab.vue
+++ b/packages/nc-gui/components/dashboard/settings/AuditTab.vue
@@ -28,8 +28,8 @@ async function loadAudits(page = currentPage, limit = currentLimit) {
     isLoading = true
 
     const { list, pageInfo } = await $api.project.auditList(project.value?.id, {
-      offset: (limit * (page - 1)).toString(),
-      limit: limit.toString(),
+      offset: limit * (page - 1),
+      limit,
     })
 
     audits = list
diff --git a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
index 9dce3c6e6a..0d667e5c96 100644
--- a/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
+++ b/packages/nc-gui/components/dashboard/settings/app-store/AppInstall.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { PluginType } from 'nocodb-sdk'
+import type { PluginTestReqType, PluginType } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, message, onMounted, ref, useI18n, useNuxtApp } from '#imports'
 
 const { id } = defineProps<{
@@ -64,19 +64,20 @@ const testSettings = async () => {
   loadingAction = Action.Test
 
   try {
-    const res = await $api.plugin.test({
-      input: pluginFormData,
-      id: plugin?.id,
-      category: plugin?.category,
-      title: plugin?.title,
-    })
-
-    if (res) {
-      // Successfully tested plugin settings
-      message.success(t('msg.success.pluginTested'))
-    } else {
-      // Invalid credentials
-      message.info(t('msg.info.invalidCredentials'))
+    if (plugin) {
+      const res = await $api.plugin.test({
+        input: JSON.stringify(pluginFormData),
+        title: plugin.title,
+        category: plugin.category,
+      } as PluginTestReqType)
+
+      if (res) {
+        // Successfully tested plugin settings
+        message.success(t('msg.success.pluginTested'))
+      } else {
+        // Invalid credentials
+        message.info(t('msg.info.invalidCredentials'))
+      }
     }
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
@@ -106,7 +107,7 @@ const readPluginDetails = async () => {
     const res = await $api.plugin.read(id)
     const formDetails = JSON.parse(res.input_schema ?? '{}')
     const emptyParsedInput = formDetails.array ? [{}] : {}
-    const parsedInput = res.input ? JSON.parse(res.input) : emptyParsedInput
+    const parsedInput = typeof res.input === 'string' ? JSON.parse(res.input) : emptyParsedInput
 
     // the type of 'secure' was XcType.SingleLineText in 0.0.1
     // and it has been changed to XcType.Checkbox, since 0.0.2
diff --git a/packages/nc-gui/components/dlg/TableRename.vue b/packages/nc-gui/components/dlg/TableRename.vue
index 92eaa5091e..a57c9dc86c 100644
--- a/packages/nc-gui/components/dlg/TableRename.vue
+++ b/packages/nc-gui/components/dlg/TableRename.vue
@@ -41,7 +41,7 @@ const { updateTab } = useTabs()
 
 const projectStore = useProject()
 const { loadTables, isMysql, isMssql, isPg } = projectStore
-const { project } = storeToRefs(projectStore)
+const { tables, project } = storeToRefs(projectStore)
 
 const inputEl = $ref<ComponentPublicInstance>()
 
diff --git a/packages/nc-gui/components/dlg/ViewCreate.vue b/packages/nc-gui/components/dlg/ViewCreate.vue
index 24ef21da74..5525be1a0b 100644
--- a/packages/nc-gui/components/dlg/ViewCreate.vue
+++ b/packages/nc-gui/components/dlg/ViewCreate.vue
@@ -75,9 +75,7 @@ const viewNameRules = [
   {
     validator: (_: unknown, v: string) =>
       new Promise((resolve, reject) => {
-        views.every((v1) => ((v1 as GridType | KanbanType | GalleryType | MapType).alias || v1.title) !== v)
-          ? resolve(true)
-          : reject(new Error(`View name should be unique`))
+        views.every((v1) => v1.title !== v) ? resolve(true) : reject(new Error(`View name should be unique`))
       }),
     message: 'View name should be unique',
   },
diff --git a/packages/nc-gui/components/erd/View.vue b/packages/nc-gui/components/erd/View.vue
index 4857bf4779..2870b87a86 100644
--- a/packages/nc-gui/components/erd/View.vue
+++ b/packages/nc-gui/components/erd/View.vue
@@ -40,8 +40,8 @@ const populateTables = async () => {
     // if table is provided only get the table and its related tables
     localTables = projectTables.value.filter(
       (t) =>
-        t.id === props.table.id ||
-        props.table.columns?.find(
+        t.id === props.table?.id ||
+        props.table?.columns?.find(
           (column) =>
             column.uidt === UITypes.LinkToAnotherRecord &&
             (column.colOptions as LinkToAnotherRecordType)?.fk_related_model_id === t.id,
diff --git a/packages/nc-gui/components/general/TableIcon.vue b/packages/nc-gui/components/general/TableIcon.vue
index cfac78343b..68cfdd9728 100644
--- a/packages/nc-gui/components/general/TableIcon.vue
+++ b/packages/nc-gui/components/general/TableIcon.vue
@@ -18,5 +18,3 @@ const { meta: tableMeta } = defineProps<{
   <MdiEyeCircleOutline v-else-if="tableMeta?.type === 'view'" class="w-5" />
   <MdiTableLarge v-else class="w-5" />
 </template>
-
-<style scoped></style>
diff --git a/packages/nc-gui/components/smartsheet/ApiSnippet.vue b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
index 192af6a237..a975ef75c1 100644
--- a/packages/nc-gui/components/smartsheet/ApiSnippet.vue
+++ b/packages/nc-gui/components/smartsheet/ApiSnippet.vue
@@ -132,7 +132,7 @@ const onCopyToClipboard = async () => {
     await copy(code)
     // Copied to clipboard
     message.info(t('msg.info.copiedToClipboard'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/Form.vue b/packages/nc-gui/components/smartsheet/Form.vue
index 8b159cf669..0171c83a76 100644
--- a/packages/nc-gui/components/smartsheet/Form.vue
+++ b/packages/nc-gui/components/smartsheet/Form.vue
@@ -99,6 +99,8 @@ const activeRow = ref('')
 
 const { t } = useI18n()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 const updateView = useDebounceFn(
   () => {
     if ((formViewData.value?.subheading?.length || 0) > 255) {
@@ -361,6 +363,10 @@ function handleMouseUp(col: Record<string, any>, hiddenColIndex: number) {
   }
 }
 
+const columnSupportsScanning = (elementType: UITypes) =>
+  betaFeatureToggleState.show &&
+  [UITypes.SingleLineText, UITypes.Number, UITypes.Email, UITypes.URL, UITypes.LongText].includes(elementType)
+
 onClickOutside(draggableRef, () => {
   activeRow.value = ''
 })
@@ -616,6 +622,30 @@ watch(view, (nextView) => {
                       />
                     </div>
 
+                    <a-form-item v-if="columnSupportsScanning(element.uidt)" class="my-0 w-1/2 !mb-1">
+                      <div class="flex gap-2 items-center">
+                        <span
+                          class="text-gray-500 mr-2 nc-form-input-required"
+                          data-testid="nc-form-input-enable-scanner"
+                          @click="
+                            () => {
+                              element.general.enable_scanner = !element.general.enable_scanner
+                              updateColMeta(element)
+                            }
+                          "
+                        >
+                          {{ $t('general.enableScanner') }}
+                        </span>
+
+                        <a-switch
+                          v-model:checked="element.enable_scanner"
+                          v-e="['a:form-view:field:mark-enable-scaner']"
+                          size="small"
+                          @change="updateColMeta(element)"
+                        />
+                      </div>
+                    </a-form-item>
+
                     <a-form-item class="my-0 w-1/2 !mb-1">
                       <a-input
                         v-model:value="element.label"
@@ -827,7 +857,7 @@ watch(view, (nextView) => {
     @apply px-4 min-h-[75px] w-full h-full;
 
     .nc-attachment {
-      @apply md:(w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
+      @apply md: (w-[50px] h-[50px]) lg:(w-[75px] h-[75px]) min-h-[50px] min-w-[50px];
     }
 
     .nc-attachment-cell-dropzone {
diff --git a/packages/nc-gui/components/smartsheet/Toolbar.vue b/packages/nc-gui/components/smartsheet/Toolbar.vue
index d3a6fdce6d..a2cb1ab217 100644
--- a/packages/nc-gui/components/smartsheet/Toolbar.vue
+++ b/packages/nc-gui/components/smartsheet/Toolbar.vue
@@ -5,6 +5,8 @@ const { isGrid, isForm, isGallery, isKanban, isMap, isSqlView } = useSmartsheetS
 
 const isPublic = inject(IsPublicInj, ref(false))
 
+const { isMobileMode } = useGlobal()
+
 const { isUIAllowed } = useUIPermission()
 
 const { isOpen } = useSidebar('nc-right-sidebar')
@@ -14,7 +16,8 @@ const { allowCSVDownload } = useSharedView()
 
 <template>
   <div
-    class="nc-table-toolbar w-full py-1 flex gap-2 items-center h-[var(--toolbar-height)] px-2 border-b overflow-x-hidden"
+    class="nc-table-toolbar w-full py-1 flex gap-2 items-center px-2 border-b overflow-x-hidden"
+    :class="{ 'nc-table-toolbar-mobile': isMobileMode, 'h-[var(--toolbar-height)]': !isMobileMode }"
     style="z-index: 7"
   >
     <LazySmartsheetToolbarViewActions
@@ -41,8 +44,10 @@ const { allowCSVDownload } = useSharedView()
 
     <LazySmartsheetToolbarShareView v-if="(isForm || isGrid || isKanban || isGallery || isMap) && !isPublic" />
 
+    <LazySmartsheetToolbarQrScannerButton v-if="isMobileMode && (isGrid || isKanban || isGallery)" />
+
     <LazySmartsheetToolbarExport v-if="(!isPublic && !isUIAllowed('dataInsert')) || (isPublic && allowCSVDownload)" />
-    <div class="flex-1" />
+    <div v-if="!isMobileMode" class="flex-1" />
 
     <LazySmartsheetToolbarReload v-if="!isPublic && !isForm" />
 
@@ -51,7 +56,7 @@ const { allowCSVDownload } = useSharedView()
     <LazySmartsheetToolbarSearchData v-if="(isGrid || isGallery || isKanban) && !isPublic" class="shrink mx-2" />
 
     <template v-if="!isOpen && !isPublic">
-      <div class="border-l-1 pl-3">
+      <div class="border-l-1 pl-3 nc-views-show-sidebar-button" :class="{ 'ml-auto': isMobileMode }">
         <LazySmartsheetSidebarToolbarToggleDrawer class="mr-2" />
       </div>
     </template>
@@ -66,4 +71,7 @@ const { allowCSVDownload } = useSharedView()
 .nc-table-toolbar {
   border-color: #f0f0f0 !important;
 }
+.nc-table-toolbar-mobile {
+  @apply flex-wrap h-auto py-2;
+}
 </style>
diff --git a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
index cf7404f03e..89e860e045 100644
--- a/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
+++ b/packages/nc-gui/components/smartsheet/column/EditOrAdd.vue
@@ -41,6 +41,8 @@ const { $e } = useNuxtApp()
 
 const { appInfo } = useGlobal()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 const meta = inject(MetaInj, ref())
 
 const isForm = inject(IsFormInj, ref(false))
@@ -57,8 +59,8 @@ const columnToValidate = [UITypes.Email, UITypes.URL, UITypes.PhoneNumber]
 
 const onlyNameUpdateOnEditColumns = [UITypes.LinkToAnotherRecord, UITypes.Lookup, UITypes.Rollup]
 
-const geoDataToggleCondition = (t) => {
-  return geodataToggleState.show ? geodataToggleState.show : !t.name.includes(UITypes.GeoData)
+const geoDataToggleCondition = (t: { name: UITypes }) => {
+  return betaFeatureToggleState.show ? betaFeatureToggleState.show : !t.name.includes(UITypes.GeoData)
 }
 
 const uiTypesOptions = computed<typeof uiTypes>(() => {
diff --git a/packages/nc-gui/components/smartsheet/expanded-form/index.vue b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
index db1108435a..2a59df5ca6 100644
--- a/packages/nc-gui/components/smartsheet/expanded-form/index.vue
+++ b/packages/nc-gui/components/smartsheet/expanded-form/index.vue
@@ -215,7 +215,7 @@ useActiveKeyupListener(
     // on alt + s save record
     else if (e.code === 'KeyS') {
       // remove focus from the active input if any
-      document.activeElement?.blur()
+      ;(document.activeElement as HTMLElement)?.blur()
 
       e.stopPropagation()
 
diff --git a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
index 306f8fcd8b..0059a905a9 100644
--- a/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
+++ b/packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
@@ -1,5 +1,5 @@
 import type { PropType } from '@vue/runtime-core'
-import type { ColumnType, LinkToAnotherRecordType, LookupType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, LookupType, RollupType } from 'nocodb-sdk'
 import type { Ref } from 'vue'
 import { RelationTypes, UITypes } from 'nocodb-sdk'
 import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef } from '#imports'
@@ -73,9 +73,9 @@ export default defineComponent({
   setup(props) {
     const columnMeta = toRef(props, 'columnMeta')
 
-    const column = inject(ColumnInj, columnMeta) as Ref<ColumnType & { colOptions: LookupType }>
+    const column = inject(ColumnInj, columnMeta) as Ref<ColumnType & { colOptions: LookupType | RollupType }>
 
-    let relationColumn: ColumnType & { colOptions: LookupType }
+    let relationColumn: ColumnType
 
     return () => {
       if (!column.value) return null
@@ -83,12 +83,9 @@ export default defineComponent({
       if (column && column.value) {
         if (isMm(column.value) || isHm(column.value) || isBt(column.value) || isLookup(column.value) || isRollup(column.value)) {
           const meta = inject(MetaInj, ref())
-
           relationColumn = meta.value?.columns?.find(
             (c) => c.id === column.value?.colOptions?.fk_relation_column_id,
-          ) as ColumnType & {
-            colOptions: LinkToAnotherRecordType
-          }
+          ) as ColumnType
         }
       }
 
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
index 8984a6a3c5..b9edd2ef30 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuBottom.vue
@@ -12,6 +12,8 @@ const { $e } = useNuxtApp()
 
 const { isSqlView } = useSmartsheetStoreOrThrow()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 function onOpenModal(type: ViewTypes, title = '') {
   $e('c:view:create', { view: type })
   emits('openModal', { type, title })
@@ -113,7 +115,7 @@ function onOpenModal(type: ViewTypes, title = '') {
       </a-tooltip>
     </a-menu-item>
     <a-menu-item
-      v-if="geodataToggleState.show"
+      v-if="betaFeatureToggleState.show"
       key="map"
       class="group !flex !items-center !my-0 !h-2.5rem nc-create-map-view"
       @click="onOpenModal(ViewTypes.MAP)"
diff --git a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
index 5fe7476271..2fac7ce6d5 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/MenuTop.vue
@@ -10,6 +10,7 @@ import {
   inject,
   message,
   onMounted,
+  parseProp,
   ref,
   resolveComponent,
   useApi,
@@ -218,7 +219,7 @@ const setIcon = async (icon: string, view: ViewType) => {
   try {
     // modify the icon property in meta
     view.meta = {
-      ...(view.meta || {}),
+      ...parseProp(view.meta),
       icon,
     }
 
@@ -227,7 +228,7 @@ const setIcon = async (icon: string, view: ViewType) => {
     })
 
     $e('a:view:icon:sidebar', { icon })
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
index 50e4e75825..878340aa59 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/RenameableMenuItem.vue
@@ -33,7 +33,7 @@ const { $e } = useNuxtApp()
 
 const { isUIAllowed } = useUIPermission()
 
-const isLocked = inject(IsLockedInj)
+const isLocked = inject(IsLockedInj, ref(false))
 
 /** Is editing the view name enabled */
 let isEditing = $ref<boolean>(false)
diff --git a/packages/nc-gui/components/smartsheet/sidebar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/index.vue
index 33e2ff62ed..6a16606b98 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { ViewType, ViewTypes } from 'nocodb-sdk'
+import type { Ref } from 'vue'
 import {
   ActiveViewInj,
   MetaInj,
@@ -48,7 +49,7 @@ const { isOpen } = useSidebar('nc-right-sidebar')
 const sidebarCollapsed = computed(() => !isOpen.value)
 
 /** Sidebar ref */
-const sidebar = ref()
+const sidebar: Ref<Element | null> = ref(null)
 
 /** Watch route param and change active view based on `viewTitle` */
 watch(
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/BetaFeatureToggle.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/BetaFeatureToggle.vue
new file mode 100644
index 0000000000..1a36112ac9
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/BetaFeatureToggle.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+const { toggleBetaFeature } = useBetaFeatureToggle()
+</script>
+
+<template>
+  <a-tooltip placement="bottomRight">
+    <template #title>
+      <span> Toggle Beta Features </span>
+    </template>
+    <mdi-test-tube class="cursor-pointer" data-testid="beta-feature-toggle-icon" @click="toggleBetaFeature" />
+  </a-tooltip>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
deleted file mode 100644
index 74b82098a4..0000000000
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/GeodataSwitcher.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-function toggleGeodataFeature() {
-  geodataToggleState.show = !geodataToggleState.show
-  localStorage.setItem('geodataToggleState', JSON.stringify(geodataToggleState.show))
-}
-</script>
-
-<template>
-  <a-tooltip placement="bottomRight">
-    <template #title>
-      <span> Toggle GeoData </span>
-    </template>
-    <mdi-map-marker class="cursor-pointer" data-testid="toggle-geodata-feature-icon" @click="toggleGeodataFeature" />
-  </a-tooltip>
-</template>
diff --git a/packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue b/packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue
index 90abdf857e..3c4311d450 100644
--- a/packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue
+++ b/packages/nc-gui/components/smartsheet/sidebar/toolbar/index.vue
@@ -30,7 +30,7 @@ const onClick = () => {
 
       <div class="dot" />
 
-      <LazySmartsheetSidebarToolbarGeodataSwitcher />
+      <LazySmartsheetSidebarToolbarBetaFeatureToggle />
 
       <div class="dot" />
     </template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
index eac17c2848..2a7bca8a63 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
@@ -109,7 +109,7 @@ const filterUpdateCondition = (filter: FilterType, i: number) => {
     }
   }
   saveOrUpdate(filter, i)
-  filterPrevComparisonOp.value[filter.id] = filter.comparison_op
+  filterPrevComparisonOp.value[filter.id!] = filter.comparison_op!
   $e('a:filter:update', {
     logical: filter.logical_op,
     comparison: filter.comparison_op,
@@ -165,11 +165,10 @@ const selectFilterField = (filter: Filter, index: number) => {
   // since the existing one may not be supported for the new field
   // e.g. `eq` operator is not supported in checkbox field
   // hence, get the first option of the supported operators of the new field
-  filter.comparison_op = comparisonOpList(col.uidt as UITypes).filter((compOp) =>
-    isComparisonOpAllowed(filter, compOp),
-  )?.[0].value
+  filter.comparison_op = comparisonOpList(col.uidt as UITypes).find((compOp) => isComparisonOpAllowed(filter, compOp))
+    ?.value as FilterType['comparison_op']
 
-  if ([UITypes.Date, UITypes.DateTime].includes(col.uidt as UITypes) && !['blank', 'notblank'].includes(filter.comparison_op)) {
+  if ([UITypes.Date, UITypes.DateTime].includes(col.uidt as UITypes) && !['blank', 'notblank'].includes(filter.comparison_op!)) {
     if (filter.comparison_op === 'isWithin') {
       filter.comparison_sub_op = 'pastNumberOfDays'
     } else {
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
index 39ed89c290..5c085ae8fc 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ColumnFilterMenu.vue
@@ -21,7 +21,7 @@ const activeView = inject(ActiveViewInj, ref())
 
 const isPublic = inject(IsPublicInj, ref(false))
 
-const { filterAutoSave } = useGlobal()
+const { filterAutoSave, isMobileMode } = useGlobal()
 
 const filterComp = ref<typeof ColumnFilter>()
 
@@ -76,7 +76,7 @@ useMenuCloseOnEsc(open)
         <div class="flex items-center gap-1">
           <MdiFilterOutline />
           <!-- Filter -->
-          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
+          <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.filter') }}</span>
           <MdiMenuDown class="text-grey" />
 
           <span v-if="filtersLength" class="nc-count-badge">{{ filtersLength }}</span>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
index 1809034bbd..2595788282 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue
@@ -31,6 +31,8 @@ const reloadViewMetaHook = inject(ReloadViewMetaHookInj, undefined)!
 
 const rootFields = inject(FieldsInj)
 
+const { isMobileMode } = useGlobal()
+
 const isLocked = inject(IsLockedInj, ref(false))
 
 const isPublic = inject(IsPublicInj, ref(false))
@@ -157,7 +159,7 @@ useMenuCloseOnEsc(open)
           <MdiEyeOffOutline />
 
           <!-- Fields -->
-          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>
+          <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('objects.fields') }}</span>
 
           <MdiMenuDown class="text-grey" />
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
index 3d6b8d57dc..e4e4c2267e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/FilterInput.vue
@@ -84,10 +84,11 @@ const checkTypeFunctions = {
 
 type FilterType = keyof typeof checkTypeFunctions
 
-// todo: replace with sqlUis
-const { sqlUi } = $(storeToRefs(useProject()))
+const { sqlUis } = storeToRefs(useProject())
 
-const abstractType = $computed(() => (column.value?.dt && sqlUi ? sqlUi.getAbstractType(column.value) : null))
+const sqlUi = ref(column.value?.base_id ? sqlUis.value[column.value?.base_id] : Object.values(sqlUis.value)[0])
+
+const abstractType = computed(() => column.value && sqlUi.value.getAbstractType(column.value))
 
 const checkType = (filterType: FilterType) => {
   const checkTypeFunction = checkTypeFunctions[filterType]
diff --git a/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue b/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
new file mode 100644
index 0000000000..25f8a1729f
--- /dev/null
+++ b/packages/nc-gui/components/smartsheet/toolbar/QrScannerButton.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { SelectProps } from 'ant-design-vue'
+import { ref } from 'vue'
+import { StreamBarcodeReader } from 'vue-barcode-reader'
+import type { ColumnType } from 'nocodb-sdk'
+import { UITypes } from 'nocodb-sdk'
+import { NOCO, storeToRefs } from '#imports'
+
+const meta = inject(MetaInj, ref())
+
+const { t } = useI18n()
+
+const route = useRoute()
+
+const router = useRouter()
+
+const { $api } = useNuxtApp()
+
+const { project } = storeToRefs(useProject())
+
+const { isMobileMode } = useGlobal()
+
+const view = inject(ActiveViewInj, ref())
+
+const fieldOptionsOfSupportedColumnsToScanFor = computed<SelectProps['options']>(
+  () =>
+    meta?.value
+      ?.columns!.filter((column) => column.uidt && [UITypes.QrCode, UITypes.Barcode].includes(column.uidt))
+      .map((field) => {
+        return {
+          value: field.id,
+          label: field.title,
+        }
+      }) || [],
+)
+
+const getColumnToSearchForByBarOrQrCodeColumnId = (columnId: string): ColumnType => {
+  const qrOrBarcodeColumn = meta.value?.columns?.find((column) => column.id === columnId)
+  if (!qrOrBarcodeColumn) {
+    throw new Error('QrCode or BarCode Column not found')
+  }
+  let columnIdToSearchFor: string
+  if (qrOrBarcodeColumn.uidt === UITypes.QrCode) {
+    columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_qr_value_column_id
+  } else if (qrOrBarcodeColumn.uidt === UITypes.Barcode) {
+    columnIdToSearchFor = (qrOrBarcodeColumn.colOptions as any).fk_barcode_value_column_id
+  } else {
+    throw new Error('Column to scan for is not of supported type')
+  }
+  const columnToSearchFor = meta.value?.columns?.find((column) => column.id === columnIdToSearchFor)
+  if (!columnToSearchFor) {
+    throw new Error('Column to search for not found')
+  }
+  return columnToSearchFor
+}
+
+const showCodeScannerOverlay = ref(false)
+
+const idOfSelectedColumnToScanFor = ref('')
+const lastScannedCode = ref('')
+
+watch(fieldOptionsOfSupportedColumnsToScanFor, () => {
+  if (fieldOptionsOfSupportedColumnsToScanFor.value?.every((option) => option.value !== idOfSelectedColumnToScanFor.value)) {
+    idOfSelectedColumnToScanFor.value = ''
+  }
+})
+
+const scannerIsReady = ref(false)
+
+const onLoaded = async () => {
+  scannerIsReady.value = true
+}
+
+const showScannerField = computed(() => scannerIsReady.value && idOfSelectedColumnToScanFor.value !== '')
+const showPleaseSelectColumnMessage = computed(() => !idOfSelectedColumnToScanFor.value)
+const showScannerIsLoadingMessage = computed(() => !!idOfSelectedColumnToScanFor.value && !scannerIsReady.value)
+
+const onDecode = async (codeValue: string) => {
+  if (!showScannerField.value || codeValue === lastScannedCode.value) {
+    return
+  }
+  try {
+    const selectedColumnToScanFor = getColumnToSearchForByBarOrQrCodeColumnId(idOfSelectedColumnToScanFor.value)
+    const whereClause = `(${selectedColumnToScanFor?.title},eq,${codeValue})`
+    const foundRowsForCode = (
+      await $api.dbViewRow.list(NOCO, project.value.id!, meta.value!.id!, view.value!.title!, {
+        where: whereClause,
+      })
+    ).list
+
+    if (foundRowsForCode.length !== 1) {
+      showCodeScannerOverlay.value = true
+      lastScannedCode.value = codeValue
+      setTimeout(() => {
+        lastScannedCode.value = ''
+      }, 4000)
+      if (foundRowsForCode.length === 0) {
+        message.info(t('msg.info.codeScanner.noRowFoundForCode'))
+      }
+      if (foundRowsForCode.length > 1) {
+        message.warn(t('msg.info.codeScanner.moreThanOneRowFoundForCode'))
+        showCodeScannerOverlay.value = false
+        lastScannedCode.value = ''
+      }
+      return
+    }
+
+    showCodeScannerOverlay.value = false
+    lastScannedCode.value = ''
+    const primaryKeyValueForFoundRow = extractPkFromRow(foundRowsForCode[0], meta!.value!.columns!)
+
+    router.push({
+      query: {
+        ...route.query,
+        rowId: primaryKeyValueForFoundRow,
+      },
+    })
+  } catch (error) {
+    console.error(error)
+  }
+}
+</script>
+
+<template>
+  <div>
+    <a-button class="nc-btn-find-row-by-scan nc-toolbar-btn" @click="showCodeScannerOverlay = true">
+      <div class="flex items-center gap-1">
+        <MdiQrcodeScan />
+        <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.findRowByCodeScan') }}</span>
+      </div>
+    </a-button>
+    <a-modal
+      v-model:visible="showCodeScannerOverlay"
+      class="nc-overlay-find-row-by-scan"
+      :closable="false"
+      width="28rem"
+      centered
+      :footer="null"
+      wrap-class-name="nc-modal-generate-token"
+      destroy-on-close
+      @cancel="scannerIsReady = false"
+    >
+      <div class="relative flex flex-col h-full">
+        <div class="text-left text-wrap mt-2 text-xl mb-4">{{ $t('title.findRowByScanningCode') }}</div>
+        <a-form-item :label="$t('labels.columnToScanFor')" class="nc-dropdown-scanner-column-id">
+          <a-select
+            v-model:value="idOfSelectedColumnToScanFor"
+            class="w-full"
+            :options="fieldOptionsOfSupportedColumnsToScanFor"
+          />
+        </a-form-item>
+
+        <div>
+          <StreamBarcodeReader v-show="showScannerField" @decode="onDecode" @loaded="onLoaded"></StreamBarcodeReader>
+          <div v-if="showPleaseSelectColumnMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+            {{ $t('msg.info.codeScanner.selectColumn') }}
+          </div>
+          <div v-if="showScannerIsLoadingMessage" class="text-left text-wrap mt-2 text-[#e65100] text-xs">
+            {{ $t('msg.info.codeScanner.loadingScanner') }}
+          </div>
+        </div>
+      </div>
+    </a-modal>
+  </div>
+</template>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
index 02fc2bfb03..45c4bec03e 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ShareView.vue
@@ -35,6 +35,8 @@ const { isUIAllowed } = useUIPermission()
 
 const { isSharedBase } = storeToRefs(useProject())
 
+const { isMobileMode } = useGlobal()
+
 let showShareModel = $ref(false)
 
 const passwordProtected = ref(false)
@@ -195,7 +197,7 @@ const copyLink = async () => {
 
       // Copied to clipboard
       message.success(t('msg.info.copiedToClipboard'))
-    } catch (e) {
+    } catch (e: any) {
       message.error(e.message)
     }
   }
@@ -230,7 +232,7 @@ const copyIframeCode = async () => {
 
       // Copied to clipboard
       message.success(t('msg.info.copiedToClipboard'))
-    } catch (e) {
+    } catch (e: any) {
       message.error(e.message)
     }
   }
@@ -249,7 +251,7 @@ const copyIframeCode = async () => {
       <div class="flex items-center gap-1">
         <MdiOpenInNew />
         <!-- Share View -->
-        <span class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
+        <span v-if="!isMobileMode" class="!text-xs font-weight-normal"> {{ $t('activity.shareView') }}</span>
       </div>
     </a-button>
 
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
index 97ed60984a..374fb7283d 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SharedViewList.vue
@@ -5,6 +5,7 @@ import {
   extractSdkResponseErrorMsg,
   message,
   onMounted,
+  parseProp,
   ref,
   useCopy,
   useDashboard,
@@ -70,7 +71,7 @@ const sharedViewUrl = (view: SharedViewType) => {
 
 const renderAllowCSVDownload = (view: SharedViewType) => {
   if (view.type === ViewTypes.GRID) {
-    view.meta = (view.meta && typeof view.meta === 'string' ? JSON.parse(view.meta) : view.meta) as Record<string, any>
+    view.meta = (view.meta && parseProp(view.meta)) as Record<string, any>
     return view.meta?.allowCSVDownload ? '✔️' : '❌'
   } else {
     return 'N/A'
@@ -82,7 +83,7 @@ const copyLink = (view: SharedViewType) => {
     copy(`${dashboardUrl?.value as string}#${sharedViewUrl(view)}`)
     // Copied to clipboard
     message.success(t('msg.info.copiedToClipboard'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
 }
diff --git a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
index 0e3c1b049c..9554bd7bf0 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
@@ -34,6 +34,8 @@ const addSort = () => {
   })
 }
 
+const { isMobileMode } = useGlobal()
+
 eventBus.on((event) => {
   if (event === SmartsheetStoreEvents.SORT_RELOAD) {
     loadSorts()
@@ -76,7 +78,7 @@ useMenuCloseOnEsc(open)
           <MdiSort />
 
           <!-- Sort -->
-          <span class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
+          <span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
           <MdiMenuDown class="text-grey" />
 
           <span v-if="sorts?.length" class="nc-count-badge">{{ sorts.length }}</span>
diff --git a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
index 8ee7f1b475..6e822070d6 100644
--- a/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
+++ b/packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
@@ -26,6 +26,8 @@ const { t } = useI18n()
 
 const sharedViewListDlg = ref(false)
 
+const { isMobileMode } = useGlobal()
+
 const isPublicView = inject(IsPublicInj, ref(false))
 
 const isView = false
@@ -218,7 +220,7 @@ useMenuCloseOnEsc(open)
               </div>
             </a-menu-item>
 
-            <a-menu-item v-if="!isSqlView">
+            <a-menu-item v-if="!isSqlView && !isMobileMode">
               <div
                 v-if="isUIAllowed('webhook') && !isView && !isPublicView"
                 v-e="['c:actions:webhook']"
@@ -230,7 +232,7 @@ useMenuCloseOnEsc(open)
               </div>
             </a-menu-item>
 
-            <a-menu-item v-if="!isSharedBase && !isPublicView">
+            <a-menu-item v-if="!isSharedBase && !isPublicView && !isMobileMode">
               <div v-e="['c:snippet:open']" class="py-2 flex gap-2 items-center" @click="showApiSnippetDrawer = true">
                 <MdiXml class="text-gray-500" />
                 <!-- Get API Snippet -->
@@ -239,7 +241,7 @@ useMenuCloseOnEsc(open)
             </a-menu-item>
 
             <a-menu-item>
-              <div v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
+              <div v-if="!isMobileMode" v-e="['c:erd:open']" class="py-2 flex gap-2 items-center nc-view-action-erd" @click="showErd = true">
                 <MaterialSymbolsAccountTreeRounded class="text-gray-500" />
                 {{ $t('title.erdView') }}
               </div>
diff --git a/packages/nc-gui/components/tabs/auth/UserManagement.vue b/packages/nc-gui/components/tabs/auth/UserManagement.vue
index 82c30b8f66..6dc5f43a74 100644
--- a/packages/nc-gui/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui/components/tabs/auth/UserManagement.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { OrgUserRoles } from 'nocodb-sdk'
-import type { RequestParams } from 'nocodb-sdk'
+import type { ProjectUserReqType, RequestParams } from 'nocodb-sdk'
 import {
   extractSdkResponseErrorMsg,
   message,
@@ -82,7 +82,7 @@ const inviteUser = async (user: User) => {
       user.roles = 'editor'
     }
 
-    await api.auth.projectUserAdd(project.value.id, user)
+    await api.auth.projectUserAdd(project.value.id, user as ProjectUserReqType)
 
     // Successfully added user to project
     message.success(t('msg.success.userAddedToProject'))
@@ -153,7 +153,7 @@ const copyInviteUrl = async (user: User) => {
 
     // Invite URL copied to clipboard
     message.success(t('msg.success.inviteURLCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
   $e('c:user:copy-url')
diff --git a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
index e5c37d7c7d..0f3d55c0a9 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/ShareBase.vue
@@ -109,7 +109,7 @@ const copyUrl = async () => {
 
     // Copied shareable base url to clipboard!
     message.success(t('msg.success.shareableURLCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
 
@@ -137,7 +137,7 @@ style="background: transparent; border: 1px solid #ddd"></iframe>`)
 
     // Copied embeddable html code!
     message.success(t('msg.success.embeddableHTMLCodeCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
   $e('c:shared-base:copy-embed-frame')
diff --git a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
index 26c2649457..0c7be5470d 100644
--- a/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui/components/tabs/auth/user-management/UsersModal.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Input } from 'ant-design-vue'
+import type { ProjectUserReqType } from 'nocodb-sdk'
 import {
   Form,
   computed,
@@ -40,6 +41,8 @@ const { t } = useI18n()
 
 const { project } = storeToRefs(useProject())
 
+const { isMobileMode } = useGlobal()
+
 const { $api, $e } = useNuxtApp()
 
 const { copy } = useCopy()
@@ -107,10 +110,11 @@ const saveUser = async () => {
       const res = await $api.auth.projectUserAdd(project.value.id, {
         roles: usersData.role,
         email: usersData.emails,
-        project_id: project.value.id,
-        projectName: project.value.title,
-      })
-      usersData.invitationToken = res.invite_token
+      } as ProjectUserReqType)
+
+      // for inviting one user, invite_token will only be returned when invitation email fails to send
+      // for inviting multiple users, invite_token will be returned anyway
+      usersData.invitationToken = res?.invite_token
     }
     emit('reload')
 
@@ -131,7 +135,7 @@ const copyUrl = async () => {
 
     // Copied shareable base url to clipboard!
     message.success(t('msg.success.shareableURLCopied'))
-  } catch (e) {
+  } catch (e: any) {
     message.error(e.message)
   }
   $e('c:shared-base:copy-url')
@@ -181,7 +185,7 @@ watch(
   >
     <div class="flex flex-col" data-testid="invite-user-and-share-base-modal">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
-        <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
+        <a-typography-title v-if="!isMobileMode" class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
 
         <a-button
           type="text"
diff --git a/packages/nc-gui/components/virtual-cell/QrCode.vue b/packages/nc-gui/components/virtual-cell/QrCode.vue
index 4343923e1f..e4c59a21e4 100644
--- a/packages/nc-gui/components/virtual-cell/QrCode.vue
+++ b/packages/nc-gui/components/virtual-cell/QrCode.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useQRCode } from '@vueuse/integrations/useQRCode'
+import type QRCode from 'qrcode'
 import { RowHeightInj } from '#imports'
 
 const maxNumberOfAllowedCharsForQrValue = 2000
@@ -12,13 +13,23 @@ const tooManyCharsForQrCode = computed(() => qrValue?.value.length > maxNumberOf
 
 const showQrCode = computed(() => qrValue?.value?.length > 0 && !tooManyCharsForQrCode.value)
 
+const qrCodeOptions: QRCode.QRCodeToDataURLOptions = {
+  errorCorrectionLevel: 'M',
+  margin: 1,
+  version: 4,
+  rendererOpts: {
+    quality: 1,
+  },
+}
 const rowHeight = inject(RowHeightInj)
 
 const qrCode = useQRCode(qrValue, {
+  ...qrCodeOptions,
   width: 150,
 })
 
 const qrCodeLarge = useQRCode(qrValue, {
+  ...qrCodeOptions,
   width: 600,
 })
 
diff --git a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
index 53a61a3d77..6aceb6cc90 100644
--- a/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
+++ b/packages/nc-gui/components/virtual-cell/barcode/Barcode.vue
@@ -22,7 +22,7 @@ const showBarcodeModal = () => {
 const barcodeMeta = $computed(() => {
   return {
     barcodeFormat: 'CODE128',
-    ...(column?.value?.meta || {}),
+    ...parseProp(column?.value?.meta),
   }
 })
 
diff --git a/packages/nc-gui/components/webhook/Editor.vue b/packages/nc-gui/components/webhook/Editor.vue
index 8c4035324e..b3f5b439b7 100644
--- a/packages/nc-gui/components/webhook/Editor.vue
+++ b/packages/nc-gui/components/webhook/Editor.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { AuditType } from 'nocodb-sdk'
+import type { AuditType, HookType } from 'nocodb-sdk'
 import {
   Form,
   MetaInj,
@@ -10,6 +10,7 @@ import {
   inject,
   message,
   onMounted,
+  parseProp,
   reactive,
   ref,
   useApi,
@@ -20,7 +21,7 @@ import {
 } from '#imports'
 
 interface Props {
-  hook?: Record<string, any>
+  hook?: HookType
 }
 
 const props = defineProps<Props>()
@@ -39,11 +40,13 @@ const meta = inject(MetaInj, ref())
 
 const useForm = Form.useForm
 
-const hook = reactive<Record<string, any>>({
+const hook = reactive<
+  Omit<HookType, 'notification'> & { notification: Record<string, any>; eventOperation: string; condition: boolean }
+>({
   id: '',
   title: '',
-  event: '',
-  operation: '',
+  event: undefined,
+  operation: undefined,
   eventOperation: '',
   notification: {
     type: 'URL',
@@ -256,12 +259,13 @@ function onNotTypeChange(reset = false) {
   }
 }
 
-function setHook(newHook: any) {
+function setHook(newHook: HookType) {
+  const notification = newHook.notification as Record<string, any>
   Object.assign(hook, {
     ...newHook,
     notification: {
-      ...newHook.notification,
-      payload: newHook.notification.payload,
+      ...notification,
+      payload: notification.payload,
     },
   })
 }
@@ -325,7 +329,7 @@ async function loadPluginList() {
         ...(p as any),
       }
       plugin.tags = p.tags ? p.tags.split(',') : []
-      plugin.parsedInput = typeof p.input === 'string' ? JSON.parse(p.input) : p.input
+      plugin.parsedInput = parseProp(p.input)
       o[plugin.title] = plugin
 
       return o
@@ -400,8 +404,8 @@ watch(
     if (!hook.eventOperation) return
 
     const [event, operation] = hook.eventOperation.split(' ')
-    hook.event = event
-    hook.operation = operation
+    hook.event = event as HookType['event']
+    hook.operation = operation as HookType['operation']
   },
 )
 
diff --git a/packages/nc-gui/components/webhook/List.vue b/packages/nc-gui/components/webhook/List.vue
index a3a644d126..1bf3732355 100644
--- a/packages/nc-gui/components/webhook/List.vue
+++ b/packages/nc-gui/components/webhook/List.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HookType } from 'nocodb-sdk'
-import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, ref, useI18n, useNuxtApp } from '#imports'
+import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, parseProp, ref, useI18n, useNuxtApp } from '#imports'
 
 const emit = defineEmits(['edit', 'add'])
 
@@ -16,7 +16,7 @@ async function loadHooksList() {
   try {
     const hookList = (await $api.dbTableWebhook.list(meta.value?.id as string)).list as HookType[]
     hooks.value = hookList.map((hook) => {
-      hook.notification = typeof hook.notification === 'string' ? JSON.parse(hook.notification) : hook.notification
+      hook.notification = parseProp(hook.notification)
       return hook
     })
   } catch (e: any) {
diff --git a/packages/nc-gui/components/webhook/Test.vue b/packages/nc-gui/components/webhook/Test.vue
index 058e27fef6..2f7ad98cd9 100644
--- a/packages/nc-gui/components/webhook/Test.vue
+++ b/packages/nc-gui/components/webhook/Test.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import type { HookTestReqType, HookType } from 'nocodb-sdk'
 import { MetaInj, extractSdkResponseErrorMsg, inject, message, onMounted, ref, useI18n, useNuxtApp, watch } from '#imports'
 
 interface Props {
-  hook: Record<string, any>
+  hook: HookType
 }
 
 const { hook } = defineProps<Props>()
@@ -33,10 +34,13 @@ async function loadSampleData() {
 
 async function testWebhook() {
   try {
-    await $api.dbTableWebhook.test(meta.value?.id as string, {
-      hook,
-      payload: sampleData.value,
-    })
+    await $api.dbTableWebhook.test(
+      meta.value?.id as string,
+      {
+        hook,
+        payload: sampleData.value,
+      } as HookTestReqType,
+    )
 
     // Webhook tested successfully
     message.success(t('msg.success.webhookTested'))
diff --git a/packages/nc-gui/composables/useBetaFeatureToggle.ts b/packages/nc-gui/composables/useBetaFeatureToggle.ts
new file mode 100644
index 0000000000..f40cbd5c41
--- /dev/null
+++ b/packages/nc-gui/composables/useBetaFeatureToggle.ts
@@ -0,0 +1,22 @@
+import { reactive } from 'vue'
+
+const storedValue = localStorage.getItem('betaFeatureToggleState')
+
+const initialToggleState = storedValue ? JSON.parse(storedValue) : false
+
+const betaFeatureToggleState = reactive({ show: initialToggleState })
+
+const toggleBetaFeature = () => {
+  betaFeatureToggleState.show = !betaFeatureToggleState.show
+  localStorage.setItem('betaFeatureToggleState', JSON.stringify(betaFeatureToggleState.show))
+}
+
+const _useBetaFeatureToggle = () => {
+  return {
+    betaFeatureToggleState,
+    toggleBetaFeature,
+  }
+}
+
+const useBetaFeatureToggle = createSharedComposable(_useBetaFeatureToggle)
+export { useBetaFeatureToggle }
diff --git a/packages/nc-gui/composables/useGlobal/actions.ts b/packages/nc-gui/composables/useGlobal/actions.ts
index 3bac64de43..b08ec5989d 100644
--- a/packages/nc-gui/composables/useGlobal/actions.ts
+++ b/packages/nc-gui/composables/useGlobal/actions.ts
@@ -1,16 +1,18 @@
-import type { Actions, State } from './types'
+import type { Actions, AppInfo, State } from './types'
 import { message, useNuxtApp } from '#imports'
 
 export function useGlobalActions(state: State): Actions {
+  const setIsMobileMode = (isMobileMode: boolean) => {
+    state.isMobileMode.value = isMobileMode
+  }
+
   /** Sign out by deleting the token from localStorage */
   const signOut: Actions['signOut'] = async () => {
     state.token.value = null
     state.user.value = null
     try {
-      if (state.token.value) {
-        const nuxtApp = useNuxtApp()
-        await nuxtApp.$api.auth.signout()
-      }
+      const nuxtApp = useNuxtApp()
+      await nuxtApp.$api.auth.signout()
     } catch {}
   }
 
@@ -48,18 +50,18 @@ export function useGlobalActions(state: State): Actions {
           message.error(err.message || t('msg.error.youHaveBeenSignedOut'))
           await signOut()
         })
-        .finally(resolve)
+        .finally(() => resolve())
     })
   }
 
   const loadAppInfo = async () => {
     try {
       const nuxtApp = useNuxtApp()
-      state.appInfo.value = await nuxtApp.$api.utils.appInfo()
+      state.appInfo.value = (await nuxtApp.$api.utils.appInfo()) as AppInfo
     } catch (e) {
       console.error(e)
     }
   }
 
-  return { signIn, signOut, refreshToken, loadAppInfo }
+  return { signIn, signOut, refreshToken, loadAppInfo, setIsMobileMode }
 }
diff --git a/packages/nc-gui/composables/useGlobal/state.ts b/packages/nc-gui/composables/useGlobal/state.ts
index 90d01d4c25..c04597652a 100644
--- a/packages/nc-gui/composables/useGlobal/state.ts
+++ b/packages/nc-gui/composables/useGlobal/state.ts
@@ -66,6 +66,7 @@ export function useGlobalState(storageKey = 'nocodb-gui-v2'): State {
     currentVersion: null,
     latestRelease: null,
     hiddenRelease: null,
+    isMobileMode: null,
   }
 
   /** saves a reactive state, any change to these values will write/delete to localStorage */
diff --git a/packages/nc-gui/composables/useGlobal/types.ts b/packages/nc-gui/composables/useGlobal/types.ts
index 82971cfe66..adf615070c 100644
--- a/packages/nc-gui/composables/useGlobal/types.ts
+++ b/packages/nc-gui/composables/useGlobal/types.ts
@@ -36,6 +36,7 @@ export interface StoredState {
   currentVersion: string | null
   latestRelease: string | null
   hiddenRelease: string | null
+  isMobileMode: boolean | null
 }
 
 export type State = ToRefs<Omit<StoredState, 'token'>> & {
@@ -59,6 +60,7 @@ export interface Actions {
   signIn: (token: string) => void
   refreshToken: () => void
   loadAppInfo: () => void
+  setIsMobileMode: (isMobileMode: boolean) => void
 }
 
 export type ReadonlyState = Readonly<Pick<State, 'token' | 'user'>> & Omit<State, 'token' | 'user'>
diff --git a/packages/nc-gui/composables/useKanbanViewStore.ts b/packages/nc-gui/composables/useKanbanViewStore.ts
index 2c49516f67..e9b423c077 100644
--- a/packages/nc-gui/composables/useKanbanViewStore.ts
+++ b/packages/nc-gui/composables/useKanbanViewStore.ts
@@ -11,6 +11,7 @@ import {
   getHTMLEncodedText,
   inject,
   message,
+  parseProp,
   provide,
   ref,
   storeToRefs,
@@ -198,8 +199,7 @@ const [useProvideKanbanViewStore, useKanbanViewStore] = useInjectionState(
       // set groupingField
       groupingFieldColumn.value = !isPublic.value
         ? (meta.value.columns as ColumnType[]).filter((f) => f.id === kanbanMetaData.value.fk_grp_col_id)[0] || {}
-        : ((typeof sharedView.value?.meta === 'string' ? JSON.parse(sharedView.value?.meta) : sharedView.value?.meta)
-            .groupingFieldColumn! as ColumnType)
+        : (parseProp(sharedView.value?.meta).groupingFieldColumn! as ColumnType)
 
       groupingField.value = groupingFieldColumn.value.title!
 
diff --git a/packages/nc-gui/composables/useMapViewDataStore.ts b/packages/nc-gui/composables/useMapViewDataStore.ts
index 28ed1a3873..b0fddbfe0c 100644
--- a/packages/nc-gui/composables/useMapViewDataStore.ts
+++ b/packages/nc-gui/composables/useMapViewDataStore.ts
@@ -1,15 +1,8 @@
-import { reactive } from 'vue'
 import type { ComputedRef, Ref } from 'vue'
-import type { ColumnType, MapType, PaginatedType, ViewType } from 'nocodb-sdk'
+import type { ColumnType, MapType, PaginatedType, TableType, ViewType } from 'nocodb-sdk'
 import { IsPublicInj, ref, storeToRefs, useInjectionState, useMetas, useProject } from '#imports'
 import type { Row } from '~/lib'
 
-const storedValue = localStorage.getItem('geodataToggleState')
-
-const initialState = storedValue ? JSON.parse(storedValue) : false
-
-export const geodataToggleState = reactive({ show: initialState })
-
 const formatData = (list: Record<string, any>[]) =>
   list.map(
     (row) =>
@@ -22,7 +15,7 @@ const formatData = (list: Record<string, any>[]) =>
 
 const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
   (
-    meta: Ref<MapType | undefined>,
+    meta: Ref<(MapType & { id: string }) | undefined>,
     viewMeta: Ref<(ViewType | MapType | undefined) & { id: string }> | ComputedRef<(ViewType & { id: string }) | undefined>,
     shared = false,
     where?: ComputedRef<string | undefined>,
@@ -111,7 +104,7 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       if (currentRow.rowMeta) currentRow.rowMeta.saving = true
       try {
         const { missingRequiredColumns, insertObj } = await populateInsertObject({
-          meta: metaValue!,
+          meta: metaValue as TableType,
           ltarState,
           getMeta,
           row,
@@ -162,7 +155,6 @@ const [useProvideMapViewStore, useMapViewStore] = useInjectionState(
       geoDataFieldColumn,
       addEmptyRow,
       insertRow,
-      geodataToggleState,
       syncCount,
       paginationData,
     }
diff --git a/packages/nc-gui/composables/useMetas.ts b/packages/nc-gui/composables/useMetas.ts
index bd050460b7..72cde33128 100644
--- a/packages/nc-gui/composables/useMetas.ts
+++ b/packages/nc-gui/composables/useMetas.ts
@@ -1,6 +1,6 @@
 import { message } from 'ant-design-vue'
 import type { WatchStopHandle } from 'vue'
-import type { TableInfoType, TableType } from 'nocodb-sdk'
+import type { TableType } from 'nocodb-sdk'
 import { extractSdkResponseErrorMsg, storeToRefs, useNuxtApp, useProject, useState, watch } from '#imports'
 
 export function useMetas() {
@@ -26,7 +26,7 @@ export function useMetas() {
   }
 
   // todo: this needs a proper refactor, arbitrary waiting times are usually not a good idea
-  const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | TableInfoType | null> => {
+  const getMeta = async (tableIdOrTitle: string, force = false): Promise<TableType | null> => {
     if (!tableIdOrTitle) return null
     /** wait until loading is finished if requesting same meta */
     if (!force && loadingState.value[tableIdOrTitle]) {
diff --git a/packages/nc-gui/composables/useMultiSelect/convertCellData.ts b/packages/nc-gui/composables/useMultiSelect/convertCellData.ts
index 5cbc47e694..33cce2db2a 100644
--- a/packages/nc-gui/composables/useMultiSelect/convertCellData.ts
+++ b/packages/nc-gui/composables/useMultiSelect/convertCellData.ts
@@ -2,6 +2,7 @@ import dayjs from 'dayjs'
 import type { ColumnType } from 'nocodb-sdk'
 import { UITypes } from 'nocodb-sdk'
 import type { AppInfo } from '~/composables/useGlobal'
+import { parseProp } from '#imports'
 
 export default function convertCellData(
   args: { from: UITypes; to: UITypes; value: any; column: ColumnType; appInfo: AppInfo },
@@ -73,7 +74,7 @@ export default function convertCellData(
     case UITypes.Attachment: {
       let parsedVal
       try {
-        parsedVal = typeof value === 'string' ? JSON.parse(value) : value
+        parsedVal = parseProp(value)
         parsedVal = Array.isArray(parsedVal) ? parsedVal : [parsedVal]
       } catch (e) {
         throw new Error('Invalid attachment data')
@@ -94,7 +95,7 @@ export default function convertCellData(
 
       const attachmentMeta = {
         ...defaultAttachmentMeta,
-        ...(typeof args.column?.meta === 'string' ? JSON.parse(args.column.meta) : args.column?.meta),
+        ...parseProp(args.column?.meta),
       }
 
       const attachments = []
diff --git a/packages/nc-gui/composables/useSharedFormViewStore.ts b/packages/nc-gui/composables/useSharedFormViewStore.ts
index cef09add04..e4031a7679 100644
--- a/packages/nc-gui/composables/useSharedFormViewStore.ts
+++ b/packages/nc-gui/composables/useSharedFormViewStore.ts
@@ -1,7 +1,7 @@
 import useVuelidate from '@vuelidate/core'
 import { helpers, minLength, required } from '@vuelidate/validators'
 import type { Ref } from 'vue'
-import type { ColumnType, FormType, LinkToAnotherRecordType, TableType, ViewType } from 'nocodb-sdk'
+import type { BoolType, ColumnType, FormType, LinkToAnotherRecordType, StringOrNullType, TableType, ViewType } from 'nocodb-sdk'
 import { ErrorMessages, RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
 import { isString } from '@vueuse/core'
 import {
@@ -37,7 +37,8 @@ const [useProvideSharedFormStore, useSharedFormStore] = useInjectionState((share
   const sharedView = ref<ViewType>()
   const sharedFormView = ref<FormType>()
   const meta = ref<TableType>()
-  const columns = ref<(ColumnType & { required?: boolean; show?: boolean; label?: string })[]>()
+  const columns =
+    ref<(ColumnType & { required?: BoolType; show?: BoolType; label?: StringOrNullType; enable_scanner?: BoolType })[]>()
   const sharedViewMeta = ref<SharedViewMeta>({})
   const formResetHook = createEventHook<void>()
 
diff --git a/packages/nc-gui/composables/useSharedView.ts b/packages/nc-gui/composables/useSharedView.ts
index 745efbb046..2e552f6608 100644
--- a/packages/nc-gui/composables/useSharedView.ts
+++ b/packages/nc-gui/composables/useSharedView.ts
@@ -10,7 +10,7 @@ import type {
   ViewType,
 } from 'nocodb-sdk'
 import { UITypes, ViewTypes } from 'nocodb-sdk'
-import { computed, storeToRefs, useGlobal, useMetas, useNuxtApp, useState } from '#imports'
+import { computed, parseProp, storeToRefs, useGlobal, useMetas, useNuxtApp, useState } from '#imports'
 
 export function useSharedView() {
   const nestedFilters = ref<(FilterType & { status?: 'update' | 'delete' | 'create'; parentId?: string })[]>([])
@@ -63,7 +63,7 @@ export function useSharedView() {
       },
     })
     try {
-      allowCSVDownload.value = (typeof viewMeta.meta === 'string' ? JSON.parse(viewMeta.meta) : viewMeta.meta)?.allowCSVDownload
+      allowCSVDownload.value = parseProp(viewMeta.meta)?.allowCSVDownload
     } catch {
       allowCSVDownload.value = false
     }
diff --git a/packages/nc-gui/composables/useTable.ts b/packages/nc-gui/composables/useTable.ts
index 8ddb21a886..cb4bccea52 100644
--- a/packages/nc-gui/composables/useTable.ts
+++ b/packages/nc-gui/composables/useTable.ts
@@ -1,4 +1,4 @@
-import type { LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 import { UITypes, isSystemColumn } from 'nocodb-sdk'
 import {
   Modal,
@@ -40,14 +40,14 @@ export function useTable(onTableCreate?: (tableMeta: TableType) => void, baseId?
 
   const createTable = async () => {
     if (!sqlUi?.value) return
-    const columns = sqlUi?.value?.getNewTableColumns().filter((col) => {
+    const columns = sqlUi?.value?.getNewTableColumns().filter((col: ColumnType) => {
       if (col.column_name === 'id' && table.columns.includes('id_ag')) {
         Object.assign(col, sqlUi?.value?.getDataTypeForUiType({ uidt: UITypes.ID }, 'AG'))
         col.dtxp = sqlUi?.value?.getDefaultLengthForDatatype(col.dt)
         col.dtxs = sqlUi?.value?.getDefaultScaleForDatatype(col.dt)
         return true
       }
-      return table.columns.includes(col.column_name)
+      return table.columns.includes(col.column_name!)
     })
 
     try {
diff --git a/packages/nc-gui/composables/useViewData.ts b/packages/nc-gui/composables/useViewData.ts
index dbd5235ad8..4dc758f8ec 100644
--- a/packages/nc-gui/composables/useViewData.ts
+++ b/packages/nc-gui/composables/useViewData.ts
@@ -541,6 +541,7 @@ export function useViewData(
     changePage,
     addEmptyRow,
     deleteRow,
+    deleteRowById,
     deleteSelectedRows,
     updateOrSaveRow,
     selectedAllRecords,
@@ -557,7 +558,6 @@ export function useViewData(
     removeLastEmptyRow,
     removeRowIfNew,
     navigateToSiblingRow,
-    deleteRowById,
     getExpandedRowIndex,
   }
 }
diff --git a/packages/nc-gui/composables/useViewFilters.ts b/packages/nc-gui/composables/useViewFilters.ts
index 45c9394324..486ed25b8d 100644
--- a/packages/nc-gui/composables/useViewFilters.ts
+++ b/packages/nc-gui/composables/useViewFilters.ts
@@ -162,10 +162,9 @@ export function useViewFilters(
 
   const placeholderFilter = (): Filter => {
     return {
-      // TODO: fix type
       comparison_op: comparisonOpList(options.value?.[0].uidt as UITypes).filter((compOp) =>
         isComparisonOpAllowed({ fk_column_id: options.value?.[0].id }, compOp),
-      )?.[0].value,
+      )?.[0].value as FilterType['comparison_op'],
       value: '',
       status: 'create',
       logical_op: 'and',
@@ -281,7 +280,6 @@ export function useViewFilters(
           comparison: filter.comparison_op,
         })
       } else {
-        // todo: return type of dbTableFilter is void?
         filters.value[i] = await $api.dbTableFilter.create(view.value.id!, {
           ...filter,
           fk_parent_id: parentId,
diff --git a/packages/nc-gui/composables/useViews.ts b/packages/nc-gui/composables/useViews.ts
index e1e199355d..ec3676cf5e 100644
--- a/packages/nc-gui/composables/useViews.ts
+++ b/packages/nc-gui/composables/useViews.ts
@@ -2,7 +2,7 @@ import type { TableType, ViewType } from 'nocodb-sdk'
 import type { MaybeRef } from '@vueuse/core'
 import { ref, unref, useNuxtApp, watch } from '#imports'
 
-export function useViews(meta: MaybeRef<TableType | undefined>) {
+function useViews(meta: MaybeRef<TableType | undefined>) {
   const views = ref<ViewType[]>([])
   const isLoading = ref(false)
 
@@ -26,3 +26,5 @@ export function useViews(meta: MaybeRef<TableType | undefined>) {
 
   return { views, isLoading, loadViews }
 }
+
+export default useViews
diff --git a/packages/nc-gui/context/index.ts b/packages/nc-gui/context/index.ts
index 46da3cf764..d64d74ecd0 100644
--- a/packages/nc-gui/context/index.ts
+++ b/packages/nc-gui/context/index.ts
@@ -7,7 +7,7 @@ import type { Row, TabItem } from '~/lib'
 export const ActiveCellInj: InjectionKey<Ref<boolean>> = Symbol('active-cell')
 export const IsPublicInj: InjectionKey<Ref<boolean>> = Symbol('is-public')
 export const RowInj: InjectionKey<Ref<Row>> = Symbol('row')
-export const ColumnInj: InjectionKey<Ref<ColumnType & { meta: any }>> = Symbol('column-injection')
+export const ColumnInj: InjectionKey<Ref<ColumnType>> = Symbol('column-injection')
 export const MetaInj: InjectionKey<ComputedRef<TableType>> = Symbol('meta-injection')
 export const TabMetaInj: InjectionKey<ComputedRef<TabItem>> = Symbol('tab-meta-injection')
 export const PaginationDataInj: InjectionKey<ReturnType<typeof useViewData>['paginationData']> =
diff --git a/packages/nc-gui/lang/en.json b/packages/nc-gui/lang/en.json
index 938385e086..dddbc434fe 100644
--- a/packages/nc-gui/lang/en.json
+++ b/packages/nc-gui/lang/en.json
@@ -210,7 +210,7 @@
     "advancedSettings": "Advanced Settings",
     "codeSnippet": "Code Snippet",
     "keyboardShortcut": "Keyboard Shortcuts",
-    "generateRandomName": "Generate Random Name",
+    "generateRandomName": "Generate Random Name", 
     "findRowByScanningCode": "Find row by scanning a QR or Barcode"
   },
   "labels": {
diff --git a/packages/nc-gui/lib/types.ts b/packages/nc-gui/lib/types.ts
index 90fdaf1cf6..9ec003091a 100644
--- a/packages/nc-gui/lib/types.ts
+++ b/packages/nc-gui/lib/types.ts
@@ -1,4 +1,4 @@
-import type { FilterType, ViewTypes } from 'nocodb-sdk'
+import type { FilterType, MetaType, ViewTypes } from 'nocodb-sdk'
 import type { I18n } from 'vue-i18n'
 import type { Theme as AntTheme } from 'ant-design-vue/es/config-provider'
 import type { UploadFile } from 'ant-design-vue'
@@ -21,7 +21,7 @@ export interface ProjectMetaInfo {
   Platform?: string
   Docker?: boolean
   Database?: string
-  ProjectOnRootDB?: string
+  ProjectOnRootDB?: boolean
   RootDB?: string
   PackageVersion?: string
 }
@@ -79,7 +79,7 @@ export interface TabItem {
   viewId?: string
   sortsState?: Map<string, any>
   filterState?: Map<string, any>
-  meta?: Record<string, any>
+  meta?: MetaType
 }
 
 export interface SharedViewMeta extends Record<string, any> {
diff --git a/packages/nc-gui/middleware/auth.global.ts b/packages/nc-gui/middleware/auth.global.ts
index 6bd60b4440..0ce166897d 100644
--- a/packages/nc-gui/middleware/auth.global.ts
+++ b/packages/nc-gui/middleware/auth.global.ts
@@ -102,8 +102,8 @@ async function tryGoogleAuth(api: Api<any>, signIn: Actions['signIn']) {
       )
 
       signIn(token)
-    } catch (e) {
-      message.error({ content: await extractSdkResponseErrorMsg(e) })
+    } catch (e: any) {
+      message.error(await extractSdkResponseErrorMsg(e))
     }
 
     const newURL = window.location.href.split('?')[0]
diff --git a/packages/nc-gui/package-lock.json b/packages/nc-gui/package-lock.json
index ed17b0b15e..42b97aa918 100644
--- a/packages/nc-gui/package-lock.json
+++ b/packages/nc-gui/package-lock.json
@@ -42,9 +42,11 @@
         "unique-names-generator": "^4.7.1",
         "v3-infinite-loading": "^1.2.2",
         "validator": "^13.7.0",
+        "vue-barcode-reader": "^1.0.3",
         "vue-dompurify-html": "^3.0.0",
         "vue-github-button": "^3.0.3",
         "vue-i18n": "^9.2.2",
+        "vue-qrcode-reader": "3.1.0-vue3-compatibility.2",
         "vue3-contextmenu": "^0.2.12",
         "vue3-text-clamp": "^0.1.1",
         "vuedraggable": "^4.1.0",
@@ -73,14 +75,17 @@
         "@intlify/vite-plugin-vue-i18n": "^6.0.1",
         "@nuxt/image-edge": "^1.0.0-27657146.da85542",
         "@types/axios": "^0.14.0",
+        "@types/d3-scale": "^4.0.3",
         "@types/dagre": "^0.7.48",
         "@types/file-saver": "^2.0.5",
         "@types/leaflet": "^1.9.0",
         "@types/leaflet.markercluster": "^1.5.1",
         "@types/papaparse": "^5.3.2",
+        "@types/qrcode": "^1.5.0",
         "@types/sortablejs": "^1.13.0",
         "@types/tinycolor2": "^1.4.3",
         "@types/validator": "^13.7.10",
+        "@types/vue-barcode-reader": "^0.0.0",
         "@vitest/ui": "^0.18.0",
         "@vue/compiler-sfc": "^3.2.37",
         "@vue/test-utils": "^2.0.2",
@@ -3307,11 +3312,26 @@
         "@types/d3-color": "*"
       }
     },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
+      "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
     "node_modules/@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
       "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "dev": true
+    },
     "node_modules/@types/d3-zoom": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
@@ -3438,6 +3458,15 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -3474,6 +3503,51 @@
       "integrity": "sha512-t1yxFAR2n0+VO6hd/FJ9F2uezAZVWHLmpmlJzm1eX03+H7+HsuTAp7L8QJs+2pQCfWkP1+EXsGK9Z9v7o/qPVQ==",
       "dev": true
     },
+    "node_modules/@types/vue-barcode-reader": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@types/vue-barcode-reader/-/vue-barcode-reader-0.0.0.tgz",
+      "integrity": "sha512-yngQhd35qGjCxMXWIqsAtF7qmxe0qUYRVd9qW5I/CcRPWDdBpqVkHnQSh6ro5BIBl3NQ3ppky7kMKS4pr+XwCQ==",
+      "dev": true,
+      "dependencies": {
+        "vue": "^2.0.0"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/@vue/compiler-sfc": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+      "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.18.4",
+        "postcss": "^8.4.14",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/csstype": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+      "dev": true
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@types/vue-barcode-reader/node_modules/vue": {
+      "version": "2.7.14",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+      "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-sfc": "2.7.14",
+        "csstype": "^3.1.0"
+      }
+    },
     "node_modules/@types/web-bluetooth": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
@@ -3808,10 +3882,32 @@
         "svg-tags": "^1.0.0"
       }
     },
+    "node_modules/@vue/compat": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.2.47.tgz",
+      "integrity": "sha512-spULbnhceN3fIGYRRgq75RPRqsakfUV0tyZ4zTweOB48bWtwHUn677exg8/58uLOBc1F5B5lXTD5qf7epqpTuw==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      },
+      "peerDependencies": {
+        "vue": "3.2.47"
+      }
+    },
+    "node_modules/@vue/compat/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
       "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.16.4",
         "@vue/shared": "3.2.41",
@@ -3823,6 +3919,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3831,6 +3928,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
       "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
+      "dev": true,
       "dependencies": {
         "@vue/compiler-core": "3.2.41",
         "@vue/shared": "3.2.41"
@@ -3840,6 +3938,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
       "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.16.4",
         "@vue/compiler-core": "3.2.41",
@@ -3857,6 +3956,7 @@
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
       "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.8"
       }
@@ -3865,6 +3965,7 @@
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
       "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3873,6 +3974,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
       "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
+      "dev": true,
       "dependencies": {
         "@vue/compiler-dom": "3.2.41",
         "@vue/shared": "3.2.41"
@@ -3884,17 +3986,18 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
-      "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
       "dependencies": {
-        "@vue/shared": "3.2.41"
+        "@vue/shared": "3.2.47"
       }
     },
     "node_modules/@vue/reactivity-transform": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
       "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
+      "dev": true,
       "dependencies": {
         "@babel/parser": "^7.16.4",
         "@vue/compiler-core": "3.2.41",
@@ -3907,45 +4010,104 @@
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
       "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@vue/reactivity/node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
     "node_modules/@vue/runtime-core": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.41.tgz",
-      "integrity": "sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
       "dependencies": {
-        "@vue/reactivity": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
+    "node_modules/@vue/runtime-core/node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz",
-      "integrity": "sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
       "dependencies": {
-        "@vue/runtime-core": "3.2.41",
-        "@vue/shared": "3.2.41",
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "csstype": "^2.6.8"
       }
     },
+    "node_modules/@vue/runtime-dom/node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
     "node_modules/@vue/server-renderer": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.41.tgz",
-      "integrity": "sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
       },
       "peerDependencies": {
-        "vue": "3.2.41"
+        "vue": "3.2.47"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/@vue/server-renderer/node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "node_modules/@vue/server-renderer/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
       }
     },
     "node_modules/@vue/shared": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
-      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw=="
+      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==",
+      "dev": true
     },
     "node_modules/@vue/test-utils": {
       "version": "2.0.2",
@@ -4383,6 +4545,52 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/@zhead/schema-vue/node_modules/@vueuse/shared/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@zxing/library": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.2.tgz",
+      "integrity": "sha512-0aCQIbGXsDHcBuRYuZRZfJeLRYiPfdLxIlh5bY7k+k2bkxFwzla+75VyFi1rnjU5hqaZogdSH+Dw013YDsQOjg==",
+      "dependencies": {
+        "ts-custom-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
+    "node_modules/@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -4830,6 +5038,29 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/barcode-detector": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-1.0.0.tgz",
+      "integrity": "sha512-LZSyqjumoq2WmMOeQZ2BiYYAqwnTlkXgqKOTcJlathpFS6IejsdSb6aIGmoSyOCjBgFNATzLgMJ9shNfklnz6A==",
+      "dependencies": {
+        "@zxing/library": "^0.18.4",
+        "jsqr": "^1.3.1"
+      }
+    },
+    "node_modules/barcode-detector/node_modules/@zxing/library": {
+      "version": "0.18.6",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz",
+      "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==",
+      "dependencies": {
+        "ts-custom-error": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 10.4.0"
+      },
+      "optionalDependencies": {
+        "@zxing/text-encoding": "~0.9.0"
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -5059,6 +5290,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "node_modules/callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -10648,6 +10884,11 @@
         "graceful-fs": "^4.1.6"
       }
     },
+    "node_modules/jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
@@ -14507,6 +14748,18 @@
       "integrity": "sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==",
       "dev": true
     },
+    "node_modules/rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "dependencies": {
+        "sdp": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -14677,6 +14930,11 @@
       "integrity": "sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg==",
       "dev": true
     },
+    "node_modules/sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "node_modules/selfsigned": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
@@ -15791,6 +16049,14 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "node_modules/ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A==",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -17118,15 +17384,23 @@
       "dev": true
     },
     "node_modules/vue": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.41.tgz",
-      "integrity": "sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "dependencies": {
-        "@vue/compiler-dom": "3.2.41",
-        "@vue/compiler-sfc": "3.2.41",
-        "@vue/runtime-dom": "3.2.41",
-        "@vue/server-renderer": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/vue-barcode-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz",
+      "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==",
+      "dependencies": {
+        "@zxing/library": "^0.19.1"
       }
     },
     "node_modules/vue-bundle-renderer": {
@@ -17251,6 +17525,19 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue-qrcode-reader": {
+      "version": "3.1.0-vue3-compatibility.2",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-3.1.0-vue3-compatibility.2.tgz",
+      "integrity": "sha512-tGu2zmPGSi9SJR08Yl2favix0vs5SgXudGXdwW2KxcvlU9jfsX9FAYkuaifyiq3CgxKijwRxA/YJpS0Yl9PMfw==",
+      "dependencies": {
+        "@vue/compat": "^3.1.0",
+        "barcode-detector": "^1.0.0",
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "^3.1.0",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "node_modules/vue-router": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
@@ -17280,6 +17567,85 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vue/node_modules/@vue/compiler-core": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-dom": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+      "dependencies": {
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-sfc": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7",
+        "postcss": "^8.1.10",
+        "source-map": "^0.6.1"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/compiler-ssr": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+      "dependencies": {
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/reactivity-transform": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+      "dependencies": {
+        "@babel/parser": "^7.16.4",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.25.7"
+      }
+    },
+    "node_modules/vue/node_modules/@vue/shared": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+    },
+    "node_modules/vue/node_modules/magic-string": {
+      "version": "0.25.9",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+      "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+      "dependencies": {
+        "sourcemap-codec": "^1.4.8"
+      }
+    },
+    "node_modules/vue/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vue3-contextmenu": {
       "version": "0.2.12",
       "resolved": "https://registry.npmjs.org/vue3-contextmenu/-/vue3-contextmenu-0.2.12.tgz",
@@ -17454,6 +17820,19 @@
       "integrity": "sha512-8bWq0Iluiv9lVf9YaqWQ9+liNgXSHICm+rg544yRgGYaR8yXZTVBaHZkINZSB2yZSWo4b0F6MIxqJezVfOEAlg==",
       "dev": true
     },
+    "node_modules/webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "dependencies": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
@@ -20323,11 +20702,26 @@
         "@types/d3-color": "*"
       }
     },
+    "@types/d3-scale": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.3.tgz",
+      "integrity": "sha512-PATBiMCpvHJSMtZAMEhc2WyL+hnzarKzI6wAHYjhsonjWJYGq5BXTzQjv4l8m2jO183/4wZ90rKvSeT7o72xNQ==",
+      "dev": true,
+      "requires": {
+        "@types/d3-time": "*"
+      }
+    },
     "@types/d3-selection": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/d3-selection/-/d3-selection-3.0.3.tgz",
       "integrity": "sha512-Mw5cf6nlW1MlefpD9zrshZ+DAWL4IQ5LnWfRheW6xwsdaWOb6IRRu2H7XPAQcyXEx1D7XQWgdoKR83ui1/HlEA=="
     },
+    "@types/d3-time": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.0.tgz",
+      "integrity": "sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg==",
+      "dev": true
+    },
     "@types/d3-zoom": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/@types/d3-zoom/-/d3-zoom-3.0.1.tgz",
@@ -20454,6 +20848,15 @@
         "@types/node": "*"
       }
     },
+    "@types/qrcode": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@types/qrcode/-/qrcode-1.5.0.tgz",
+      "integrity": "sha512-x5ilHXRxUPIMfjtM+1vf/GPTRWZ81nqscursm5gMznJeK9M0YnZ1c3bEvRLQ0zSSgedLx1J6MGL231ObQGGhaA==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/qs": {
       "version": "6.9.7",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
@@ -20490,6 +20893,50 @@
       "integrity": "sha512-t1yxFAR2n0+VO6hd/FJ9F2uezAZVWHLmpmlJzm1eX03+H7+HsuTAp7L8QJs+2pQCfWkP1+EXsGK9Z9v7o/qPVQ==",
       "dev": true
     },
+    "@types/vue-barcode-reader": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@types/vue-barcode-reader/-/vue-barcode-reader-0.0.0.tgz",
+      "integrity": "sha512-yngQhd35qGjCxMXWIqsAtF7qmxe0qUYRVd9qW5I/CcRPWDdBpqVkHnQSh6ro5BIBl3NQ3ppky7kMKS4pr+XwCQ==",
+      "dev": true,
+      "requires": {
+        "vue": "latest"
+      },
+      "dependencies": {
+        "@vue/compiler-sfc": {
+          "version": "2.7.14",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz",
+          "integrity": "sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==",
+          "dev": true,
+          "requires": {
+            "@babel/parser": "^7.18.4",
+            "postcss": "^8.4.14",
+            "source-map": "^0.6.1"
+          }
+        },
+        "csstype": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
+          "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
+          "dev": true
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        },
+        "vue": {
+          "version": "2.7.14",
+          "resolved": "https://registry.npmjs.org/vue/-/vue-2.7.14.tgz",
+          "integrity": "sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==",
+          "dev": true,
+          "requires": {
+            "@vue/compiler-sfc": "2.7.14",
+            "csstype": "^3.1.0"
+          }
+        }
+      }
+    },
     "@types/web-bluetooth": {
       "version": "0.0.15",
       "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.15.tgz",
@@ -20711,10 +21158,28 @@
         "svg-tags": "^1.0.0"
       }
     },
+    "@vue/compat": {
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compat/-/compat-3.2.47.tgz",
+      "integrity": "sha512-spULbnhceN3fIGYRRgq75RPRqsakfUV0tyZ4zTweOB48bWtwHUn677exg8/58uLOBc1F5B5lXTD5qf7epqpTuw==",
+      "requires": {
+        "@babel/parser": "^7.16.4",
+        "estree-walker": "^2.0.2",
+        "source-map": "^0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
     "@vue/compiler-core": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
       "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.16.4",
         "@vue/shared": "3.2.41",
@@ -20725,7 +21190,8 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         }
       }
     },
@@ -20733,6 +21199,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
       "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
+      "dev": true,
       "requires": {
         "@vue/compiler-core": "3.2.41",
         "@vue/shared": "3.2.41"
@@ -20742,6 +21209,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
       "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.16.4",
         "@vue/compiler-core": "3.2.41",
@@ -20759,6 +21227,7 @@
           "version": "0.25.9",
           "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
           "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
           "requires": {
             "sourcemap-codec": "^1.4.8"
           }
@@ -20766,7 +21235,8 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
         }
       }
     },
@@ -20774,6 +21244,7 @@
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
       "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
+      "dev": true,
       "requires": {
         "@vue/compiler-dom": "3.2.41",
         "@vue/shared": "3.2.41"
@@ -20785,17 +21256,25 @@
       "integrity": "sha512-o9KfBeaBmCKl10usN4crU53fYtC1r7jJwdGKjPT24t348rHxgfpZ0xL3Xm/gLUYnc0oTp8LAmrxOeLyu6tbk2Q=="
     },
     "@vue/reactivity": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
-      "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.47.tgz",
+      "integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
       "requires": {
-        "@vue/shared": "3.2.41"
+        "@vue/shared": "3.2.47"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+          "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+        }
       }
     },
     "@vue/reactivity-transform": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
       "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
+      "dev": true,
       "requires": {
         "@babel/parser": "^7.16.4",
         "@vue/compiler-core": "3.2.41",
@@ -20808,6 +21287,7 @@
           "version": "0.25.9",
           "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
           "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "dev": true,
           "requires": {
             "sourcemap-codec": "^1.4.8"
           }
@@ -20815,37 +21295,93 @@
       }
     },
     "@vue/runtime-core": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.41.tgz",
-      "integrity": "sha512-0LBBRwqnI0p4FgIkO9q2aJBBTKDSjzhnxrxHYengkAF6dMOjeAIZFDADAlcf2h3GDALWnblbeprYYpItiulSVQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.2.47.tgz",
+      "integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
       "requires": {
-        "@vue/reactivity": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/reactivity": "3.2.47",
+        "@vue/shared": "3.2.47"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+          "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+        }
       }
     },
     "@vue/runtime-dom": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.41.tgz",
-      "integrity": "sha512-U7zYuR1NVIP8BL6jmOqmapRAHovEFp7CSw4pR2FacqewXNGqZaRfHoNLQsqQvVQ8yuZNZtxSZy0FFyC70YXPpA==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.2.47.tgz",
+      "integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
       "requires": {
-        "@vue/runtime-core": "3.2.41",
-        "@vue/shared": "3.2.41",
+        "@vue/runtime-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "csstype": "^2.6.8"
+      },
+      "dependencies": {
+        "@vue/shared": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+          "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+        }
       }
     },
     "@vue/server-renderer": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.41.tgz",
-      "integrity": "sha512-7YHLkfJdTlsZTV0ae5sPwl9Gn/EGr2hrlbcS/8naXm2CDpnKUwC68i1wGlrYAfIgYWL7vUZwk2GkYLQH5CvFig==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.2.47.tgz",
+      "integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
       "requires": {
-        "@vue/compiler-ssr": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/shared": "3.2.47"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+          "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.47",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+          "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+          "requires": {
+            "@vue/compiler-core": "3.2.47",
+            "@vue/shared": "3.2.47"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+          "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+          "requires": {
+            "@vue/compiler-dom": "3.2.47",
+            "@vue/shared": "3.2.47"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+          "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
       }
     },
     "@vue/shared": {
       "version": "3.2.41",
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
-      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw=="
+      "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==",
+      "dev": true
     },
     "@vue/test-utils": {
       "version": "2.0.2",
@@ -21198,10 +21734,34 @@
           "dev": true,
           "requires": {
             "vue-demi": "*"
+          },
+          "dependencies": {
+            "vue-demi": {
+              "version": "0.13.11",
+              "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+              "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+              "dev": true,
+              "requires": {}
+            }
           }
         }
       }
     },
+    "@zxing/library": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.19.2.tgz",
+      "integrity": "sha512-0aCQIbGXsDHcBuRYuZRZfJeLRYiPfdLxIlh5bY7k+k2bkxFwzla+75VyFi1rnjU5hqaZogdSH+Dw013YDsQOjg==",
+      "requires": {
+        "@zxing/text-encoding": "~0.9.0",
+        "ts-custom-error": "^3.0.0"
+      }
+    },
+    "@zxing/text-encoding": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@zxing/text-encoding/-/text-encoding-0.9.0.tgz",
+      "integrity": "sha512-U/4aVJ2mxI0aDNI8Uq0wEhMgY+u4CNtEb0om3+y3+niDAsoTCOB33UF0sxpzqzdqXLqmvc+vZyAt4O8pPdfkwA==",
+      "optional": true
+    },
     "abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -21534,6 +22094,26 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "barcode-detector": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/barcode-detector/-/barcode-detector-1.0.0.tgz",
+      "integrity": "sha512-LZSyqjumoq2WmMOeQZ2BiYYAqwnTlkXgqKOTcJlathpFS6IejsdSb6aIGmoSyOCjBgFNATzLgMJ9shNfklnz6A==",
+      "requires": {
+        "@zxing/library": "^0.18.4",
+        "jsqr": "^1.3.1"
+      },
+      "dependencies": {
+        "@zxing/library": {
+          "version": "0.18.6",
+          "resolved": "https://registry.npmjs.org/@zxing/library/-/library-0.18.6.tgz",
+          "integrity": "sha512-bulZ9JHoLFd9W36pi+7e7DnEYNJhljYjZ1UTsKPOoLMU3qtC+REHITeCRNx40zTRJZx18W5TBRXt5pq2Uopjsw==",
+          "requires": {
+            "@zxing/text-encoding": "~0.9.0",
+            "ts-custom-error": "^3.0.0"
+          }
+        }
+      }
+    },
     "base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -21692,6 +22272,11 @@
         "get-intrinsic": "^1.0.2"
       }
     },
+    "callforth": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/callforth/-/callforth-0.3.1.tgz",
+      "integrity": "sha512-Q2zPfqnwoKsb1DTVCr4lmhe49wKNBsMmNlbudjleu3/co+Nw1pOqFHYJHrW3VZ253ou9AAr+xauQR0C55NPdzA=="
+    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -25707,6 +26292,11 @@
         "universalify": "^2.0.0"
       }
     },
+    "jsqr": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsqr/-/jsqr-1.4.0.tgz",
+      "integrity": "sha512-dxLob7q65Xg2DvstYkRpkYtmKm2sPJ9oFhrhmudT1dZvNFFTlroai3AWSpLey/w5vMcLBXRgOJsbXpdN9HzU/A=="
+    },
     "jsx-ast-utils": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.2.tgz",
@@ -28564,6 +29154,14 @@
         }
       }
     },
+    "rtcpeerconnection-shim": {
+      "version": "1.2.15",
+      "resolved": "https://registry.npmjs.org/rtcpeerconnection-shim/-/rtcpeerconnection-shim-1.2.15.tgz",
+      "integrity": "sha512-C6DxhXt7bssQ1nHb154lqeL0SXz5Dx4RczXZu2Aa/L1NJFnEVDxFwCBo3fqtuljhHIGceg5JKBV4XJ0gW5JKyw==",
+      "requires": {
+        "sdp": "^2.6.0"
+      }
+    },
     "run-async": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.4.1.tgz",
@@ -28697,6 +29295,11 @@
       "integrity": "sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg==",
       "dev": true
     },
+    "sdp": {
+      "version": "2.12.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-2.12.0.tgz",
+      "integrity": "sha512-jhXqQAQVM+8Xj5EjJGVweuEzgtGWb3tmEEpl3CLP3cStInSbVHSg0QWOGQzNq8pSID4JkpeV2mPqlMDLrm0/Vw=="
+    },
     "selfsigned": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
@@ -29546,6 +30149,11 @@
       "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
       "dev": true
     },
+    "ts-custom-error": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/ts-custom-error/-/ts-custom-error-3.3.1.tgz",
+      "integrity": "sha512-5OX1tzOjxWEgsr/YEUWSuPrQ00deKLh6D7OTWcvNHm12/7QPyRh8SYpyWvA4IZv8H/+GQWQEh/kwo95Q9OVW1A=="
+    },
     "tsconfig-paths": {
       "version": "3.14.1",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz",
@@ -30361,15 +30969,101 @@
       "dev": true
     },
     "vue": {
-      "version": "3.2.41",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.41.tgz",
-      "integrity": "sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.2.47.tgz",
+      "integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
       "requires": {
-        "@vue/compiler-dom": "3.2.41",
-        "@vue/compiler-sfc": "3.2.41",
-        "@vue/runtime-dom": "3.2.41",
-        "@vue/server-renderer": "3.2.41",
-        "@vue/shared": "3.2.41"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-sfc": "3.2.47",
+        "@vue/runtime-dom": "3.2.47",
+        "@vue/server-renderer": "3.2.47",
+        "@vue/shared": "3.2.47"
+      },
+      "dependencies": {
+        "@vue/compiler-core": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+          "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/shared": "3.2.47",
+            "estree-walker": "^2.0.2",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-dom": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+          "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
+          "requires": {
+            "@vue/compiler-core": "3.2.47",
+            "@vue/shared": "3.2.47"
+          }
+        },
+        "@vue/compiler-sfc": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+          "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/compiler-core": "3.2.47",
+            "@vue/compiler-dom": "3.2.47",
+            "@vue/compiler-ssr": "3.2.47",
+            "@vue/reactivity-transform": "3.2.47",
+            "@vue/shared": "3.2.47",
+            "estree-walker": "^2.0.2",
+            "magic-string": "^0.25.7",
+            "postcss": "^8.1.10",
+            "source-map": "^0.6.1"
+          }
+        },
+        "@vue/compiler-ssr": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+          "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
+          "requires": {
+            "@vue/compiler-dom": "3.2.47",
+            "@vue/shared": "3.2.47"
+          }
+        },
+        "@vue/reactivity-transform": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+          "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
+          "requires": {
+            "@babel/parser": "^7.16.4",
+            "@vue/compiler-core": "3.2.47",
+            "@vue/shared": "3.2.47",
+            "estree-walker": "^2.0.2",
+            "magic-string": "^0.25.7"
+          }
+        },
+        "@vue/shared": {
+          "version": "3.2.47",
+          "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+          "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
+        },
+        "magic-string": {
+          "version": "0.25.9",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.9.tgz",
+          "integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
+          "requires": {
+            "sourcemap-codec": "^1.4.8"
+          }
+        },
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "vue-barcode-reader": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/vue-barcode-reader/-/vue-barcode-reader-1.0.3.tgz",
+      "integrity": "sha512-z4mv7+ai/8vECppBTb00tHnyFMMx6W1rAaQe+v214ihoaWK9iGrn8ZZsmgSxf3lwnrtGaibLdkonTtMrGsO+dA==",
+      "requires": {
+        "@zxing/library": "^0.19.1"
       }
     },
     "vue-bundle-renderer": {
@@ -30453,6 +31147,19 @@
         "@vue/devtools-api": "^6.2.1"
       }
     },
+    "vue-qrcode-reader": {
+      "version": "3.1.0-vue3-compatibility.2",
+      "resolved": "https://registry.npmjs.org/vue-qrcode-reader/-/vue-qrcode-reader-3.1.0-vue3-compatibility.2.tgz",
+      "integrity": "sha512-tGu2zmPGSi9SJR08Yl2favix0vs5SgXudGXdwW2KxcvlU9jfsX9FAYkuaifyiq3CgxKijwRxA/YJpS0Yl9PMfw==",
+      "requires": {
+        "@vue/compat": "^3.1.0",
+        "barcode-detector": "^1.0.0",
+        "callforth": "^0.3.1",
+        "core-js": "^3.6.5",
+        "vue": "latest",
+        "webrtc-adapter": "7.7.0"
+      }
+    },
     "vue-router": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
@@ -30612,6 +31319,15 @@
       "integrity": "sha512-8bWq0Iluiv9lVf9YaqWQ9+liNgXSHICm+rg544yRgGYaR8yXZTVBaHZkINZSB2yZSWo4b0F6MIxqJezVfOEAlg==",
       "dev": true
     },
+    "webrtc-adapter": {
+      "version": "7.7.0",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-7.7.0.tgz",
+      "integrity": "sha512-7Bp9OBnx642oJRkom1tNAbeJjUadAq2rh5xLL9YXPw5hVyt2h4hHr5bcoPYDs1stp/mZHSPSQA34YISdnr0DBQ==",
+      "requires": {
+        "rtcpeerconnection-shim": "^1.2.15",
+        "sdp": "^2.12.0"
+      }
+    },
     "whatwg-encoding": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-2.0.0.tgz",
diff --git a/packages/nc-gui/package.json b/packages/nc-gui/package.json
index 80987a16f5..fa866e618a 100644
--- a/packages/nc-gui/package.json
+++ b/packages/nc-gui/package.json
@@ -65,9 +65,11 @@
     "unique-names-generator": "^4.7.1",
     "v3-infinite-loading": "^1.2.2",
     "validator": "^13.7.0",
+    "vue-barcode-reader": "^1.0.3",
     "vue-dompurify-html": "^3.0.0",
     "vue-github-button": "^3.0.3",
     "vue-i18n": "^9.2.2",
+    "vue-qrcode-reader": "3.1.0-vue3-compatibility.2",
     "vue3-contextmenu": "^0.2.12",
     "vue3-text-clamp": "^0.1.1",
     "vuedraggable": "^4.1.0",
@@ -96,14 +98,17 @@
     "@intlify/vite-plugin-vue-i18n": "^6.0.1",
     "@nuxt/image-edge": "^1.0.0-27657146.da85542",
     "@types/axios": "^0.14.0",
+    "@types/d3-scale": "^4.0.3",
     "@types/dagre": "^0.7.48",
     "@types/file-saver": "^2.0.5",
     "@types/leaflet": "^1.9.0",
     "@types/leaflet.markercluster": "^1.5.1",
     "@types/papaparse": "^5.3.2",
+    "@types/qrcode": "^1.5.0",
     "@types/sortablejs": "^1.13.0",
     "@types/tinycolor2": "^1.4.3",
     "@types/validator": "^13.7.10",
+    "@types/vue-barcode-reader": "^0.0.0",
     "@vitest/ui": "^0.18.0",
     "@vue/compiler-sfc": "^3.2.37",
     "@vue/test-utils": "^2.0.2",
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
index bbb4b368f1..465d05bd4a 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import tinycolor from 'tinycolor2'
+import type { TableType } from 'nocodb-sdk'
 import {
   TabType,
   computed,
@@ -41,11 +42,13 @@ const { t } = useI18n()
 
 const { $e } = useNuxtApp()
 
+const { betaFeatureToggleState } = useBetaFeatureToggle()
+
 const route = useRoute()
 
 const router = useRouter()
 
-const { appInfo, token, signOut, signedIn, user, currentVersion } = useGlobal()
+const { appInfo, token, signOut, signedIn, user, currentVersion, isMobileMode, setIsMobileMode } = useGlobal()
 
 const projectStore = useProject()
 
@@ -142,7 +145,7 @@ const copyProjectInfo = async () => {
       // Copied to clipboard
       message.info(t('msg.info.copiedToClipboard'))
     }
-  } catch (e) {
+  } catch (e: any) {
     console.error(e)
     message.error(e.message)
   }
@@ -360,7 +363,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <!-- Swagger: Rest APIs -->
                     <a-menu-item key="api">
                       <div
-                        v-if="isUIAllowed('apiDocs')"
+                        v-if="isUIAllowed('apiDocs') && !isMobileMode"
                         v-e="['e:api-docs']"
                         class="nc-project-menu-item group"
                         @click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
@@ -372,7 +375,12 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
 
                     <!-- Copy Auth Token -->
                     <a-menu-item key="copy">
-                      <div v-e="['a:navbar:user:copy-auth-token']" class="nc-project-menu-item group" @click.stop="copyAuthToken">
+                      <div
+                        v-if="!isMobileMode"
+                        v-e="['a:navbar:user:copy-auth-token']"
+                        class="nc-project-menu-item group"
+                        @click.stop="copyAuthToken"
+                      >
                         <MdiScriptTextKeyOutline class="group-hover:text-accent" />
                         {{ $t('activity.account.authToken') }}
                       </div>
@@ -383,7 +391,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <!-- Team & Settings -->
                     <a-menu-item key="teamAndSettings">
                       <div
-                        v-if="isUIAllowed('settings')"
+                        v-if="isUIAllowed('settings') && !isMobileMode"
                         v-e="['c:navdraw:project-settings']"
                         class="nc-project-menu-item group"
                         @click="toggleDialog(true, 'teamAndAuth')"
@@ -393,6 +401,18 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                       </div>
                     </a-menu-item>
 
+                    <!-- Mobile Mode -->
+                    <a-menu-item v-if="betaFeatureToggleState.show || isMobileMode" key="mobile-mode">
+                      <div
+                        v-e="['e:set-mobile-mode']"
+                        class="nc-project-menu-item group"
+                        @click.stop="setIsMobileMode(!isMobileMode)"
+                      >
+                        <MaterialSymbolsMobileFriendly class="group-hover:text-accent" />
+                        {{ $t('activity.toggleMobileMode') }}
+                      </div>
+                    </a-menu-item>
+
                     <!-- Theme -->
                     <template v-if="isUIAllowed('projectTheme')">
                       <a-sub-menu key="theme">
@@ -470,7 +490,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
                     <a-menu-divider />
 
                     <!-- Preview As -->
-                    <a-sub-menu v-if="isUIAllowed('previewAs')" key="preview-as">
+                    <a-sub-menu v-if="isUIAllowed('previewAs') && !isMobileMode" key="preview-as">
                       <template #title>
                         <div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
                           <MdiFileEyeOutline class="group-hover:text-accent" />
diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
index 69b24887a2..b0a87b8b08 100644
--- a/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
@@ -8,7 +8,7 @@ const tabStore = useTabs()
 const { closeTab } = tabStore
 const { tabs, activeTabIndex, activeTab } = storeToRefs(tabStore)
 
-const { isLoading } = useGlobal()
+const { isLoading, isMobileMode } = useGlobal()
 
 provide(TabMetaInj, activeTab)
 
@@ -28,6 +28,12 @@ const { isOpen, toggle } = useSidebar('nc-left-sidebar')
 function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
   if (action === 'remove') closeTab(targetKey)
 }
+
+const hideSidebarOnClickOrTouchIfMobileMode = () => {
+  if (isMobileMode.value && isOpen.value) {
+    toggle(false)
+  }
+}
 </script>
 
 <template>
@@ -81,10 +87,10 @@ function onEdit(targetKey: number, action: 'add' | 'remove' | string) {
         </div>
 
         <LazyGeneralShareBaseButton class="mb-1px" />
-        <LazyGeneralFullScreen class="nc-fullscreen-icon mb-1px" />
+        <LazyGeneralFullScreen v-if="!isMobileMode" class="nc-fullscreen-icon mb-1px" />
       </div>
 
-      <div class="w-full min-h-[300px] flex-auto">
+      <div class="w-full min-h-[300px] flex-auto" @click="hideSidebarOnClickOrTouchIfMobileMode">
         <NuxtPage :page-key="`${$route.params.projectId}.${$route.name}`" />
       </div>
     </div>
diff --git a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
index 9cfca9bab8..cf245e418d 100644
--- a/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
+++ b/packages/nc-gui/pages/[projectType]/form/[viewId]/index/index.vue
@@ -1,5 +1,8 @@
 <script lang="ts" setup>
+import type { ColumnType } from 'nocodb-sdk'
 import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
+import { ref } from 'vue'
+import { StreamBarcodeReader } from 'vue-barcode-reader'
 import { useSharedFormStoreOrThrow } from '#imports'
 
 const { sharedFormView, submitForm, v$, formState, notFound, formColumns, submitted, secondsRemain, isLoading } =
@@ -17,6 +20,51 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
   return !!(required || (columnObj && columnObj.rqd && !columnObj.cdf))
 }
+
+const fieldTitleForCurrentScan = ref('')
+
+const scannerIsReady = ref(false)
+
+const showCodeScannerOverlay = ref(false)
+
+const onLoaded = async () => {
+  scannerIsReady.value = true
+}
+
+const showCodeScannerForFieldTitle = (fieldTitle: string) => {
+  showCodeScannerOverlay.value = true
+  fieldTitleForCurrentScan.value = fieldTitle
+}
+
+const findColumnByTitle = (title: string) => formColumns.value?.find((el: ColumnType) => el.title === title)
+
+const getScannedValueTransformerByFieldType = (fieldType: UITypes) => {
+  switch (fieldType) {
+    case UITypes.Number:
+      return (originalVal: string) => parseInt(originalVal)
+    default:
+      return (originalVal: string) => originalVal
+  }
+}
+
+const onDecode = async (scannedCodeValue: string) => {
+  if (!showCodeScannerOverlay.value) {
+    return
+  }
+  try {
+    const fieldForCurrentScan = findColumnByTitle(fieldTitleForCurrentScan.value)
+    if (fieldForCurrentScan == null) {
+      throw new Error(`Field with title ${fieldTitleForCurrentScan.value} not found`)
+    }
+    const transformedVal =
+      getScannedValueTransformerByFieldType(fieldForCurrentScan.uidt as UITypes)(scannedCodeValue) || scannedCodeValue
+    formState.value[fieldTitleForCurrentScan.value] = transformedVal
+    fieldTitleForCurrentScan.value = ''
+    showCodeScannerOverlay.value = false
+  } catch (error) {
+    console.error(error)
+  }
+}
 </script>
 
 <template>
@@ -55,6 +103,20 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
         </template>
 
         <template v-else>
+          <a-modal
+            v-model:visible="showCodeScannerOverlay"
+            :closable="false"
+            width="28rem"
+            centered
+            :footer="null"
+            wrap-class-name="nc-modal-generate-token"
+            destroy-on-close
+            @cancel="scannerIsReady = false"
+          >
+            <div class="relative flex flex-col h-full">
+              <StreamBarcodeReader v-show="scannerIsReady" @decode="onDecode" @loaded="onLoaded"> </StreamBarcodeReader>
+            </div>
+          </a-modal>
           <GeneralOverlay class="bg-gray-400/75" :model-value="isLoading" inline transition>
             <div class="w-full h-full flex items-center justify-center">
               <a-spin size="large" />
@@ -82,24 +144,36 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
                   </div>
 
                   <div>
-                    <LazySmartsheetVirtualCell
-                      v-if="isVirtualCol(field)"
-                      :model-value="null"
-                      class="mt-0 nc-input nc-cell"
-                      :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
-                      :column="field"
-                    />
-
-                    <LazySmartsheetCell
-                      v-else
-                      v-model="formState[field.title]"
-                      class="nc-input"
-                      :data-testid="`nc-form-input-cell-${field.label || field.title}`"
-                      :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
-                      :column="field"
-                      :edit-enabled="true"
-                    />
+                    <div class="flex">
+                      <LazySmartsheetVirtualCell
+                        v-if="isVirtualCol(field)"
+                        :model-value="null"
+                        class="mt-0 nc-input nc-cell"
+                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                        :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                        :column="field"
+                      />
+
+                      <LazySmartsheetCell
+                        v-else
+                        v-model="formState[field.title]"
+                        class="nc-input"
+                        :data-testid="`nc-form-input-cell-${field.label || field.title}`"
+                        :class="`nc-form-input-${field.title?.replaceAll(' ', '')}`"
+                        :column="field"
+                        :edit-enabled="true"
+                      />
+                      <a-button
+                        v-if="field.enable_scanner"
+                        class="nc-btn-fill-form-column-by-scan nc-toolbar-btn"
+                        :alt="$t('activity.fillByCodeScan')"
+                        @click="showCodeScannerForFieldTitle(field.title)"
+                      >
+                        <div class="flex items-center gap-1">
+                          <mdi-qrcode-scan class="h-5 w-5" />
+                        </div>
+                      </a-button>
+                    </div>
 
                     <div class="flex flex-col gap-2 text-slate-500 dark:text-slate-300 text-[0.75rem] my-2 px-1">
                       <div v-for="error of v$.localState[field.title]?.$errors" :key="error" class="text-red-500">
@@ -136,6 +210,10 @@ function isRequired(_columnObj: Record<string, any>, required = false) {
 
 <style lang="scss" scoped>
 :deep(.nc-cell .nc-action-icon) {
-  @apply !text-white-500 !bg-white/50 !rounded-full !p-1 !text-xs !w-7 !h-7 !flex !items-center !justify-center !cursor-pointer !hover:!bg-white-600 !hover:!text-white-600 !transition;
+  @apply !text-white-500 !bg-white/50 !rounded-full !p-1 !text-xs !w-7 !h-7 !flex !items-center !justify-center !cursor-pointer !hover: !bg-white-600 !hover: !text-white-600 !transition;
+}
+.nc-btn-fill-form-column-by-scan {
+  @apply h-auto;
+  @apply ml-1;
 }
 </style>
diff --git a/packages/nc-gui/pages/index/index/create-external.vue b/packages/nc-gui/pages/index/index/create-external.vue
index 8cb62363a4..7b2a3e02b4 100644
--- a/packages/nc-gui/pages/index/index/create-external.vue
+++ b/packages/nc-gui/pages/index/index/create-external.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ProjectType } from 'nocodb-sdk'
 import type { SelectHandler } from 'ant-design-vue/es/vc-select/Select'
 import type { DefaultConnection, ProjectCreateForm } from '#imports'
 import {
@@ -233,7 +234,7 @@ const createProject = async () => {
 
     const config = { ...formState.dataSource, connection }
 
-    const result = await api.project.create({
+    const result = (await api.project.create({
       title: formState.title,
       bases: [
         {
@@ -244,7 +245,7 @@ const createProject = async () => {
         },
       ],
       external: true,
-    })
+    })) as Partial<ProjectType>
 
     $e('a:project:create:extdb')
 
diff --git a/packages/nc-gui/pages/index/index/create.vue b/packages/nc-gui/pages/index/index/create.vue
index c9bfe2a2ad..ce1075453e 100644
--- a/packages/nc-gui/pages/index/index/create.vue
+++ b/packages/nc-gui/pages/index/index/create.vue
@@ -2,6 +2,7 @@
 import type { Form, Input } from 'ant-design-vue'
 import type { RuleObject } from 'ant-design-vue/es/form'
 import type { VNodeRef } from '@vue/runtime-core'
+import type { ProjectType } from 'nocodb-sdk'
 import {
   extractSdkResponseErrorMsg,
   generateUniqueName,
@@ -44,9 +45,9 @@ const createProject = async () => {
   try {
     creating.value = true
 
-    const result = await api.project.create({
+    const result = (await api.project.create({
       title: formState.title,
-    })
+    })) as Partial<ProjectType>
 
     await navigateTo(`/nc/${result.id}`)
   } catch (e: any) {
diff --git a/packages/nc-gui/pages/index/index/index.vue b/packages/nc-gui/pages/index/index/index.vue
index 431cf07ea4..1f39b9d239 100644
--- a/packages/nc-gui/pages/index/index/index.vue
+++ b/packages/nc-gui/pages/index/index/index.vue
@@ -11,6 +11,7 @@ import {
   message,
   navigateTo,
   onBeforeMount,
+  parseProp,
   projectThemeColors,
   ref,
   themeV2Colors,
@@ -80,7 +81,7 @@ const handleProjectColor = async (projectId: string, color: string) => {
 
     const project: ProjectType = await $api.project.read(projectId)
 
-    const meta = project?.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+    const meta = parseProp(project?.meta)
 
     await $api.project.update(projectId, {
       color,
@@ -113,7 +114,7 @@ const handleProjectColor = async (projectId: string, color: string) => {
 const getProjectPrimary = (project: ProjectType) => {
   if (!project) return
 
-  const meta = project.meta && typeof project.meta === 'string' ? JSON.parse(project.meta) : project.meta || {}
+  const meta = parseProp(project.meta)
 
   return meta.theme?.primaryColor || themeV2Colors['royal-blue'].DEFAULT
 }
@@ -136,7 +137,7 @@ const copyProjectMeta = async () => {
     const aggregatedMetaInfo = await $api.utils.aggregatedMetaInfo()
     await copy(JSON.stringify(aggregatedMetaInfo))
     message.info('Copied aggregated project meta to clipboard')
-  } catch (e) {
+  } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
diff --git a/packages/nc-gui/plugins/vue-qr-code-scanner.ts b/packages/nc-gui/plugins/vue-qr-code-scanner.ts
new file mode 100644
index 0000000000..984293be21
--- /dev/null
+++ b/packages/nc-gui/plugins/vue-qr-code-scanner.ts
@@ -0,0 +1,7 @@
+import VueQrcodeReader from 'vue-qrcode-reader'
+
+import { defineNuxtPlugin } from 'nuxt/app'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueQrcodeReader)
+})
diff --git a/packages/nc-gui/store/project.ts b/packages/nc-gui/store/project.ts
index ab32d6831f..31a239cab2 100644
--- a/packages/nc-gui/store/project.ts
+++ b/packages/nc-gui/store/project.ts
@@ -98,7 +98,7 @@ export const useProject = defineStore('projectStore', () => {
 
   async function loadProjectMetaInfo(force?: boolean) {
     if (!projectMetaInfo.value || force) {
-      projectMetaInfo.value = await api.project.metaGet(project.value.id!, {}, {})
+      projectMetaInfo.value = await api.project.metaGet(project.value.id!, {})
     }
   }
 
@@ -150,7 +150,7 @@ export const useProject = defineStore('projectStore', () => {
     if (data.meta && typeof data.meta === 'string') {
       await api.project.update(projectId.value, data)
     } else {
-      await api.project.update(projectId.value, { ...data, meta: JSON.stringify(data.meta) })
+      await api.project.update(projectId.value, { ...data, meta: stringifyProp(data.meta) })
     }
   }
 
diff --git a/packages/nc-gui/utils/dataUtils.ts b/packages/nc-gui/utils/dataUtils.ts
index 4703a94f69..b962b72bc0 100644
--- a/packages/nc-gui/utils/dataUtils.ts
+++ b/packages/nc-gui/utils/dataUtils.ts
@@ -1,5 +1,5 @@
 import { RelationTypes, UITypes } from 'nocodb-sdk'
-import type { ColumnType, LinkToAnotherRecordType, TableInfoType, TableType } from 'nocodb-sdk'
+import type { ColumnType, LinkToAnotherRecordType, TableType } from 'nocodb-sdk'
 
 export const extractPkFromRow = (row: Record<string, any>, columns: ColumnType[]) => {
   return (
@@ -21,7 +21,7 @@ export async function populateInsertObject({
 }: {
   meta: TableType
   ltarState: Record<string, any>
-  getMeta: (tableIdOrTitle: string, force?: boolean) => Promise<TableType | TableInfoType | null>
+  getMeta: (tableIdOrTitle: string, force?: boolean) => Promise<TableType | null>
   row: Record<string, any>
   throwError?: boolean
 }) {
diff --git a/packages/nc-gui/utils/filterUtils.ts b/packages/nc-gui/utils/filterUtils.ts
index 71af46a26d..bbc0e41478 100644
--- a/packages/nc-gui/utils/filterUtils.ts
+++ b/packages/nc-gui/utils/filterUtils.ts
@@ -1,7 +1,7 @@
-import { UITypes, isNumericCol, numericUITypes } from 'nocodb-sdk'
+import { isNumericCol, numericUITypes, UITypes } from 'nocodb-sdk'
 
 const getEqText = (fieldUiType: UITypes) => {
-  if (isNumericCol(fieldUiType)) {
+  if (isNumericCol(fieldUiType) || fieldUiType === UITypes.Time) {
     return '='
   } else if (
     [UITypes.SingleSelect, UITypes.Collaborator, UITypes.LinkToAnotherRecord, UITypes.Date, UITypes.DateTime].includes(
@@ -14,7 +14,7 @@ const getEqText = (fieldUiType: UITypes) => {
 }
 
 const getNeqText = (fieldUiType: UITypes) => {
-  if (isNumericCol(fieldUiType)) {
+  if (isNumericCol(fieldUiType) || fieldUiType === UITypes.Time) {
     return '!='
   } else if (
     [UITypes.SingleSelect, UITypes.Collaborator, UITypes.LinkToAnotherRecord, UITypes.Date, UITypes.DateTime].includes(
@@ -112,6 +112,7 @@ export const comparisonOpList = (
       UITypes.Collaborator,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
       ...numericUITypes,
     ],
   },
@@ -126,6 +127,7 @@ export const comparisonOpList = (
       UITypes.Collaborator,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
       ...numericUITypes,
     ],
   },
@@ -143,6 +145,7 @@ export const comparisonOpList = (
       UITypes.Lookup,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
       ...numericUITypes,
     ],
   },
@@ -160,6 +163,7 @@ export const comparisonOpList = (
       UITypes.Lookup,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
       ...numericUITypes,
     ],
   },
@@ -178,6 +182,7 @@ export const comparisonOpList = (
       UITypes.Lookup,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
     ],
   },
   {
@@ -195,6 +200,7 @@ export const comparisonOpList = (
       UITypes.Lookup,
       UITypes.Date,
       UITypes.DateTime,
+      UITypes.Time,
     ],
   },
   {
@@ -225,25 +231,25 @@ export const comparisonOpList = (
     text: getGtText(fieldUiType),
     value: 'gt',
     ignoreVal: false,
-    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime],
+    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime, UITypes.Time],
   },
   {
     text: getLtText(fieldUiType),
     value: 'lt',
     ignoreVal: false,
-    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime],
+    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime, UITypes.Time],
   },
   {
     text: getGteText(fieldUiType),
     value: 'gte',
     ignoreVal: false,
-    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime],
+    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime, UITypes.Time],
   },
   {
     text: getLteText(fieldUiType),
     value: 'lte',
     ignoreVal: false,
-    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime],
+    includedTypes: [...numericUITypes, UITypes.Date, UITypes.DateTime, UITypes.Time],
   },
   {
     text: 'is within',
diff --git a/packages/nc-gui/utils/index.ts b/packages/nc-gui/utils/index.ts
index bbb469e8d5..8a07905b63 100644
--- a/packages/nc-gui/utils/index.ts
+++ b/packages/nc-gui/utils/index.ts
@@ -22,3 +22,4 @@ export * from './memStorage'
 export * from './browserUtils'
 export * from './geoDataUtils'
 export * from './mimeTypeUtils'
+export * from './parseUtils'
diff --git a/packages/nc-gui/utils/parseUtils.ts b/packages/nc-gui/utils/parseUtils.ts
new file mode 100644
index 0000000000..ae567ab3b9
--- /dev/null
+++ b/packages/nc-gui/utils/parseUtils.ts
@@ -0,0 +1,17 @@
+export function parseProp(v: any): any {
+  if (!v) return {}
+  try {
+    return typeof v === 'string' ? JSON.parse(v) : v
+  } catch {
+    return {}
+  }
+}
+
+export function stringifyProp(v: any): string | undefined {
+  if (!v) return undefined
+  try {
+    return typeof v === 'string' ? v : JSON.stringify(v)
+  } catch {
+    return '{}'
+  }
+}
diff --git a/packages/nc-gui/utils/virtualCell.ts b/packages/nc-gui/utils/virtualCell.ts
index 92ab9eb7cb..9338df7834 100644
--- a/packages/nc-gui/utils/virtualCell.ts
+++ b/packages/nc-gui/utils/virtualCell.ts
@@ -5,13 +5,13 @@ export const isLTAR = (uidt: string, colOptions: unknown): colOptions is LinkToA
   uidt === UITypes.LinkToAnotherRecord
 
 export const isHm = (column: ColumnType) =>
-  isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.HAS_MANY
+  isLTAR(column.uidt!, column.colOptions) && column.colOptions.type === RelationTypes.HAS_MANY
 
 export const isMm = (column: ColumnType) =>
-  isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.MANY_TO_MANY
+  isLTAR(column.uidt!, column.colOptions) && column.colOptions.type === RelationTypes.MANY_TO_MANY
 
 export const isBt = (column: ColumnType) =>
-  isLTAR(column.uidt, column.colOptions) && column.colOptions.type === RelationTypes.BELONGS_TO
+  isLTAR(column.uidt!, column.colOptions) && column.colOptions.type === RelationTypes.BELONGS_TO
 
 export const isLookup = (column: ColumnType) => column.uidt === UITypes.Lookup
 export const isRollup = (column: ColumnType) => column.uidt === UITypes.Rollup
diff --git a/packages/nocodb-sdk/src/lib/Api.ts b/packages/nocodb-sdk/src/lib/Api.ts
index c6d70193b2..394e74e58f 100644
--- a/packages/nocodb-sdk/src/lib/Api.ts
+++ b/packages/nocodb-sdk/src/lib/Api.ts
@@ -815,6 +815,11 @@ export interface FormColumnType {
   required?: BoolType;
   /** Is this column shown in Form? */
   show?: BoolType;
+  /**
+   * Indicates whether the 'Fill by scan' button is visible for this column or not.
+   * @example true
+   */
+  enable_scanner?: BoolType;
   /** Form Column UUID (Not in use) */
   uuid?: StringOrNullType;
 }
@@ -1697,7 +1702,9 @@ export interface PluginTestReqType {
   /** Plugin Title */
   title: string;
   /** Plugin Input as JSON string */
-  input: string;
+  input: string | object;
+  /** @example Email */
+  category: string;
 }
 
 /**
@@ -1775,6 +1782,24 @@ export interface ProjectReqType {
   title: string;
 }
 
+/**
+ * Model for Project Update Request
+ */
+export interface ProjectUpdateReqType {
+  /**
+   * Primary Theme Color
+   * @example #24716E
+   */
+  color?: string;
+  /** Project Meta */
+  meta?: MetaType;
+  /**
+   * Project Title
+   * @example My Project
+   */
+  title?: string;
+}
+
 /**
  * Model for Project User Request
  */
@@ -2927,10 +2952,21 @@ export class Api<
  * @request POST:/api/v1/db/meta/projects/{projectId}/users
  * @response `200` `{
   \**
-   * Success Message
+   * Success Message for inviting single email
    * @example The user has been invited successfully
    *\
   msg?: string,
+  \** @example 8354ddba-a769-4d64-8397-eccb2e2b3c06 *\
+  invite_token?: string,
+  error?: ({
+  \** @example w@nocodb.com *\
+  email?: string,
+  \** @example <ERROR_MESSAGE> *\
+  error?: string,
+
+})[],
+  \** @example w@nocodb.com *\
+  email?: string,
 
 }` OK
  * @response `400` `{
@@ -2947,10 +2983,20 @@ export class Api<
       this.request<
         {
           /**
-           * Success Message
+           * Success Message for inviting single email
            * @example The user has been invited successfully
            */
           msg?: string;
+          /** @example 8354ddba-a769-4d64-8397-eccb2e2b3c06 */
+          invite_token?: string;
+          error?: {
+            /** @example w@nocodb.com */
+            email?: string;
+            /** @example <ERROR_MESSAGE> */
+            error?: string;
+          }[];
+          /** @example w@nocodb.com */
+          email?: string;
         },
         {
           /** @example BadRequest [Error]: <ERROR MESSAGE> */
@@ -3904,16 +3950,20 @@ export class Api<
  * @name Update
  * @summary Update Project
  * @request PATCH:/api/v1/db/meta/projects/{projectId}
- * @response `200` `void` OK
+ * @response `200` `number` OK
  * @response `400` `{
   \** @example BadRequest [Error]: <ERROR MESSAGE> *\
   msg: string,
 
 }`
  */
-    update: (projectId: IdType, data: number, params: RequestParams = {}) =>
+    update: (
+      projectId: IdType,
+      data: ProjectUpdateReqType,
+      params: RequestParams = {}
+    ) =>
       this.request<
-        void,
+        number,
         {
           /** @example BadRequest [Error]: <ERROR MESSAGE> */
           msg: string;
@@ -3923,6 +3973,7 @@ export class Api<
         method: 'PATCH',
         body: data,
         type: ContentType.Json,
+        format: 'json',
         ...params,
       }),
 
@@ -8319,6 +8370,7 @@ export class Api<
   ee?: boolean,
   ncAttachmentFieldSize?: number,
   ncMaxAttachmentsAllowed?: number,
+  isCloud?: boolean,
 
 }` OK
  * @response `400` `{
@@ -8347,6 +8399,7 @@ export class Api<
           ee?: boolean;
           ncAttachmentFieldSize?: number;
           ncMaxAttachmentsAllowed?: number;
+          isCloud?: boolean;
         },
         {
           /** @example BadRequest [Error]: <ERROR MESSAGE> */
diff --git a/packages/nocodb-sdk/src/lib/UITypes.ts b/packages/nocodb-sdk/src/lib/UITypes.ts
index b0b7fcbad0..ce9059c7a9 100644
--- a/packages/nocodb-sdk/src/lib/UITypes.ts
+++ b/packages/nocodb-sdk/src/lib/UITypes.ts
@@ -48,6 +48,7 @@ export const numericUITypes = [
   UITypes.Decimal,
   UITypes.Rating,
   UITypes.Rollup,
+  UITypes.Year,
 ];
 
 export function isNumericCol(
diff --git a/packages/nocodb-sdk/src/lib/columnRules/QrAndBarcodeRules.ts b/packages/nocodb-sdk/src/lib/columnRules/QrAndBarcodeRules.ts
index e6f05c322e..59a067fe3c 100644
--- a/packages/nocodb-sdk/src/lib/columnRules/QrAndBarcodeRules.ts
+++ b/packages/nocodb-sdk/src/lib/columnRules/QrAndBarcodeRules.ts
@@ -9,4 +9,6 @@ export const AllowedColumnTypesForQrAndBarcodes = [
   UITypes.Email,
   UITypes.Decimal,
   UITypes.Number,
+  UITypes.AutoNumber, 
+  UITypes.ID
 ];
diff --git a/packages/nocodb-sdk/src/lib/formulaHelpers.ts b/packages/nocodb-sdk/src/lib/formulaHelpers.ts
index 4d71420952..0ddb2f4376 100644
--- a/packages/nocodb-sdk/src/lib/formulaHelpers.ts
+++ b/packages/nocodb-sdk/src/lib/formulaHelpers.ts
@@ -179,7 +179,7 @@ export function jsepTreeToFormula(node) {
 
   if (node.type === 'Literal') {
     if (typeof node.value === 'string') {
-      return String.raw`"${escapeDoubleQuotes(node.value)}"`;
+      return String.raw`"${escapeLiteral(node.value)}"`;
     }
     return '' + node.value;
   }
@@ -214,6 +214,14 @@ export function jsepTreeToFormula(node) {
   return '';
 }
 
-function escapeDoubleQuotes(v: string) {
-  return v.replace(/"/g, '\\"');
+function escapeLiteral(v: string) {
+  return (
+    v
+      // replace \ to \\
+      .replace(/\\/g, `\\\\`)
+      // replace " to \"
+      .replace(/"/g, `\\"`)
+      // replace ' to \'
+      .replace(/'/g, `\\'`)
+  );
 }
diff --git a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/conditionV2.ts b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/conditionV2.ts
index d7abfa2911..fd2403bf22 100644
--- a/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/conditionV2.ts
+++ b/packages/nocodb/src/lib/db/sql-data-mapper/lib/sql/conditionV2.ts
@@ -691,7 +691,9 @@ const parseConditionV2 = async (
               qb = qb.whereNull(customWhereClause || field);
               if (
                 !isNumericCol(column.uidt) &&
-                ![UITypes.Date, UITypes.DateTime].includes(column.uidt)
+                ![UITypes.Date, UITypes.DateTime, UITypes.Time].includes(
+                  column.uidt
+                )
               ) {
                 qb = qb.orWhere(field, '');
               }
@@ -707,7 +709,9 @@ const parseConditionV2 = async (
               qb = qb.whereNotNull(customWhereClause || field);
               if (
                 !isNumericCol(column.uidt) &&
-                ![UITypes.Date, UITypes.DateTime].includes(column.uidt)
+                ![UITypes.Date, UITypes.DateTime, UITypes.Time].includes(
+                  column.uidt
+                )
               ) {
                 qb = qb.whereNot(field, '');
               }
diff --git a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
index 46a46ab669..239b89529a 100644
--- a/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
+++ b/packages/nocodb/src/lib/migrations/XcMigrationSourcev2.ts
@@ -15,6 +15,7 @@ import * as nc_024_barcode_column_type from './v2/nc_024_barcode_column_type';
 import * as nc_025_add_row_height from './v2/nc_025_add_row_height';
 import * as nc_026_map_view from './v2/nc_026_map_view';
 import * as nc_027_add_comparison_sub_op from './v2/nc_027_add_comparison_sub_op';
+import * as nc_028_add_enable_scanner_in_form_columns_meta_table from './v2/nc_026_add_enable_scanner_in_form_columns_meta_table';
 
 // Create a custom migration source class
 export default class XcMigrationSourcev2 {
@@ -41,6 +42,7 @@ export default class XcMigrationSourcev2 {
       'nc_025_add_row_height',
       'nc_026_map_view',
       'nc_027_add_comparison_sub_op',
+      'nc_028_add_enable_scanner_in_form_columns_meta_table',
     ]);
   }
 
@@ -84,6 +86,8 @@ export default class XcMigrationSourcev2 {
         return nc_026_map_view;
       case 'nc_027_add_comparison_sub_op':
         return nc_027_add_comparison_sub_op;
+      case 'nc_028_add_enable_scanner_in_form_columns_meta_table':
+        return nc_028_add_enable_scanner_in_form_columns_meta_table;
     }
   }
 }
diff --git a/packages/nocodb/src/lib/migrations/v2/nc_026_add_enable_scanner_in_form_columns_meta_table.ts b/packages/nocodb/src/lib/migrations/v2/nc_026_add_enable_scanner_in_form_columns_meta_table.ts
new file mode 100644
index 0000000000..62339a182e
--- /dev/null
+++ b/packages/nocodb/src/lib/migrations/v2/nc_026_add_enable_scanner_in_form_columns_meta_table.ts
@@ -0,0 +1,16 @@
+import { MetaTable } from '../../utils/globals';
+import type { Knex } from 'knex';
+
+const up = async (knex: Knex) => {
+  await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, (table) => {
+    table.boolean('enable_scanner');
+  });
+};
+
+const down = async (knex) => {
+  await knex.schema.alterTable(MetaTable.FORM_VIEW_COLUMNS, (table) => {
+    table.dropColumns('enable_scanner');
+  });
+};
+
+export { up, down };
diff --git a/packages/nocodb/src/lib/models/FormViewColumn.ts b/packages/nocodb/src/lib/models/FormViewColumn.ts
index 462b2216f1..69795004d1 100644
--- a/packages/nocodb/src/lib/models/FormViewColumn.ts
+++ b/packages/nocodb/src/lib/models/FormViewColumn.ts
@@ -21,6 +21,7 @@ export default class FormViewColumn implements FormColumnType {
   help?: StringOrNullType;
   description?: StringOrNullType;
   required?: BoolType;
+  enable_scanner?: BoolType;
   uuid?: StringOrNullType;
   show?: BoolType;
   order?: number;
@@ -68,6 +69,7 @@ export default class FormViewColumn implements FormColumnType {
       'help',
       'description',
       'required',
+      'enable_scanner',
       'meta',
     ]);
 
@@ -166,6 +168,7 @@ export default class FormViewColumn implements FormColumnType {
       'show',
       'order',
       'meta',
+      'enable_scanner',
     ]);
 
     // get existing cache
diff --git a/packages/nocodb/src/lib/services/project.svc.ts b/packages/nocodb/src/lib/services/project.svc.ts
index bfb2d7cba8..023a1ebe30 100644
--- a/packages/nocodb/src/lib/services/project.svc.ts
+++ b/packages/nocodb/src/lib/services/project.svc.ts
@@ -11,7 +11,7 @@ import Project from '../models/Project';
 import syncMigration from '../meta/helpers/syncMigration';
 import { populateMeta, validatePayload } from '../meta/api/helpers';
 import { extractPropsAndSanitize } from '../meta/helpers/extractProps';
-import type { ProjectReqType } from 'nocodb-sdk';
+import type { ProjectReqType, ProjectUpdateReqType } from 'nocodb-sdk';
 
 export async function projectCreate(param: {
   project: ProjectReqType;
@@ -136,8 +136,13 @@ export function sanitizeProject(project: any) {
 
 export async function projectUpdate(param: {
   projectId: string;
-  project: ProjectReqType;
+  project: ProjectUpdateReqType;
 }) {
+  validatePayload(
+    'swagger.json#/components/schemas/ProjectUpdateReq',
+    param.project
+  );
+
   const project = await Project.getWithInfo(param.projectId);
 
   const data: Partial<Project> = extractPropsAndSanitize(
diff --git a/packages/nocodb/src/lib/version-upgrader/ncFilterUpgrader_0105003.ts b/packages/nocodb/src/lib/version-upgrader/ncFilterUpgrader_0105003.ts
index 2755ed8bf6..7752969160 100644
--- a/packages/nocodb/src/lib/version-upgrader/ncFilterUpgrader_0105003.ts
+++ b/packages/nocodb/src/lib/version-upgrader/ncFilterUpgrader_0105003.ts
@@ -5,7 +5,7 @@ import Filter from '../models/Filter';
 import type { NcUpgraderCtx } from './NcUpgrader';
 import type NcMetaIO from '../meta/NcMetaIO';
 
-// as of 0.105.3, date / datetime filters include `is like` and `is not like` which are not practical
+// as of 0.105.3, year, time, date and datetime filters include `is like` and `is not like` which are not practical
 // `removeLikeAndNlikeFilters` in this upgrader is simply to remove them
 
 // besides, `null` and `empty` will be migrated to `blank` in `migrateEmptyAndNullFilters`
@@ -19,6 +19,9 @@ import type NcMetaIO from '../meta/NcMetaIO';
 //   - remove `is like` and `is not like`
 //   - migrate `null` or `empty` filters to `blank`
 //   - add `exact date` in comparison_sub_op for existing filters `eq` and `neq`
+// - Year / Time columns:
+//   - remove `is like` and `is not like`
+//   - migrate `null` or `empty` filters to `blank`
 
 function removeLikeAndNlikeFilters(filter: Filter, ncMeta: NcMetaIO) {
   const actions = [];
@@ -88,6 +91,11 @@ export default async function ({ ncMeta }: NcUpgraderCtx) {
         ...migrateEmptyAndNullFilters(filter, ncMeta),
         ...migrateEqAndNeqFilters(filter, ncMeta),
       ]);
+    } else if ([UITypes.Time, UITypes.Year].includes(col.uidt)) {
+      await Promise.all([
+        ...removeLikeAndNlikeFilters(filter, ncMeta),
+        ...migrateEmptyAndNullFilters(filter, ncMeta),
+      ]);
     }
   }
 }
diff --git a/packages/nocodb/src/schema/swagger.json b/packages/nocodb/src/schema/swagger.json
index 9174980135..79456de409 100644
--- a/packages/nocodb/src/schema/swagger.json
+++ b/packages/nocodb/src/schema/swagger.json
@@ -1461,16 +1461,75 @@
                       "x-stoplight": {
                         "id": "waau9tvy75zsd"
                       },
-                      "description": "Success Message",
+                      "description": "Success Message for inviting single email",
                       "example": "The user has been invited successfully"
+                    },
+                    "invite_token": {
+                      "type": "string",
+                      "x-stoplight": {
+                        "id": "yx0s35u8ds3p7"
+                      },
+                      "example": "8354ddba-a769-4d64-8397-eccb2e2b3c06"
+                    },
+                    "error": {
+                      "type": "array",
+                      "x-stoplight": {
+                        "id": "yhfi6wzhr6zr1"
+                      },
+                      "items": {
+                        "x-stoplight": {
+                          "id": "ce0hlv3d0f96j"
+                        },
+                        "type": "object",
+                        "properties": {
+                          "email": {
+                            "type": "string",
+                            "x-stoplight": {
+                              "id": "dgnh01j4lxvl1"
+                            },
+                            "example": "w@nocodb.com"
+                          },
+                          "error": {
+                            "type": "string",
+                            "x-stoplight": {
+                              "id": "7dgttqiijg8no"
+                            },
+                            "example": "<ERROR_MESSAGE>"
+                          }
+                        }
+                      }
+                    },
+                    "email": {
+                      "type": "string",
+                      "x-stoplight": {
+                        "id": "08pqst2q30vot"
+                      },
+                      "example": "w@nocodb.com"
                     }
                   }
                 },
                 "examples": {
-                  "Example 1": {
+                  "Inviting a user without any errors": {
                     "value": {
                       "msg": "The user has been invited successfully"
                     }
+                  },
+                  "Inviting a user but invitation email failed to send": {
+                    "value": {
+                      "invite_token": "8354ddba-a769-4d64-8397-eccb2e2b3c06",
+                      "email": "w@nocodb.com"
+                    }
+                  },
+                  "Inviting multiple users": {
+                    "value": {
+                      "invite_token": "8354ddba-a769-4d64-8397-eccb2e2b3c06",
+                      "error": [
+                        {
+                          "email": "w@nocodb.com",
+                          "error": "<ERROR MESSAGE>"
+                        }
+                      ]
+                    }
                   }
                 }
               }
@@ -2149,7 +2208,20 @@
         "operationId": "project-update",
         "responses": {
           "200": {
-            "description": "OK"
+            "description": "OK",
+            "content": {
+              "application/json": {
+                "schema": {
+                  "type": "number",
+                  "example": 1
+                },
+                "examples": {
+                  "Example 1": {
+                    "value": 1
+                  }
+                }
+              }
+            }
           },
           "400": {
             "$ref": "#/components/responses/BadRequest"
@@ -2160,11 +2232,15 @@
           "content": {
             "application/json": {
               "schema": {
-                "type": "number"
+                "$ref": "#/components/schemas/ProjectUpdateReq"
               },
               "examples": {
                 "Example 1": {
-                  "value": 1
+                  "value": {
+                    "color": "#24716E",
+                    "meta": null,
+                    "title": "My Project"
+                  }
                 }
               }
             }
@@ -12211,6 +12287,15 @@
             "application/json": {
               "schema": {
                 "$ref": "#/components/schemas/PluginTestReq"
+              },
+              "examples": {
+                "Example 1": {
+                  "value": {
+                    "title": "Plugin Foo",
+                    "input": "{\"bucket\":\"my-bucket\",\"region\":\"us-west-004\",\"access_key\":\"redacted\",\"access_secret\":\"redacted\"}",
+                    "category": "Email"
+                  }
+                }
               }
             }
           }
@@ -12628,6 +12713,12 @@
                     },
                     "ncMaxAttachmentsAllowed": {
                       "type": "number"
+                    },
+                    "isCloud": {
+                      "type": "boolean",
+                      "x-stoplight": {
+                        "id": "bstdkpky2131f"
+                      }
                     }
                   }
                 },
@@ -12650,7 +12741,8 @@
                       "ncSiteUrl": "http://localhost:8080",
                       "ee": false,
                       "ncAttachmentFieldSize": 20971520,
-                      "ncMaxAttachmentsAllowed": 10
+                      "ncMaxAttachmentsAllowed": 10,
+                      "isCloud": false
                     }
                   }
                 }
@@ -15120,6 +15212,7 @@
             "order": 1,
             "required": false,
             "show": 1,
+            "enable_scanner": true,
             "updated_at": "2022-02-15 12:39:16",
             "uuid": null
           }
@@ -15166,6 +15259,11 @@
             "$ref": "#/components/schemas/Bool",
             "description": "Is this column shown in Form?"
           },
+          "enable_scanner": {
+            "$ref": "#/components/schemas/Bool",
+            "description": "Indicates whether the 'Fill by scan' button is visible for this column or not.",
+            "example": true
+          },
           "uuid": {
             "$ref": "#/components/schemas/StringOrNull",
             "description": "Form Column UUID (Not in use)"
@@ -17211,7 +17309,8 @@
         "examples": [
           {
             "title": "Plugin Foo",
-            "input": "{\"bucket\":\"my-bucket\",\"region\":\"us-west-004\",\"access_key\":\"redacted\",\"access_secret\":\"redacted\"}"
+            "input": "{\"bucket\":\"my-bucket\",\"region\":\"us-west-004\",\"access_key\":\"redacted\",\"access_secret\":\"redacted\"}",
+            "category": "Email"
           }
         ],
         "title": "Plugin Test Request Model",
@@ -17229,12 +17328,20 @@
                 "description": "Plugin Input as JSON string"
               },
               {
-                "description": "Plugin Input"
+                "description": "Plugin Input",
+                "type": "object"
               }
             ]
+          },
+          "category": {
+            "x-stoplight": {
+              "id": "rg3i3ov9rs6d0"
+            },
+            "type": "string",
+            "example": "Email"
           }
         },
-        "required": ["title", "input"]
+        "required": ["title", "input", "category"]
       },
       "Project": {
         "description": "Model for Project",
@@ -17466,6 +17573,43 @@
         "title": "Project Request Model",
         "type": "object"
       },
+      "ProjectUpdateReq": {
+        "description": "Model for Project Update Request",
+        "x-stoplight": {
+          "id": "4zgrec70wyz4c"
+        },
+        "examples": [
+          {
+            "color": "#24716E",
+            "meta": null,
+            "title": "My Project"
+          }
+        ],
+        "title": "Project Update Request Model",
+        "type": "object",
+        "properties": {
+          "color": {
+            "description": "Primary Theme Color",
+            "example": "#24716E",
+            "maxLength": 50,
+            "type": "string"
+          },
+          "meta": {
+            "$ref": "#/components/schemas/Meta",
+            "description": "Project Meta",
+            "x-stoplight": {
+              "id": "m05w9sbwqgul3"
+            }
+          },
+          "title": {
+            "description": "Project Title",
+            "example": "My Project",
+            "maxLength": 128,
+            "minLength": 1,
+            "type": "string"
+          }
+        }
+      },
       "ProjectUserReq": {
         "description": "Model for Project User Request",
         "examples": [
diff --git a/tests/playwright/package-lock.json b/tests/playwright/package-lock.json
index ddf6fcfb54..c0ac282152 100644
--- a/tests/playwright/package-lock.json
+++ b/tests/playwright/package-lock.json
@@ -36,7 +36,7 @@
       }
     },
     "../../packages/nocodb-sdk": {
-      "version": "0.105.2",
+      "version": "0.105.3",
       "license": "AGPL-3.0-or-later",
       "dependencies": {
         "axios": "^0.21.1",
diff --git a/tests/playwright/pages/Dashboard/FindRowByScanOverlay/index.ts b/tests/playwright/pages/Dashboard/FindRowByScanOverlay/index.ts
new file mode 100644
index 0000000000..1b79441129
--- /dev/null
+++ b/tests/playwright/pages/Dashboard/FindRowByScanOverlay/index.ts
@@ -0,0 +1,34 @@
+import { Locator } from '@playwright/test';
+import BasePage from '../../Base';
+import { DashboardPage } from '..';
+import { ToolbarPage } from '../common/Toolbar';
+
+export class FindRowByScanOverlay extends BasePage {
+  readonly dashboard: DashboardPage;
+  readonly toolbar: ToolbarPage;
+  readonly selectColumnDropdown: Locator;
+
+  constructor(dashboard: DashboardPage) {
+    super(dashboard.rootPage);
+    this.dashboard = dashboard;
+    this.toolbar = dashboard.grid.toolbar;
+    this.selectColumnDropdown = this.dashboard.get().locator('.nc-dropdown-scanner-column-id');
+  }
+
+  get() {
+    return this.dashboard.get().locator(`.nc-overlay-find-row-by-scan`);
+  }
+
+  async isVisible() {
+    return await this.get().isVisible();
+  }
+
+  async scannerScreenIsVisible() {
+    return await this.get().locator(`.nc-scanner-screen`).isVisible();
+  }
+
+  async selectColumnToScan({ columnName }: { columnName: string }) {
+    await this.selectColumnDropdown.click();
+    await this.selectColumnDropdown.selectOption({ label: columnName });
+  }
+}
diff --git a/tests/playwright/pages/Dashboard/TreeView.ts b/tests/playwright/pages/Dashboard/TreeView.ts
index 384c85c44b..7caa2d0f3d 100644
--- a/tests/playwright/pages/Dashboard/TreeView.ts
+++ b/tests/playwright/pages/Dashboard/TreeView.ts
@@ -40,11 +40,17 @@ export class TreeViewPage extends BasePage {
     title,
     mode = 'standard',
     networkResponse = true,
+    mobileMode = false,
   }: {
     title: string;
     mode?: string;
     networkResponse?: boolean;
+    mobileMode?: boolean;
   }) {
+    if (mobileMode) {
+      await this.rootPage.locator('.h-full > div > .nc-sidebar-left-toggle-icon').click();
+    }
+
     if ((await this.get().locator('.active.nc-project-tree-tbl').count()) > 0) {
       if ((await this.get().locator('.active.nc-project-tree-tbl').innerText()) === title) {
         // table already open
diff --git a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
index 206af2f450..0823c8763d 100644
--- a/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
+++ b/tests/playwright/pages/Dashboard/ViewSidebar/index.ts
@@ -37,9 +37,9 @@ export class ViewSidebarPage extends BasePage {
     }
   }
 
-  async activateGeoDataEasterEgg() {
+  async changeBetaFeatureToggleValue() {
     await this.dashboard.rootPage.evaluate(_ => {
-      window.localStorage.setItem('geodataToggleState', 'true');
+      window.localStorage.setItem('betaFeatureToggleState', 'true');
     });
     await this.rootPage.goto(this.rootPage.url());
   }
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
index 44e3457638..ee69da6728 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/Filter.ts
@@ -90,6 +90,26 @@ export class ToolbarFilterPage extends BasePage {
     if (value) {
       let fillFilter: any = null;
       switch (dataType) {
+        case UITypes.Year:
+          await this.get().locator('.nc-filter-value-select').click();
+          await this.rootPage.locator(`.ant-picker-dropdown:visible`);
+          await this.rootPage.locator(`.ant-picker-cell-inner:has-text("${value}")`).click();
+          break;
+        case UITypes.Time:
+          // eslint-disable-next-line no-case-declarations
+          const time = value.split(':');
+          await this.get().locator('.nc-filter-value-select').click();
+          await this.rootPage.locator(`.ant-picker-dropdown:visible`);
+          await this.rootPage
+            .locator(`.ant-picker-time-panel-column:nth-child(1)`)
+            .locator(`.ant-picker-time-panel-cell:has-text("${time[0]}")`)
+            .click();
+          await this.rootPage
+            .locator(`.ant-picker-time-panel-column:nth-child(2)`)
+            .locator(`.ant-picker-time-panel-cell:has-text("${time[1]}")`)
+            .click();
+          await this.rootPage.locator(`.ant-btn-primary:has-text("Ok")`).click();
+          break;
         case UITypes.Date:
           if (opSubType === 'exact date') {
             await this.get().locator('.nc-filter-value-select').click();
@@ -104,7 +124,6 @@ export class ToolbarFilterPage extends BasePage {
             });
             await this.toolbar.parent.dashboard.waitForLoaderToDisappear();
             await this.toolbar.parent.waitLoading();
-            break;
           }
           break;
         case UITypes.Duration:
diff --git a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
index 18d37e83e0..99f79e4364 100644
--- a/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
+++ b/tests/playwright/pages/Dashboard/common/Toolbar/index.ts
@@ -67,6 +67,10 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.fields.get().waitFor({ state: 'hidden' });
   }
 
+  async clickFindRowByScanButton() {
+    await this.get().locator(`button.nc-btn-find-row-by-scan`).click();
+  }
+
   async clickSort() {
     const menuOpen = await this.sort.get().isVisible();
 
@@ -76,6 +80,18 @@ export class ToolbarPage extends BasePage {
     if (menuOpen) await this.sort.get().waitFor({ state: 'hidden' });
   }
 
+  async verifyFieldsButtonIsVisibleWithTextAndIcon() {
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toBeVisible();
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toHaveText('Fields');
+    expect(await this.get().locator(`button.nc-fields-menu-btn`).locator(`svg`).count()).toBe(2);
+  }
+
+  async verifyFieldsButtonIsVisibleWithoutTextButIcon() {
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).toBeVisible();
+    await expect(this.get().locator(`button.nc-fields-menu-btn`)).not.toHaveText('Fields');
+    expect(await this.get().locator(`button.nc-fields-menu-btn`).locator(`svg`).count()).toBe(2);
+  }
+
   async clickFilter({
     // `networkValidation` is used to verify that api calls are made when the button is clicked
     // which happens when the filter is opened for the first time
diff --git a/tests/playwright/pages/Dashboard/index.ts b/tests/playwright/pages/Dashboard/index.ts
index c1fd33c669..e0a8e098ed 100644
--- a/tests/playwright/pages/Dashboard/index.ts
+++ b/tests/playwright/pages/Dashboard/index.ts
@@ -15,10 +15,12 @@ import { ImportAirtablePage } from './Import/Airtable';
 import { ImportTemplatePage } from './Import/ImportTemplate';
 import { WebhookFormPage } from './WebhookForm';
 import { ProjectsPage } from '../ProjectsPage';
+import { FindRowByScanOverlay } from './FindRowByScanOverlay';
 
 export class DashboardPage extends BasePage {
   readonly project: any;
   readonly tablesSideBar: Locator;
+  readonly projectMenuLink: Locator;
   readonly tabBar: Locator;
   readonly treeView: TreeViewPage;
   readonly grid: GridPage;
@@ -28,6 +30,7 @@ export class DashboardPage extends BasePage {
   readonly map: MapPage;
   readonly expandedForm: ExpandedFormPage;
   readonly webhookForm: WebhookFormPage;
+  readonly findRowByScanOverlay: FindRowByScanOverlay;
   readonly childList: ChildList;
   readonly linkRecord: LinkRecord;
   readonly settings: SettingsPage;
@@ -39,6 +42,7 @@ export class DashboardPage extends BasePage {
     super(rootPage);
     this.project = project;
     this.tablesSideBar = rootPage.locator('.nc-treeview-container');
+    this.projectMenuLink = rootPage.getByTestId('nc-project-menu');
     this.tabBar = rootPage.locator('.nc-tab-bar');
     this.treeView = new TreeViewPage(this, project);
     this.grid = new GridPage(this);
@@ -48,6 +52,7 @@ export class DashboardPage extends BasePage {
     this.map = new MapPage(this);
     this.expandedForm = new ExpandedFormPage(this);
     this.webhookForm = new WebhookFormPage(this);
+    this.findRowByScanOverlay = new FindRowByScanOverlay(this);
     this.childList = new ChildList(this);
     this.linkRecord = new LinkRecord(this);
     this.settings = new SettingsPage(this);
@@ -63,6 +68,24 @@ export class DashboardPage extends BasePage {
     await this.rootPage.goto(`/#/nc/${this.project.id}/auth`);
   }
 
+  getProjectMenuLink({ title }: { title: string }) {
+    return this.rootPage.locator(`div.nc-project-menu-item:has-text("${title}")`);
+  }
+
+  async verifyTeamAndSettingsLinkIsVisible() {
+    await this.projectMenuLink.click();
+    const teamAndSettingsLink = await this.getProjectMenuLink({ title: ' Team & Settings' });
+    await expect(teamAndSettingsLink).toBeVisible();
+    await this.projectMenuLink.click();
+  }
+
+  async verifyTeamAndSettingsLinkIsNotVisible() {
+    await this.projectMenuLink.click();
+    const teamAndSettingsLink = await this.getProjectMenuLink({ title: ' Team & Settings' });
+    await expect(teamAndSettingsLink).not.toBeVisible();
+    await this.projectMenuLink.click();
+  }
+
   async gotoSettings() {
     await this.rootPage.getByTestId('nc-project-menu').click();
     await this.rootPage.locator('div.nc-project-menu-item:has-text(" Team & Settings")').click();
@@ -131,6 +154,13 @@ export class DashboardPage extends BasePage {
     }
   }
 
+  async toggleMobileMode() {
+    await this.projectMenuLink.click();
+    const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
+    await projMenu.locator('[data-menu-id="mobile-mode"]:visible').click();
+    await this.projectMenuLink.click();
+  }
+
   async signOut() {
     await this.rootPage.getByTestId('nc-project-menu').click();
     const projMenu = this.rootPage.locator('.nc-dropdown-project-menu');
diff --git a/tests/playwright/setup/xcdb-records.ts b/tests/playwright/setup/xcdb-records.ts
index 7b565b4cf3..75df0bb2fa 100644
--- a/tests/playwright/setup/xcdb-records.ts
+++ b/tests/playwright/setup/xcdb-records.ts
@@ -1,6 +1,6 @@
 import { ColumnType, UITypes } from 'nocodb-sdk';
 
-const rowMixedValue = (column: ColumnType, index: number) => {
+const rowMixedValue = (column: ColumnType, index: number, db?: string) => {
   // Array of country names
   const countries = [
     'Afghanistan',
@@ -36,11 +36,33 @@ const rowMixedValue = (column: ColumnType, index: number) => {
     null,
   ];
 
+  // compute timezone offset
+  const offset = new Date().getTimezoneOffset();
+  const timezoneOffset =
+    (db === 'mysql' ? (offset < 0 ? '+' : '-') : offset <= 0 ? '+' : '-') +
+    String(Math.abs(Math.round(offset / 60))).padStart(2, '0') +
+    ':' +
+    String(Math.abs(offset % 60)).padStart(2, '0');
+
   // Array of random integers, not more than 10000
   const numbers = [33, null, 456, 333, 267, 34, 8754, 3234, 44, 33, null];
   const decimals = [33.3, 456.34, 333.3, null, 267.5674, 34.0, 8754.0, 3234.547, 44.2647, 33.98, null];
   const duration = [60, 120, 180, 3600, 3660, 3720, null, 3780, 60, 120, null];
+  const time = [
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 04:04:00${timezoneOffset}`,
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 18:18:18${timezoneOffset}`,
+    null,
+    `1999-01-01 02:02:00${timezoneOffset}`,
+    `1999-01-01 20:20:20${timezoneOffset}`,
+    `1999-01-01 18:18:18${timezoneOffset}`,
+    null,
+  ];
   const rating = [0, 1, 2, 3, null, 0, 4, 5, 0, 1, null];
+  const years = [2023, null, 1956, 2023, 1967, 2024, 1954, 1924, 2044, 1923, null];
 
   // Array of random sample email strings (not more than 100 characters)
   const emails = [
@@ -131,6 +153,10 @@ const rowMixedValue = (column: ColumnType, index: number) => {
       return singleSelect[index % singleSelect.length];
     case UITypes.MultiSelect:
       return multiSelect[index % multiSelect.length];
+    case UITypes.Year:
+      return years[index % years.length];
+    case UITypes.Time:
+      return time[index % time.length];
     default:
       return `test-${index}`;
   }
diff --git a/tests/playwright/tests/columnGeoData.spec.ts b/tests/playwright/tests/columnGeoData.spec.ts
index bcd42687d1..290269b6b3 100644
--- a/tests/playwright/tests/columnGeoData.spec.ts
+++ b/tests/playwright/tests/columnGeoData.spec.ts
@@ -20,7 +20,7 @@ test.describe('Geo Data column', () => {
 
     await dashboard.treeView.openTable({ title: 'City' });
 
-    await dashboard.viewSidebar.activateGeoDataEasterEgg();
+    await dashboard.viewSidebar.changeBetaFeatureToggleValue();
 
     await grid.column.create({
       title: 'GeoData1',
diff --git a/tests/playwright/tests/columnQrCode.spec.ts b/tests/playwright/tests/columnQrCode.spec.ts
index fb91ba5982..dac1d4b3e8 100644
--- a/tests/playwright/tests/columnQrCode.spec.ts
+++ b/tests/playwright/tests/columnQrCode.spec.ts
@@ -43,17 +43,20 @@ test.describe('Virtual Columns', () => {
         {
           referencedValue: 'A Corua (La Corua)',
           base64EncodedSrc:
-            'data:image/png;base64,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',
+            'data:image/png;base64,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',
+          // 'data:image/png;base64,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',
         },
         {
           referencedValue: 'Abha',
           base64EncodedSrc:
-            'data:image/png;base64,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',
+            // 'data:image/png;base64,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',
+            'data:image/png;base64,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',
         },
         {
           referencedValue: 'Abu Dhabi',
           base64EncodedSrc:
-            'data:image/png;base64,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',
+            // 'data:image/png;base64,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',
+            'data:image/png;base64,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',
         },
       ];
 
@@ -84,7 +87,7 @@ test.describe('Virtual Columns', () => {
         {
           referencedValue: 'Hamburg',
           base64EncodedSrc:
-            'data:image/png;base64,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',
+            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAAAXNSR0IArs4c6QAACqVJREFUeF7tndFWHDkMROH/P5o97BN0G+51jTwhofLatiyXSiXZ3WRe397e3l76rwgMI/BaYg0jWnP/I1BilQhHECixjsBaoyVWOXAEgSWxXl9fjyxGRq/niKsfq3PGhK8nzi/Gr4n9kg3CfOr5zY9V825AmXLoox0CqcR6eaFk+zGxK7FeXqpYj8tEFWuBYYn1h4j1LOCTdU6UBirJ72EwY74r84+Hcm2B8Jhal9ZRzXsScNrAqhdI1sENBgcRQxozpsS6sICCRaQxz0ssg9L+mGfE7v+b9UvCRj1WoiQESYlFCGXPKeCZ1fssWicqhcmR1pSOhMC7vpy6srhCb/aCwVmUcbJLNldqY8hG8RtRrN1g2maXQFsBsOtLiXUvYyXWAoES6zMoVaxA5qtYfJlbYpVYfLIKMCqxBGi7ZS7pFSZUcNVDGl+S/VEfWmKVWDfFMmQssS4o0XHVnhwN+N+NocBMHceNn1Wsy99bTABiLkiTdSigJVavG7C5TfojQ6yrXUNwUuTk/mzC12TdFa67+/vRN++mEd0lwUSwJoA3JXfC1xJLfIpigCZ1MTZ2yWr6wyTAE74m604kThWLmrLFm/wJ4KtYCyURscAhp5r3JMtJoUzW07qkpAjYFwN2e590nV2MIsWacK7EmkCRv2QlwqdeUP9bYi2QJdBWZYwCWMUSXwemLP84r4o1geJfrlgzELCVpF8gdaHnRn2SJKC9TJ0kzTqM/OMjog/9Hl/WWSCQkia6xHLYPzqqxFr8d2BEvioW067EKrGYJcGIEqvECmjDUxSx2MxzRlCJMo03XeytmuiJ3ZnrhRM95YTvEzZ+9P+PVWLd/3tYg8kEMR61UWI98ZXVNVhVrEfpG8432WnG7F7Mhu5+mtZSuLgc2g3WKhBkwwBvAkyvUpIei3w3fk2sm6wzMcdgShgde1eICwf/C8wKNAPCrmKR70nwkruwZJ2JOQZTwqjEGvrAkAJaYg29hEZGV7G2//M2Iu/U82OKRQ6a/sg4R+s86/kzkiB5z2n2T7FI4pCo68gFKW3m1KWjAToZU2J9Rq3ESli0mFNilVhDVPoeSLq4TJxoKRSotRQKkC5DSixxKjTE2od+5jPbibJmFMuM+YhB0kQnGP6UOdE9VonFSXANcIlVxVL3S1Ws77WxirXAx5DGjGkp3CzMSSk0pYD6I+Mm2TB3NGYdGmMwInKahj8puYTRam+7c6LvsQxoz9rwdR0CoMTiX5UosYYuO42akkIRwVfzq1gXVKpYTDOD0a8jFpWTRCpPAc0hfvx1hVGbXT8MhmZdwnVKjXfXiU6FBhTKxgS0CZBMj0Ugvvs+4cuJ8pn0tiYpCBP1dUMVi39svcT6TMcSa+j/ly+xAmIlEm3k9OMYc0czETyjvmYM7Y9KhSn9tMb7c/I18cOUT1r3xpnVr9iXWPc/FKWgJwFNEocCnPhRYlF0F88pEEYFzLJJQEusoT98aCn8vi9JCJycvmmdiTZFvdJJsvEZztMaVo2MqtFaCUa/TrESoHfnTAWC1qXnK/Id6TkOqD6R/avnEypHSfG0C9KJA0Ei0SXWnV4l1gWTEivVqO97u6nq8XGVKpb4SZOE0BMKPUOjH6xYJzZogmV6HfLNZONEaUh8pTJt3msSgakXWuGXrHvzY3VBaoJBAaXnJVZ2i05EIbJSXL46zNC6JdYC2SrWZ1CqWCL9jPqWWH+IWAnwJJ0m4BN9i7FB5cNkMO2H8BA5MjYk2a/B8eFTIYH4vgABaWzsbuar/uCjHdPbmUQyY2jdMaZsGiqxLoARWUssx7ASq8RyTNkcVWKVWJuUccN/DLGMu6ZMGTufGsDLi1vTH1FfZnq7ib0k61DATak3GFN/OILz1AXpRDCuoEwATSCuAjGxlxJrgaIBhZTBZA6NKbH4t3QIQ5M4R3CuYt2hr2LtE/pWGZI/pjA1mILzLFVM1jFqbLL8u34xUZqpORSb1TqEY4kVROdPJVLgqppSYgXXDXQAUMiLdatYn0GqYgXMqmLdP/GhdkF9QUpGzP2Kkd/dOm44YpSF1jXrGIxITc3VCOGY7IVsmp5LKRY5ZzJ4AujExm7wTFKUWHcEKGGrWOKb9xKrxLohQJlVxeJPnMZKIZWTiQw2H88lflC/QGX+fU2yYYA2GE2sQzYSnI3vNOZpf2L/rMY0AfpEL0fATxE42S/NMb7TmBJrgVACvFHCEwQmX6tYogSZ4CVAnwg4ZXQVa+jU1FJ4pxolgenlyMaPUixSBtqMOWklNswcoxR0KDBJQCo3cRo1+52IFeFhMD12QbrrXAKamWNAIF9LLP5fozGxku+xTIAnMslkfUKkEut71Ch2q9lVrAUqRGADNKnc3/wazCSvIpYxRGOSYJESJo0o+bHqB4kkqxMdkY/2RnhOPjeY7Kr6bbz5gjTZFDk/QRJzZCc/Siz3psHg+JEn6oK0xLo3s0bVPuJWxUpYNNS3EPgTKmd6HUMaM6bEGiDTrlSulkxs7M6hXsiUVwNXso7ZC9ndJbw54a3ahei6wQD3aHNXYt17mxIrKH2GrAbYRwlNGV/FWjfzhNux64aEFI+SxJzoaA1bCkxifDoViR8MoLJl+kEsScIPstFS+KQvJAzJKMNXymiSk+wSWY3vI4ROXukY55IxBIrZMJ0sjV8mwMYOKRjtd3eNk+PJV1UKKStObWDX+aQUGt9LrDtKu7GJ/krHBCcZs+t8iZWgnM3ZjU2JdeiEaw4NFKyMAmdmka+qFJ5xbd+qKcm0YXPiIc+MH2Rjqj+cKNNkw7zhQBunXkIT0Oa5CWiJ9fjvVxsMaUwV6+3xQJikMEpJWb9aJ5lDZZlI8z6fxpRYJdYLkfNYKTQlKMlamrObFWTPnhpPAG0Ui/w3cUgwM3Yf9f+vPxXuBidpopMMfjQwq6RY7bXEIgYEdVyYRNk3qlZiua9MP8ajirX4g1xSAdPMVrEWtYF6DqMUNMaoANkwakMnIlNejB8T6xjczRjyN7GxO0cp1sSLXQN8ss72hsVnJIkfZn+kYmYvZkyJdUEgCegu0OZElPhRYn1GoIq1SO8S6w7KdgKb77EmgDYZnayzveGWQnVSpnhRrCLFMuVkt58wJy3aDPUWX90NmVMg7cesTWMSXMlm8tzc9REeJZa4Pzt1ciRVSEgxMafEClA01xxGOSbUs8S6vLg1wKNULnodKkkTwSyxOBv/ecViCPZHGGLtW+XfmjlVTpMkp/2VWITQ4nmJxaCVWIzRbUSJxaCVWIxRiRVg9OuINaE2SU9igKaDxal16ZC04tWUL99x9kffY5njOAXU2KCkLrEOfY9F1wAUmPfnxgaRpIrFp0/C8D0WVawLY0ssJkWJJS5ITRkzQH60M5WtJ15+m36J/Dd4kI2JO7eoxzKlj8ZMqI+RdQO0ITDtx5CC1kl83fVrhdlEm3Lb27/22UwSYAp4EjxDkl3VS/wwp8ISa4ESyboJcIn1+a/DJ6pJS2FAVqMchtC/XrEMkBNjjCRTqaNgJdlo5pxQzqkyRpgZxabY3J6bHmuCNMYGOW9OKyUW/yQcqWmSSCXWoWuOKtalT6ti8euKJIN3y49R9PSqYNeXZL9KsewmO64IfIXAsV//KuS/G4ES63fH/9juS6xj0P5uw/8B01VAL3nHV9UAAAAASUVORK5CYII=',
         },
         ...expectedQrCodeCellValues.slice(1),
       ];
@@ -112,7 +115,7 @@ test.describe('Virtual Columns', () => {
         {
           referencedValue: 'Hamburg',
           base64EncodedSrc:
-            'data:image/png;base64,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',
+            'data:image/png;base64,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',
         },
       ]);
 
diff --git a/tests/playwright/tests/filters.spec.ts b/tests/playwright/tests/filters.spec.ts
index 69f913d31c..2bc6b30f64 100644
--- a/tests/playwright/tests/filters.spec.ts
+++ b/tests/playwright/tests/filters.spec.ts
@@ -13,11 +13,13 @@ let records: Record<string, any>;
 
 const skipList = {
   Number: ['is null', 'is not null'],
+  Year: ['is null', 'is not null'],
   Decimal: ['is null', 'is not null'],
   Percent: ['is null', 'is not null'],
   Currency: ['is null', 'is not null'],
   Rating: ['is null', 'is not null', 'is blank', 'is not blank'],
   Duration: ['is null', 'is not null'],
+  Time: ['is null', 'is not null'],
   SingleLineText: [],
   MultiLineText: [],
   Email: [],
@@ -126,6 +128,13 @@ test.describe('Filter Tests: Numerical', () => {
       isLikeStringDerived = parseInt(isLikeString.split(':')[0]) * 3600 + parseInt(isLikeString.split(':')[1]) * 60;
     }
 
+    // convert r[Time] in format 2021-01-01 00:00:00+05.30 to 00:00:00
+    if (dataType === 'Time') {
+      records.list.forEach(r => {
+        if (r[dataType]?.length > 8) r[dataType] = r[dataType]?.split(' ')[1]?.split(/[+-]/)[0];
+      });
+    }
+
     const filterList = [
       {
         op: '=',
@@ -150,12 +159,12 @@ test.describe('Filter Tests: Numerical', () => {
       {
         op: 'is blank',
         value: '',
-        rowCount: records.list.filter(r => r[dataType] === null).length,
+        rowCount: records.list.filter(r => r[dataType] === null || r[dataType] === undefined).length,
       },
       {
         op: 'is not blank',
         value: '',
-        rowCount: records.list.filter(r => r[dataType] !== null).length,
+        rowCount: records.list.filter(r => r[dataType] !== null && r[dataType] !== undefined).length,
       },
       {
         op: '>',
@@ -255,6 +264,16 @@ test.describe('Filter Tests: Numerical', () => {
         title: 'Rating',
         uidt: UITypes.Rating,
       },
+      {
+        column_name: 'Year',
+        title: 'Year',
+        uidt: UITypes.Year,
+      },
+      {
+        column_name: 'Time',
+        title: 'Time',
+        uidt: UITypes.Time,
+      },
     ];
 
     try {
@@ -274,6 +293,8 @@ test.describe('Filter Tests: Numerical', () => {
           Percent: rowMixedValue(columns[4], i),
           Duration: rowMixedValue(columns[5], i),
           Rating: rowMixedValue(columns[6], i),
+          Year: rowMixedValue(columns[7], i),
+          Time: rowMixedValue(columns[8], i, context.dbType),
         };
         rowAttributes.push(row);
       }
@@ -308,6 +329,14 @@ test.describe('Filter Tests: Numerical', () => {
   test('Filter: Duration', async () => {
     await numBasedFilterTest('Duration', '00:01', '01:03');
   });
+
+  test('Filter: Year', async () => {
+    await numBasedFilterTest('Year', '2023', '2024');
+  });
+
+  test('Filter: Time', async () => {
+    await numBasedFilterTest('Time', '02:02:00', '04:04:00');
+  });
 });
 
 // Text based filters
diff --git a/tests/playwright/tests/findRowByScanner.spec.ts b/tests/playwright/tests/findRowByScanner.spec.ts
new file mode 100644
index 0000000000..3d1c6d73cc
--- /dev/null
+++ b/tests/playwright/tests/findRowByScanner.spec.ts
@@ -0,0 +1,31 @@
+import { expect, test } from '@playwright/test';
+import { DashboardPage } from '../pages/Dashboard';
+import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
+import { FormPage } from '../pages/Dashboard/Form';
+import setup from '../setup';
+
+// Skip for now as it is not working in CI atm
+test.describe.skip('Find row by scanner', () => {
+  let dashboard: DashboardPage;
+  let context: any;
+  let toolbar: ToolbarPage;
+  let form: FormPage;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    form = dashboard.form;
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test.describe('clicking on the toolbars scanner button', async () => {
+    test.beforeEach(async () => {
+      await dashboard.closeTab({ title: 'Team & Auth' });
+      await dashboard.treeView.openTable({ title: 'Country' });
+      await toolbar.clickFindRowByScanButton();
+    });
+    test('opens the scanner overlay', async () => {
+      expect(await dashboard.findRowByScanOverlay.isVisible()).toBeTruthy();
+    });
+  });
+});
diff --git a/tests/playwright/tests/mobileMode.spec.ts b/tests/playwright/tests/mobileMode.spec.ts
new file mode 100644
index 0000000000..899363c236
--- /dev/null
+++ b/tests/playwright/tests/mobileMode.spec.ts
@@ -0,0 +1,67 @@
+import { test } from '@playwright/test';
+import { DashboardPage } from '../pages/Dashboard';
+import { ToolbarPage } from '../pages/Dashboard/common/Toolbar';
+import { FormPage } from '../pages/Dashboard/Form';
+import setup from '../setup';
+
+test.describe('Mobile Mode', () => {
+  let dashboard: DashboardPage;
+  let context: any;
+  let toolbar: ToolbarPage;
+  let form: FormPage;
+
+  test.beforeEach(async ({ page }) => {
+    context = await setup({ page });
+    dashboard = new DashboardPage(page, context.project);
+    form = dashboard.form;
+    toolbar = dashboard.grid.toolbar;
+  });
+
+  test('activating and deactivating Mobile Mode results correct behavior', async () => {
+    await dashboard.viewSidebar.changeBetaFeatureToggleValue();
+
+    // in non-mobile mode, all menu items are visible
+    await dashboard.verifyTeamAndSettingsLinkIsVisible();
+
+    await dashboard.treeView.createTable({ title: 'test-table-for-mobile-mode' });
+
+    // and all toolbar items have icons AND text
+    await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
+
+    await dashboard.toggleMobileMode();
+
+    // in mobile-mode, some menu items are hidden
+    await dashboard.verifyTeamAndSettingsLinkIsNotVisible();
+
+    // and toolbar items have icons but no text
+    await toolbar.verifyFieldsButtonIsVisibleWithoutTextButIcon();
+
+    // operations (like creating views, toolbar operations, open treeview for opening tables) still work as expected
+    await dashboard.treeView.openTable({ title: 'Country' });
+
+    await dashboard.viewSidebar.createFormView({ title: 'CountryForm' });
+
+    await dashboard.viewSidebar.verifyView({ title: 'CountryForm', index: 1 });
+
+    // verify form-view fields order
+    await form.verifyFormViewFieldsOrder({
+      fields: ['Country', 'LastUpdate', 'City List'],
+    });
+
+    // reorder & verify
+    await form.reorderFields({
+      sourceField: 'LastUpdate',
+      destinationField: 'Country',
+    });
+    await form.verifyFormViewFieldsOrder({
+      fields: ['LastUpdate', 'Country', 'City List'],
+    });
+
+    await dashboard.treeView.openTable({ mobileMode: true, title: 'test-table-for-mobile-mode' });
+
+    // changing back to non-mobile mode leads to the original appearance
+    await dashboard.toggleMobileMode();
+    await dashboard.verifyTeamAndSettingsLinkIsVisible();
+    await toolbar.verifyFieldsButtonIsVisibleWithTextAndIcon();
+  });
+});
diff --git a/tests/playwright/tests/viewMap.spec.ts b/tests/playwright/tests/viewMap.spec.ts
index f1affdad76..48612c2668 100644
--- a/tests/playwright/tests/viewMap.spec.ts
+++ b/tests/playwright/tests/viewMap.spec.ts
@@ -19,7 +19,7 @@ test.describe('Map View', () => {
     dashboard = new DashboardPage(page, context.project);
     toolbar = dashboard.map.toolbar;
 
-    await dashboard.viewSidebar.activateGeoDataEasterEgg();
+    await dashboard.viewSidebar.changeBetaFeatureToggleValue();
 
     // close 'Team & Auth' tab
     await dashboard.closeTab({ title: 'Team & Auth' });