@it-enterprise/forcebpm-ui-kit 1.0.2-beta.24 → 1.0.2-beta.26

package/index.js

@@ -25,11 +25,18 @@ export { default as FUserRoles } from './src/FUserRoles.vue'
 export { default as FDatePicker } from './src/f-date-picker/FDatePicker.vue'
 export { default as FMenuDatePicker } from './src/f-date-picker/FMenuDatePicker.vue'
 export { default as FTextFieldDate } from './src/f-date-picker/FTextFieldDate.vue'
-// export { default as FUserGroupPicker } from './src/f-user-group-picker/FUserGroupPicker.vue'
+export { default as FUserGroupPicker } from './src/FUserGroupPicker.vue'
 
 // Utils
 export { hexToRGBA, createRadialGradient } from './src/utils/color.js'
 
+// Images
+export { default as image0Gif } from './src/assets/images/0.gif'
+export { default as image0 } from './src/assets/images/0.svg'
+export { default as image3 } from './src/assets/images/3.svg'
+export { default as image4 } from './src/assets/images/4.svg'
+export { default as image5 } from './src/assets/images/5.svg'
+
 // Icon components
 export { FIcon, forcebpmIcon } from './src/forcebpmIcon.js'
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "@it-enterprise/forcebpm-ui-kit",
-  "version": "1.0.2-beta.24",
+  "version": "1.0.2-beta.26",
   "description": "FBPM UI Kit",
   "author": "it-enterprise",
   "license": "MIT",

package/src/FAvatar.vue

@@ -92,6 +92,7 @@ const errorHandler = () => {
       close-delay="100"
       open-delay="500"
       location="bottom right"
+      z-index="2700"
       :disabled="disabled || !fullUser?.name"
       :close-on-content-click="false"
     >

package/src/FDialog.vue

@@ -90,6 +90,8 @@ watch(modelValue, val => {
   if (!val) {
     search.value = null
     emit('close')
+  } else {
+    emit('open')
   }
 })
 </script>

package/src/FSearchPanel.vue

@@ -121,6 +121,9 @@ const keydownEsc = () => {
     height: 30px;
     width: 30px;
     transition: all 0.2s ease-in-out;
+    .v-input__control {
+      background-color: transparent;
+    }
     &.v-input--focused {
       .v-field__prepend-inner {
         margin-left: 0px;

package/src/FUserGroupPicker.vue

@@ -0,0 +1,630 @@
+<script setup>
+// FUserGroupPicker
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useTheme } from 'vuetify'
+import { colorCollection, hexToRGBA } from './utils/color'
+
+const { t } = useI18n()
+const theme = useTheme()
+
+const props = defineProps({
+  items: {
+    type: Array,
+    required: true,
+    validator: (value, props) => {
+      const isValid = value.every(item => {
+        const hasIdentityId =
+          item[props.itemValue] !== undefined && (typeof item[props.itemValue] === 'string' || typeof item[props.itemValue] === 'number')
+        const hasName = typeof item.name === 'string'
+        const isUserOrGroup = item.type === 'USER' || item.type === 'GROUP' || item.groupId !== undefined
+        return hasIdentityId && hasName && isUserOrGroup
+      })
+      if (!isValid) {
+        console.warn('FUserGroupPicker: Each item should have identityId (string or number), name (string) and type "USER" or "GROUP" (or groupId)')
+      }
+      return isValid
+    }
+  },
+  itemValue: {
+    type: String,
+    default: 'identityId',
+    validator: (value, props) => {
+      const hasGroups = props.items?.some(item => item.type === 'GROUP' || item.groupId)
+      if (hasGroups && value === 'userId') {
+        console.warn('FUserGroupPicker: itemValue cannot be "userId" when items contain groups. Use "identityId" instead.')
+        return false
+      }
+      if (!['identityId', 'userId'].includes(value)) {
+        console.warn('FUserGroupPicker: itemValue should be one of identityId, userId')
+        return false
+      }
+      return true
+    }
+  },
+  // todo when there will be a connection in ForceBPMTasks
+  executorLists: {
+    type: Array,
+    default: () => []
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  returnObject: {
+    type: Boolean,
+    default: false
+  },
+  groupSelection: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const state = defineModel('state', {
+  type: Boolean,
+  default: false
+})
+
+const modelValue = defineModel('modelValue', {
+  type: [Array, Object, String, Number],
+  default: () => []
+})
+
+const search = ref('')
+const selectedMenuId = ref(null)
+const tab = ref('USERS_BY_GROUP')
+const calculatedHeight = Math.floor(window.innerHeight * 0.1) // 10vh rounded down
+
+// Tabs for header
+const tabs = computed(() => {
+  const baseTabs = [
+    { value: 'USERS_BY_GROUP', text: t('user.usersByGroup') },
+    { value: 'USERS_BY_POSITION', text: t('user.usersByPosition') }
+  ]
+  if (props.executorLists.length > 0) {
+    baseTabs.push({ value: 'EXECUTOR_LISTS', text: t('user.executorLists') })
+  }
+  return baseTabs
+})
+
+// Map for quick access by identityId - O(1)
+const itemsMap = computed(() => {
+  const map = new Map()
+  for (const item of props.items) {
+    map.set(item.identityId, item)
+  }
+  return map
+})
+
+// Map userId -> identityId for executor lists lookup
+const userIdMap = computed(() => {
+  const map = new Map()
+  for (const item of props.items) {
+    if (item.userId !== undefined) {
+      map.set(item.userId, item.identityId)
+    }
+  }
+  return map
+})
+
+// Unique groups from items (extracted from item.groups)
+const uniqueGroups = computed(() => {
+  const groupsMap = new Map()
+  for (const item of props.items) {
+    if (item.groups?.length) {
+      for (const group of item.groups) {
+        if (!groupsMap.has(group.identityId)) {
+          groupsMap.set(group.identityId, { ...group, id: group.identityId })
+        }
+      }
+    }
+  }
+  return Array.from(groupsMap.values())
+})
+
+// Unique positions from items
+const uniquePositions = computed(() => {
+  const positionsMap = new Map()
+  for (const item of props.items) {
+    if (item.positionCode && !positionsMap.has(item.positionCode)) {
+      positionsMap.set(item.positionCode, {
+        id: item.positionCode,
+        title: item.positionTitle
+      })
+    }
+  }
+  return Array.from(positionsMap.values())
+})
+
+// Index: groupId -> Set<itemValue> for quick filtering
+const groupIndex = computed(() => {
+  const index = new Map()
+  for (const item of props.items) {
+    if (item.groups?.length) {
+      for (const group of item.groups) {
+        if (!index.has(group.identityId)) {
+          index.set(group.identityId, new Set())
+        }
+        index.get(group.identityId).add(item.identityId)
+      }
+    }
+  }
+  return index
+})
+
+// Index: positionCode -> Set<itemValue>
+const positionIndex = computed(() => {
+  const index = new Map()
+  for (const item of props.items) {
+    if (item.positionCode) {
+      if (!index.has(item.positionCode)) {
+        index.set(item.positionCode, new Set())
+      }
+      index.get(item.positionCode).add(item.identityId)
+    }
+  }
+  return index
+})
+
+// Index: executorListId -> Set<identityId>
+const executorIndex = computed(() => {
+  const index = new Map()
+  for (const list of props.executorLists) {
+    const userIds = new Set()
+    for (const userId of list.usersIds || []) {
+      const identityId = userIdMap.value.get(userId)
+      if (identityId) {
+        userIds.add(identityId)
+      }
+    }
+    index.set(list.id, userIds)
+  }
+  return index
+})
+
+// Set selected items - O(1) for checking
+const selectedIds = ref(new Set())
+
+// Set selected groups (when groupSelection = true)
+const selectedGroupIds = ref(new Set())
+
+const menuItems = computed(() => {
+  const color = idx => {
+    return hexToRGBA(colorCollection[theme.global.name.value === 'light' ? 'light' : 'dark'][idx % colorCollection.light.length]).slice(5, -3) // rgba(255, 0, 0, 0.2) -> 255, 0, 0
+  }
+
+  switch (tab.value) {
+    case 'USERS_BY_GROUP':
+      return uniqueGroups.value.map((g, idx) => ({
+        id: g.identityId,
+        name: g.name,
+        color: color(idx)
+      }))
+    case 'USERS_BY_POSITION':
+      return uniquePositions.value.map((p, idx) => ({
+        id: p.id,
+        name: p.title,
+        color: color(idx)
+      }))
+    case 'EXECUTOR_LISTS':
+      return props.executorLists.map((list, idx) => ({
+        id: list.id,
+        name: list.name,
+        color: color(idx)
+      }))
+    default:
+      return []
+  }
+})
+
+const titleByMenu = computed(() => {
+  const currentMenu = menuItems.value.find(i => i.id === selectedMenuId.value)
+  return currentMenu?.name || currentMenu?.id || (props.groupSelection ? t('user.allUsersAndGroups') : t('user.allUsers'))
+})
+
+const filteredItems = computed(() => {
+  let resultIds = null
+
+  // Step 1: Get relevant item IDs based on selected menu
+  if (selectedMenuId.value) {
+    switch (tab.value) {
+      case 'USERS_BY_GROUP':
+        resultIds = groupIndex.value.get(selectedMenuId.value)
+        break
+      case 'USERS_BY_POSITION':
+        resultIds = positionIndex.value.get(selectedMenuId.value)
+        break
+      case 'EXECUTOR_LISTS':
+        resultIds = executorIndex.value.get(selectedMenuId.value)
+        break
+    }
+  }
+
+  // Step 2: Map IDs to items (if resultIds is null, we take all items)
+  let result
+  if (resultIds) {
+    result = Array.from(resultIds, id => itemsMap.value.get(id)).filter(Boolean)
+  } else {
+    result = props.items
+  }
+
+  // Step 3: Apply search filter
+  if (search.value) {
+    result = result.filter(item => item.name?.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  // Step 4: If groupSelection is enabled, mark items as disabled if they belong to a selected group
+  if (props.groupSelection && selectedGroupIds.value.size > 0) {
+    result = result.map(item => {
+      const isDisabledByGroup = item.groups?.some(g => selectedGroupIds.value.has(g.identityId))
+      return isDisabledByGroup ? { ...item, disabled: true } : item
+    })
+  }
+
+  return result
+})
+
+// Selected items (groups + users)
+const selectedItems = computed(() => {
+  // Users — filter out those covered by a selected group
+  const users = Array.from(selectedIds.value, id => itemsMap.value.get(id))
+    .filter(Boolean)
+    .filter(user => {
+      if (props.groupSelection && selectedGroupIds.value.size > 0 && user.groups?.length) {
+        return !user.groups.some(g => selectedGroupIds.value.has(g.identityId))
+      }
+      return true
+    })
+
+  // Groups — with selectAll flag for removeSelected logic
+  const groups = Array.from(selectedGroupIds.value, groupId => {
+    const group = uniqueGroups.value.find(g => g.identityId === groupId)
+    if (group) {
+      return {
+        ...group,
+        type: 'GROUP',
+        selectAll: true
+      }
+    }
+    return null
+  }).filter(Boolean)
+
+  const result = [...groups, ...users]
+
+  if (search.value) {
+    return result.filter(item => item.name?.toLowerCase().includes(search.value.toLowerCase()))
+  }
+
+  return result
+})
+
+const isSelected = item => {
+  // Check if user is individually selected
+  if (selectedIds.value.has(item.identityId)) return true
+
+  // Check if user is selected via group
+  if (props.groupSelection && item.groups?.some(g => selectedGroupIds.value.has(g.identityId))) {
+    return true
+  }
+
+  return false
+}
+
+const toggleSelect = item => {
+  if (item.disabled) return
+
+  const id = item.identityId
+
+  if (props.multiple) {
+    if (selectedIds.value.has(id)) {
+      selectedIds.value.delete(id)
+    } else {
+      selectedIds.value.add(id)
+    }
+    // Trigger reactivity
+    selectedIds.value = new Set(selectedIds.value)
+  } else {
+    // Single selection - immediately close picker
+    selectedIds.value = new Set([id])
+    selectHandler()
+  }
+}
+
+const removeSelected = item => {
+  if (item.disabled) return
+
+  if (item.selectAll) {
+    selectedGroupIds.value.delete(item.identityId)
+    selectedGroupIds.value = new Set(selectedGroupIds.value)
+  } else {
+    selectedIds.value.delete(item.identityId)
+    selectedIds.value = new Set(selectedIds.value)
+  }
+}
+
+const toggleAllInMenu = () => {
+  if (!selectedMenuId.value) return
+
+  if (props.groupSelection && tab.value === 'USERS_BY_GROUP') {
+    if (selectedGroupIds.value.has(selectedMenuId.value)) {
+      // Deselect group
+      selectedGroupIds.value.delete(selectedMenuId.value)
+      selectedGroupIds.value = new Set(selectedGroupIds.value)
+    } else {
+      // Select group
+      selectedGroupIds.value.add(selectedMenuId.value)
+      selectedGroupIds.value = new Set(selectedGroupIds.value)
+
+      // Remove individually selected users from this group
+      const groupUserIds = groupIndex.value.get(selectedMenuId.value)
+      if (groupUserIds) {
+        for (const userId of groupUserIds) {
+          selectedIds.value.delete(userId)
+        }
+        selectedIds.value = new Set(selectedIds.value)
+      }
+    }
+  } else {
+    let ids
+    switch (tab.value) {
+      case 'USERS_BY_GROUP':
+        ids = groupIndex.value.get(selectedMenuId.value)
+        break
+      case 'USERS_BY_POSITION':
+        ids = positionIndex.value.get(selectedMenuId.value)
+        break
+      case 'EXECUTOR_LISTS':
+        ids = executorIndex.value.get(selectedMenuId.value)
+        break
+    }
+
+    if (!ids) return
+
+    if (isAllSelectedInMenu.value) {
+      // Deselect all
+      for (const id of ids) {
+        selectedIds.value.delete(id)
+      }
+    } else {
+      // Select all (skip disabled)
+      for (const id of ids) {
+        const item = itemsMap.value.get(id)
+        if (item && !item.disabled) {
+          selectedIds.value.add(id)
+        }
+      }
+    }
+    selectedIds.value = new Set(selectedIds.value)
+  }
+}
+
+// Check if all items in current menu are selected (taking into account groupSelection logic)
+const isAllSelectedInMenu = computed(() => {
+  if (!selectedMenuId.value) return false
+
+  if (props.groupSelection && tab.value === 'USERS_BY_GROUP') {
+    return selectedGroupIds.value.has(selectedMenuId.value)
+  }
+
+  let ids
+  switch (tab.value) {
+    case 'USERS_BY_GROUP':
+      ids = groupIndex.value.get(selectedMenuId.value)
+      break
+    case 'USERS_BY_POSITION':
+      ids = positionIndex.value.get(selectedMenuId.value)
+      break
+    case 'EXECUTOR_LISTS':
+      ids = executorIndex.value.get(selectedMenuId.value)
+      break
+  }
+
+  if (!ids || ids.size === 0) return false
+
+  for (const id of ids) {
+    if (!selectedIds.value.has(id)) return false
+  }
+  return true
+})
+
+const selectMenuItem = id => {
+  selectedMenuId.value = selectedMenuId.value === id ? null : id
+}
+
+const open = () => {
+  state.value = true
+}
+
+const close = () => {
+  state.value = false
+  search.value = ''
+  selectedMenuId.value = null
+}
+
+const selectHandler = () => {
+  if (props.returnObject) {
+    modelValue.value = selectedItems.value
+  } else {
+    modelValue.value = selectedItems.value.map(item => item[props.itemValue])
+  }
+
+  state.value = false
+}
+
+// Reset menu selection when switching tabs
+watch(tab, () => {
+  selectedMenuId.value = null
+})
+
+// Sync with external modelValue changes
+watch(state, newState => {
+  if (newState && modelValue.value) {
+    // Reset
+    selectedIds.value = new Set()
+    selectedGroupIds.value = new Set()
+
+    // Populate from modelValue
+    const values = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value]
+    for (const val of values) {
+      if (props.returnObject) {
+        if (val.type === 'GROUP' || val.groupId) {
+          selectedGroupIds.value.add(val.identityId)
+        } else {
+          selectedIds.value.add(val.identityId)
+        }
+      } else {
+        // Find item by itemValue field
+        let found = false
+        for (const item of props.items) {
+          if (item[props.itemValue] === val) {
+            if (item.type === 'GROUP' || item.groupId) {
+              selectedGroupIds.value.add(item.identityId)
+            } else {
+              selectedIds.value.add(item.identityId)
+            }
+            found = true
+            break
+          }
+        }
+        // If not found in items, try uniqueGroups
+        if (!found && uniqueGroups.value.some(g => g[props.itemValue] === val)) {
+          const group = uniqueGroups.value.find(g => g[props.itemValue] === val)
+          selectedGroupIds.value.add(group.identityId)
+        }
+      }
+    }
+  }
+})
+</script>
+<template>
+  <FDialog
+    v-model:search="search"
+    :model-value="state"
+    name="userGroupPicker"
+    width="80vw"
+    max-width="900px"
+    persistent
+    no-space
+    is-search
+    :title="$t('user.executors')"
+    @open="open"
+    @close="close"
+  >
+    <div class="user-group-picker">
+      <!-- Header tabs -->
+      <v-tabs v-model="tab" grow class="mb-2">
+        <v-tab v-for="tabItem in tabs" :key="tabItem.value" :value="tabItem.value" height="35px" :text="tabItem.text" />
+      </v-tabs>
+
+      <!-- Filter menu -->
+      <v-tabs-window v-model="tab" class="mx-5">
+        <v-tabs-window-item
+          v-for="tabItem in tabs"
+          :key="tabItem.value"
+          :value="tabItem.value"
+          :style="{ height: `${calculatedHeight}px` }"
+          class="f-scrollbar-y"
+        >
+          <v-chip-group selected-class="active" class="pa-0" column>
+            <v-chip
+              v-for="item in menuItems"
+              :key="item.id"
+              :style="`--f-user-group-chip-color: ${item.color}`"
+              variant="flat"
+              class="user-group-picker-chip"
+              @click="selectMenuItem(item.id)"
+            >
+              {{ item.name || item.id }}
+            </v-chip>
+          </v-chip-group>
+        </v-tabs-window-item>
+      </v-tabs-window>
+
+      <div class="d-flex flex-column mx-5 mt-5">
+        <!-- Title -->
+        <span class="mb-2 ml-1 font-weight-semibold fs-11">{{ titleByMenu }}</span>
+
+        <!-- Select all users -->
+        <v-checkbox
+          v-if="selectedMenuId && multiple && (filteredItems.length || selectedItems.length)"
+          class="mb-2 ml-1"
+          :model-value="isAllSelectedInMenu"
+          :label="props.groupSelection && tab === 'USERS_BY_GROUP' ? $t('user.selectGroup') : $t('user.selectAllFromList')"
+          @update:model-value="toggleAllInMenu"
+        />
+      </div>
+
+      <div v-if="filteredItems.length || selectedItems.length" class="d-flex justify-space-between mx-5">
+        <!-- Available items -->
+        <v-virtual-scroll :items="filteredItems" height="40vh" item-key="identityId" item-height="40" max-width="45%" class="pr-2">
+          <template #default="{ item }">
+            <div class="d-flex align-center justify-start picker-list-item" :class="{ 'is-disabled': item.disabled }" @click="toggleSelect(item)">
+              <v-checkbox :model-value="isSelected(item)" :disabled="item.disabled" />
+              <FAvatar :full-user="item.type === 'USER' ? item : null" :group="item.type === 'GROUP' ? item : null" size="20" class="ml-1 mr-2" />
+              <span class="picker-item-name">{{ item.name }}</span>
+            </div>
+          </template>
+        </v-virtual-scroll>
+
+        <!-- Selected items -->
+        <v-virtual-scroll :items="selectedItems" height="40vh" item-key="identityId" item-height="40" max-width="45%" class="pr-2">
+          <template #default="{ item }">
+            <div class="d-flex align-center justify-start picker-list-item" :class="{ 'is-disabled': item.disabled }" @click="removeSelected(item)">
+              <v-checkbox :model-value="true" :disabled="item.disabled" />
+              <FAvatar :full-user="item.type === 'USER' ? item : null" :group="item.type === 'GROUP' ? item : null" size="20" class="ml-1 mr-2" />
+              <span class="picker-item-name">{{ item.name }}</span>
+            </div>
+          </template>
+        </v-virtual-scroll>
+      </div>
+
+      <FNoData v-else height="40vh" class="mt-5" :is-search="search" />
+    </div>
+
+    <template #actions>
+      <v-btn class="mx-auto" width="300" @click="selectHandler">
+        {{ $t('buttons.select') }}
+      </v-btn>
+    </template>
+  </FDialog>
+</template>
+
+<style lang="scss" scoped>
+.user-group-picker {
+  :deep(.v-virtual-scroll__item) {
+    padding: 0;
+    &:nth-child(odd) {
+      background-color: rgb(var(--v-theme-fields));
+    }
+    .picker-list-item {
+      padding: 5px;
+      transition: all 0.3s ease-in-out;
+      &:not(.is-disabled) {
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(var(--v-theme-primary), 0.2);
+        }
+      }
+    }
+  }
+  .user-group-picker-chip {
+    --v-chip-height: 20px;
+    margin: 3px;
+    border-radius: 4.8px;
+    color: rgb(var(--f-user-group-chip-color));
+    background: rgba(var(--f-user-group-chip-color), 0.2);
+    border: 1px solid transparent;
+    &.active {
+      border-color: rgb(var(--f-user-group-chip-color));
+    }
+    &.v-theme--dark {
+      color: rgb(var(--v-theme-title));
+      background: rgba(var(--f-user-group-chip-color), 0.7);
+      &.active {
+        border-color: rgb(var(--v-theme-title));
+      }
+    }
+  }
+}
+</style>

package/src/assets/images/0.svg

@@ -0,0 +1,4 @@
+<svg width="106" height="157" viewBox="0 0 106 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M46.36 129.6H60.52C65.64 129.6 69.24 128.56 71.32 126.48C73.4 124.24 74.44 120.56 74.44 115.44V42.24C74.44 37.12 73.4 33.52 71.32 31.44C69.24 29.2 65.64 28.08 60.52 28.08H46.36C41.24 28.08 37.64 29.2 35.56 31.44C33.48 33.52 32.44 37.12 32.44 42.24V115.44C32.44 120.56 33.48 124.24 35.56 126.48C37.64 128.56 41.24 129.6 46.36 129.6ZM65.32 156H41.32C28.68 156 18.92 152.64 12.04 145.92C5.16 139.2 1.72 129.52 1.72 116.88V40.8C1.72 28.16 5.16 18.48 12.04 11.76C18.92 5.04 28.68 1.68 41.32 1.68H65.32C77.8 1.68 87.48 5.12 94.36 12C101.24 18.72 104.68 28.32 104.68 40.8V116.88C104.68 129.36 101.24 139.04 94.36 145.92C87.48 152.64 77.8 156 65.32 156Z" fill="white"/>
+<path d="M71.32 126.48L72.0271 127.187L72.0402 127.174L72.0528 127.16L71.32 126.48ZM71.32 31.44L70.5872 32.1204L70.5998 32.134L70.6129 32.1471L71.32 31.44ZM35.56 31.44L36.2671 32.1471L36.2802 32.134L36.2928 32.1204L35.56 31.44ZM35.56 126.48L34.8272 127.16L34.8398 127.174L34.8529 127.187L35.56 126.48ZM12.04 145.92L11.3413 146.635L12.04 145.92ZM12.04 11.76L11.3413 11.0446L12.04 11.76ZM94.36 12L93.6528 12.7071L93.6613 12.7154L94.36 12ZM94.36 145.92L95.0588 146.635L95.0671 146.627L94.36 145.92ZM46.36 130.6H60.52V128.6H46.36V130.6ZM60.52 130.6C65.7231 130.6 69.6613 129.553 72.0271 127.187L70.6129 125.773C68.8187 127.567 65.5569 128.6 60.52 128.6V130.6ZM72.0528 127.16C74.3886 124.645 75.44 120.653 75.44 115.44H73.44C73.44 120.467 72.4114 123.835 70.5872 125.8L72.0528 127.16ZM75.44 115.44V42.24H73.44V115.44H75.44ZM75.44 42.24C75.44 37.0369 74.3929 33.0986 72.0271 30.7329L70.6129 32.1471C72.4071 33.9413 73.44 37.203 73.44 42.24H75.44ZM72.0528 30.7595C69.6889 28.2139 65.739 27.08 60.52 27.08V29.08C65.541 29.08 68.7911 30.1861 70.5872 32.1204L72.0528 30.7595ZM60.52 27.08H46.36V29.08H60.52V27.08ZM46.36 27.08C41.141 27.08 37.1911 28.2139 34.8272 30.7595L36.2928 32.1204C38.0889 30.1861 41.339 29.08 46.36 29.08V27.08ZM34.8529 30.7329C32.4871 33.0986 31.44 37.0369 31.44 42.24H33.44C33.44 37.203 34.4729 33.9413 36.2671 32.1471L34.8529 30.7329ZM31.44 42.24V115.44H33.44V42.24H31.44ZM31.44 115.44C31.44 120.653 32.4914 124.645 34.8272 127.16L36.2928 125.8C34.4686 123.835 33.44 120.467 33.44 115.44H31.44ZM34.8529 127.187C37.2187 129.553 41.1569 130.6 46.36 130.6V128.6C41.3231 128.6 38.0613 127.567 36.2671 125.773L34.8529 127.187ZM65.32 155H41.32V157H65.32V155ZM41.32 155C28.8562 155 19.3789 151.69 12.7387 145.205L11.3413 146.635C18.4611 153.59 28.5038 157 41.32 157V155ZM12.7387 145.205C6.10647 138.727 2.72 129.339 2.72 116.88H0.720001C0.720001 129.701 4.21353 139.673 11.3413 146.635L12.7387 145.205ZM2.72 116.88V40.8H0.720001V116.88H2.72ZM2.72 40.8C2.72 28.3411 6.10647 18.9534 12.7387 12.4754L11.3413 11.0446C4.21353 18.0066 0.720001 27.9789 0.720001 40.8H2.72ZM12.7387 12.4754C19.3789 5.98964 28.8562 2.68 41.32 2.68V0.679998C28.5038 0.679998 18.4611 4.09036 11.3413 11.0446L12.7387 12.4754ZM41.32 2.68H65.32V0.679998H41.32V2.68ZM65.32 2.68C77.6133 2.68 87.0095 6.06368 93.6529 12.7071L95.0671 11.2929C87.9505 4.17632 77.9867 0.679998 65.32 0.679998V2.68ZM93.6613 12.7154C100.296 19.1957 103.68 28.5054 103.68 40.8H105.68C105.68 28.1346 102.184 18.2443 95.0587 11.2846L93.6613 12.7154ZM103.68 40.8V116.88H105.68V40.8H103.68ZM103.68 116.88C103.68 129.173 100.296 138.569 93.6529 145.213L95.0671 146.627C102.184 139.511 105.68 129.547 105.68 116.88H103.68ZM93.6613 145.205C87.0188 151.693 77.6196 155 65.32 155V157C77.9804 157 87.9412 153.587 95.0587 146.635L93.6613 145.205Z" fill="#97A7C8"/>
+</svg>

package/src/assets/images/3.svg

@@ -0,0 +1,4 @@
+<svg width="104" height="157" viewBox="0 0 104 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.56 66.24H57.8C63.08 66.24 66.84 65.2 69.08 63.12C71.48 60.88 72.68 57.28 72.68 52.32V41.04C72.68 36.08 71.48 32.56 69.08 30.48C66.84 28.24 63.08 27.12 57.8 27.12H46.28C41.16 27.12 37.56 28.24 35.48 30.48C33.4 32.56 32.36 36.08 32.36 41.04V47.04C32.36 50.4 30.68 52.08 27.32 52.08H6.92C3.56 52.08 1.88 50.4 1.88 47.04V40.56C1.88 28.08 5.32 18.48 12.2 11.76C19.08 5.04 28.84 1.68 41.48 1.68H62.84C75.48 1.68 85.24 5.04 92.12 11.76C99 18.48 102.44 28.08 102.44 40.56V52.56C102.44 66 96.12 74.72 83.48 78.72C96.12 81.44 102.44 90.16 102.44 104.88V117.12C102.44 129.6 99 139.2 92.12 145.92C85.24 152.64 75.48 156 62.84 156H41.48C28.84 156 19.08 152.64 12.2 145.92C5.32 139.2 1.88 129.6 1.88 117.12V110.4C1.88 106.88 3.56 105.12 6.92 105.12H27.32C30.68 105.12 32.36 106.88 32.36 110.4V116.64C32.36 121.76 33.4 125.36 35.48 127.44C37.56 129.52 41.16 130.56 46.28 130.56H57.8C63.08 130.56 66.84 129.52 69.08 127.44C71.48 125.2 72.68 121.6 72.68 116.64V104.88C72.68 99.92 71.48 96.4 69.08 94.32C66.84 92.08 63.08 90.96 57.8 90.96H45.56C42.2 90.96 40.52 89.28 40.52 85.92V71.52C40.52 68 42.2 66.24 45.56 66.24Z" fill="white"/>
+<path d="M69.08 63.12L69.7605 63.8528L69.7623 63.8511L69.08 63.12ZM69.08 30.48L68.3729 31.1871L68.3981 31.2123L68.4251 31.2357L69.08 30.48ZM35.48 30.48L36.1871 31.1871L36.2002 31.174L36.2128 31.1604L35.48 30.48ZM12.2 11.76L12.8987 12.4754L12.2 11.76ZM83.48 78.72L83.1783 77.7666L79.5831 78.9043L83.2696 79.6976L83.48 78.72ZM12.2 145.92L12.8987 145.205L12.2 145.92ZM35.48 127.44L34.7729 128.147L35.48 127.44ZM69.08 127.44L69.7605 128.173L69.7623 128.171L69.08 127.44ZM69.08 94.32L68.3729 95.0271L68.3981 95.0523L68.4251 95.0757L69.08 94.32ZM45.56 67.24H57.8V65.24H45.56V67.24ZM57.8 67.24C63.1634 67.24 67.2407 66.1926 69.7605 63.8528L68.3996 62.3872C66.4393 64.2074 62.9966 65.24 57.8 65.24V67.24ZM69.7623 63.8511C72.4491 61.3434 73.68 57.4161 73.68 52.32H71.68C71.68 57.1438 70.511 60.4166 68.3977 62.3889L69.7623 63.8511ZM73.68 52.32V41.04H71.68V52.32H73.68ZM73.68 41.04C73.68 35.952 72.4524 32.0794 69.7349 29.7243L68.4251 31.2357C70.5076 33.0406 71.68 36.208 71.68 41.04H73.68ZM69.7871 29.7729C67.2676 27.2533 63.178 26.12 57.8 26.12V28.12C62.982 28.12 66.4124 29.2267 68.3729 31.1871L69.7871 29.7729ZM57.8 26.12H46.28V28.12H57.8V26.12ZM46.28 26.12C41.061 26.12 37.1111 27.2539 34.7472 29.7995L36.2128 31.1604C38.0089 29.2261 41.259 28.12 46.28 28.12V26.12ZM34.7729 29.7729C32.4117 32.1341 31.36 35.986 31.36 41.04H33.36C33.36 36.174 34.3883 32.9859 36.1871 31.1871L34.7729 29.7729ZM31.36 41.04V47.04H33.36V41.04H31.36ZM31.36 47.04C31.36 48.5658 30.9792 49.5266 30.3929 50.1129C29.8066 50.6992 28.8459 51.08 27.32 51.08V53.08C29.1541 53.08 30.7134 52.6208 31.8071 51.5271C32.9008 50.4334 33.36 48.8741 33.36 47.04H31.36ZM27.32 51.08H6.92V53.08H27.32V51.08ZM6.92 51.08C5.39415 51.08 4.43343 50.6992 3.84711 50.1129C3.26079 49.5266 2.88 48.5658 2.88 47.04H0.88C0.88 48.8741 1.33921 50.4334 2.43289 51.5271C3.52657 52.6208 5.08586 53.08 6.92 53.08V51.08ZM2.88 47.04V40.56H0.88V47.04H2.88ZM2.88 40.56C2.88 28.2654 6.26412 18.9557 12.8987 12.4754L11.5013 11.0446C4.37588 18.0043 0.88 27.8946 0.88 40.56H2.88ZM12.8987 12.4754C19.5389 5.98964 29.0162 2.68 41.48 2.68V0.679998C28.6638 0.679998 18.6211 4.09036 11.5013 11.0446L12.8987 12.4754ZM41.48 2.68H62.84V0.679998H41.48V2.68ZM62.84 2.68C75.3038 2.68 84.7811 5.98964 91.4213 12.4754L92.8187 11.0446C85.6989 4.09036 75.6562 0.679998 62.84 0.679998V2.68ZM91.4213 12.4754C98.0559 18.9557 101.44 28.2654 101.44 40.56H103.44C103.44 27.8946 99.9441 18.0043 92.8187 11.0446L91.4213 12.4754ZM101.44 40.56V52.56H103.44V40.56H101.44ZM101.44 52.56C101.44 59.1221 99.8988 64.4422 96.8903 68.5931C93.8827 72.7429 89.3421 75.816 83.1783 77.7666L83.7817 79.6734C90.2579 77.624 95.1973 74.3371 98.5097 69.7668C101.821 65.1978 103.44 59.4379 103.44 52.56H101.44ZM83.2696 79.6976C89.3994 81.0167 93.903 83.7651 96.8903 87.8868C99.8885 92.0236 101.44 97.655 101.44 104.88H103.44C103.44 97.385 101.831 91.2964 98.5097 86.7132C95.1771 82.1149 90.2006 79.1433 83.6904 77.7424L83.2696 79.6976ZM101.44 104.88V117.12H103.44V104.88H101.44ZM101.44 117.12C101.44 129.415 98.0559 138.724 91.4213 145.205L92.8187 146.635C99.9441 139.676 103.44 129.785 103.44 117.12H101.44ZM91.4213 145.205C84.7811 151.69 75.3038 155 62.84 155V157C75.6562 157 85.6989 153.59 92.8187 146.635L91.4213 145.205ZM62.84 155H41.48V157H62.84V155ZM41.48 155C29.0162 155 19.5389 151.69 12.8987 145.205L11.5013 146.635C18.6211 153.59 28.6638 157 41.48 157V155ZM12.8987 145.205C6.26412 138.724 2.88 129.415 2.88 117.12H0.88C0.88 129.785 4.37588 139.676 11.5013 146.635L12.8987 145.205ZM2.88 117.12V110.4H0.88V117.12H2.88ZM2.88 110.4C2.88 108.783 3.26668 107.756 3.86336 107.13C4.45173 106.514 5.40631 106.12 6.92 106.12V104.12C5.07369 104.12 3.50827 104.606 2.41665 105.75C1.33332 106.884 0.88 108.497 0.88 110.4H2.88ZM6.92 106.12H27.32V104.12H6.92V106.12ZM27.32 106.12C28.8337 106.12 29.7883 106.514 30.3766 107.13C30.9733 107.756 31.36 108.783 31.36 110.4H33.36C33.36 108.497 32.9067 106.884 31.8234 105.75C30.7317 104.606 29.1663 104.12 27.32 104.12V106.12ZM31.36 110.4V116.64H33.36V110.4H31.36ZM31.36 116.64C31.36 121.843 32.4071 125.781 34.7729 128.147L36.1871 126.733C34.3929 124.939 33.36 121.677 33.36 116.64H31.36ZM34.7729 128.147C37.1387 130.513 41.0769 131.56 46.28 131.56V129.56C41.2431 129.56 37.9813 128.527 36.1871 126.733L34.7729 128.147ZM46.28 131.56H57.8V129.56H46.28V131.56ZM57.8 131.56C63.1634 131.56 67.2407 130.513 69.7605 128.173L68.3996 126.707C66.4393 128.527 62.9966 129.56 57.8 129.56V131.56ZM69.7623 128.171C72.4491 125.663 73.68 121.736 73.68 116.64H71.68C71.68 121.464 70.511 124.737 68.3977 126.709L69.7623 128.171ZM73.68 116.64V104.88H71.68V116.64H73.68ZM73.68 104.88C73.68 99.792 72.4524 95.9194 69.7349 93.5643L68.4251 95.0757C70.5076 96.8806 71.68 100.048 71.68 104.88H73.68ZM69.7871 93.6129C67.2676 91.0933 63.178 89.96 57.8 89.96V91.96C62.982 91.96 66.4124 93.0667 68.3729 95.0271L69.7871 93.6129ZM57.8 89.96H45.56V91.96H57.8V89.96ZM45.56 89.96C44.0341 89.96 43.0734 89.5792 42.4871 88.9929C41.9008 88.4066 41.52 87.4458 41.52 85.92H39.52C39.52 87.7541 39.9792 89.3134 41.0729 90.4071C42.1666 91.5008 43.7259 91.96 45.56 91.96V89.96ZM41.52 85.92V71.52H39.52V85.92H41.52ZM41.52 71.52C41.52 69.9028 41.9067 68.8756 42.5034 68.2505C43.0917 67.6341 44.0463 67.24 45.56 67.24V65.24C43.7137 65.24 42.1483 65.7259 41.0566 66.8695C39.9733 68.0044 39.52 69.6172 39.52 71.52H41.52Z" fill="#97A7C8"/>
+</svg>

package/src/assets/images/4.svg

@@ -0,0 +1,4 @@
+<svg width="122" height="157" viewBox="0 0 122 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M70.32 101.52V27.36L31.44 101.52H70.32ZM94.08 156H75.36C72 156 70.32 154.32 70.32 150.96V127.92H10.8C8.08 127.92 5.92 127.12 4.32 125.52C2.72 123.92 1.92 121.76 1.92 119.04V109.68C1.92 104.88 2.72 100.96 4.32 97.92L52.08 9.11999C53.68 6.23999 55.12 4.31999 56.4 3.35999C57.84 2.24 59.92 1.68 62.64 1.68H89.76C92.48 1.68 94.64 2.48 96.24 4.08C98 5.67999 98.88 7.84 98.88 10.56V101.52H116.16C119.36 101.52 120.96 103.12 120.96 106.32V122.4C120.96 126.08 119.36 127.92 116.16 127.92H98.88V150.96C98.88 152.88 98.48 154.24 97.68 155.04C97.04 155.68 95.84 156 94.08 156Z" fill="white"/>
+<path d="M70.32 101.52V102.52H71.32V101.52H70.32ZM70.32 27.36H71.32L69.4343 26.8957L70.32 27.36ZM31.44 101.52L30.5543 101.056L29.7866 102.52H31.44V101.52ZM70.32 127.92H71.32V126.92H70.32V127.92ZM4.32 125.52L3.61289 126.227H3.61289L4.32 125.52ZM4.32 97.92L3.43926 97.4463L3.43508 97.4543L4.32 97.92ZM52.08 9.11999L51.2058 8.6343L51.1993 8.64631L52.08 9.11999ZM56.4 3.35999L57 4.15999L57.007 4.15473L57.0139 4.14935L56.4 3.35999ZM96.24 4.08L95.5329 4.7871L95.5497 4.80393L95.5673 4.81994L96.24 4.08ZM98.88 101.52H97.88V102.52H98.88V101.52ZM98.88 127.92V126.92H97.88V127.92H98.88ZM97.68 155.04L96.9729 154.333L97.68 155.04ZM71.32 101.52V27.36H69.32V101.52H71.32ZM69.4343 26.8957L30.5543 101.056L32.3257 101.984L71.2057 27.8243L69.4343 26.8957ZM31.44 102.52H70.32V100.52H31.44V102.52ZM94.08 155H75.36V157H94.08V155ZM75.36 155C73.8342 155 72.8734 154.619 72.2871 154.033C71.7008 153.447 71.32 152.486 71.32 150.96H69.32C69.32 152.794 69.7792 154.353 70.8729 155.447C71.9666 156.541 73.5259 157 75.36 157V155ZM71.32 150.96V127.92H69.32V150.96H71.32ZM70.32 126.92H10.8V128.92H70.32V126.92ZM10.8 126.92C8.28788 126.92 6.40259 126.188 5.02711 124.813L3.61289 126.227C5.43742 128.052 7.87212 128.92 10.8 128.92V126.92ZM5.02711 124.813C3.65163 123.437 2.92 121.552 2.92 119.04H0.92C0.92 121.968 1.78837 124.403 3.61289 126.227L5.02711 124.813ZM2.92 119.04V109.68H0.92V119.04H2.92ZM2.92 109.68C2.92 104.981 3.7045 101.237 5.20492 98.3857L3.43508 97.4543C1.7355 100.683 0.92 104.779 0.92 109.68H2.92ZM5.2007 98.3937L52.9607 9.59366L51.1993 8.64631L3.4393 97.4463L5.2007 98.3937ZM52.9542 9.60563C54.5431 6.74561 55.8989 4.98582 57 4.15999L55.8 2.55999C54.3411 3.65415 52.8169 5.73437 51.2058 8.63435L52.9542 9.60563ZM57.0139 4.14935C58.2107 3.21852 60.0379 2.68 62.64 2.68V0.679998C59.8021 0.679998 57.4693 1.26147 55.7861 2.57064L57.0139 4.14935ZM62.64 2.68H89.76V0.679998H62.64V2.68ZM89.76 2.68C92.2721 2.68 94.1574 3.41162 95.5329 4.7871L96.9471 3.37289C95.1226 1.54837 92.6879 0.679998 89.76 0.679998V2.68ZM95.5673 4.81994C97.088 6.20234 97.88 8.07712 97.88 10.56H99.88C99.88 7.60287 98.912 5.15765 96.9127 3.34006L95.5673 4.81994ZM97.88 10.56V101.52H99.88V10.56H97.88ZM98.88 102.52H116.16V100.52H98.88V102.52ZM116.16 102.52C117.606 102.52 118.507 102.881 119.053 103.427C119.599 103.973 119.96 104.874 119.96 106.32H121.96C121.96 104.566 121.521 103.067 120.467 102.013C119.413 100.959 117.914 100.52 116.16 100.52V102.52ZM119.96 106.32V122.4H121.96V106.32H119.96ZM119.96 122.4C119.96 124.117 119.584 125.219 119.005 125.884C118.45 126.522 117.567 126.92 116.16 126.92V128.92C117.953 128.92 119.47 128.398 120.515 127.196C121.536 126.021 121.96 124.363 121.96 122.4H119.96ZM116.16 126.92H98.88V128.92H116.16V126.92ZM97.88 127.92V150.96H99.88V127.92H97.88ZM97.88 150.96C97.88 152.788 97.4907 153.815 96.9729 154.333L98.3871 155.747C99.4693 154.665 99.88 152.972 99.88 150.96H97.88ZM96.9729 154.333C96.6334 154.672 95.7952 155 94.08 155V157C95.8848 157 97.4466 156.688 98.3871 155.747L96.9729 154.333Z" fill="#97A7C8"/>
+</svg>

package/src/assets/images/5.svg

@@ -0,0 +1,4 @@
+<svg width="103" height="157" viewBox="0 0 103 157" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M56.52 77.52H45.24C41.08 77.52 37.88 79.2 35.64 82.56C33.56 85.92 31.32 87.6 28.92 87.6H9C5.64 87.6 3.96 86 3.96 82.8V6.71999C3.96 3.36 5.64 1.68 9 1.68H92.52C95.88 1.68 97.56 3.36 97.56 6.71999V24.96C97.56 28.32 95.88 30 92.52 30H34.44V65.28C37.16 57.28 43.88 53.28 54.6 53.28H64.68C89.48 53.28 101.88 65.68 101.88 90.48V116.88C101.88 129.36 98.44 139.04 91.56 145.92C84.68 152.64 75 156 62.52 156H41.4C28.76 156 19 152.64 12.12 145.92C5.24 139.2 1.8 129.52 1.8 116.88V112.08C1.8 108.56 3.48 106.8 6.84 106.8H27.24C30.6 106.8 32.28 108.56 32.28 112.08V116.64C32.28 121.6 33.32 125.2 35.4 127.44C37.64 129.52 41.24 130.56 46.2 130.56H57.48C62.6 130.56 66.36 129.52 68.76 127.44C71.16 125.2 72.36 121.6 72.36 116.64V95.04C72.36 88.32 71.24 83.76 69 81.36C66.76 78.8 62.6 77.52 56.52 77.52Z" fill="white"/>
+<path d="M35.64 82.56L34.8079 82.0053L34.7986 82.0193L34.7897 82.0336L35.64 82.56ZM34.44 30V29H33.44V30H34.44ZM34.44 65.28H33.44L35.3868 65.6019L34.44 65.28ZM91.56 145.92L92.2588 146.635L92.2671 146.627L91.56 145.92ZM35.4 127.44L34.6672 128.12L34.6924 128.148L34.7196 128.173L35.4 127.44ZM68.76 127.44L69.4149 128.196L69.4288 128.184L69.4423 128.171L68.76 127.44ZM69 81.36L68.2474 82.0185L68.258 82.0306L68.269 82.0423L69 81.36ZM56.52 76.52H45.24V78.52H56.52V76.52ZM45.24 76.52C40.7578 76.52 37.24 78.3572 34.8079 82.0053L36.472 83.1147C38.52 80.0428 41.4022 78.52 45.24 78.52V76.52ZM34.7897 82.0336C32.7705 85.2954 30.7929 86.6 28.92 86.6V88.6C31.8471 88.6 34.3495 86.5445 36.4903 83.0863L34.7897 82.0336ZM28.92 86.6H9V88.6H28.92V86.6ZM9 86.6C7.46229 86.6 6.4947 86.233 5.90966 85.6759C5.33374 85.1274 4.96 84.2331 4.96 82.8H2.96C2.96 84.5669 3.42626 86.0726 4.53035 87.1241C5.6253 88.1669 7.17771 88.6 9 88.6V86.6ZM4.96 82.8V6.71999H2.96V82.8H4.96ZM4.96 6.71999C4.96 5.19414 5.34079 4.23342 5.92711 3.6471C6.51343 3.06079 7.47415 2.68 9 2.68V0.679998C7.16586 0.679998 5.60657 1.13921 4.51289 2.23289C3.41921 3.32657 2.96 4.88585 2.96 6.71999H4.96ZM9 2.68H92.52V0.679998H9V2.68ZM92.52 2.68C94.0459 2.68 95.0066 3.06079 95.5929 3.6471C96.1792 4.23342 96.56 5.19414 96.56 6.71999H98.56C98.56 4.88585 98.1008 3.32657 97.0071 2.23289C95.9134 1.13921 94.3541 0.679998 92.52 0.679998V2.68ZM96.56 6.71999V24.96H98.56V6.71999H96.56ZM96.56 24.96C96.56 26.4859 96.1792 27.4466 95.5929 28.0329C95.0066 28.6192 94.0459 29 92.52 29V31C94.3541 31 95.9134 30.5408 97.0071 29.4471C98.1008 28.3534 98.56 26.7941 98.56 24.96H96.56ZM92.52 29H34.44V31H92.52V29ZM33.44 30V65.28H35.44V30H33.44ZM35.3868 65.6019C36.6769 61.8075 38.8929 59.0075 42.0315 57.1393C45.1897 55.2594 49.356 54.28 54.6 54.28V52.28C49.124 52.28 44.5703 53.3006 41.0085 55.4207C37.4271 57.5525 34.9232 60.7524 33.4932 64.9581L35.3868 65.6019ZM54.6 54.28H64.68V52.28H54.6V54.28ZM64.68 54.28C76.9259 54.28 85.9266 57.3408 91.8729 63.2871C97.8192 69.2334 100.88 78.2341 100.88 90.48H102.88C102.88 77.9258 99.7408 68.3266 93.2871 61.8729C86.8334 55.4192 77.2341 52.28 64.68 52.28V54.28ZM100.88 90.48V116.88H102.88V90.48H100.88ZM100.88 116.88C100.88 129.173 97.4963 138.569 90.8529 145.213L92.2671 146.627C99.3837 139.511 102.88 129.547 102.88 116.88H100.88ZM90.8613 145.205C84.2188 151.693 74.8196 155 62.52 155V157C75.1804 157 85.1412 153.587 92.2587 146.635L90.8613 145.205ZM62.52 155H41.4V157H62.52V155ZM41.4 155C28.9362 155 19.4589 151.69 12.8187 145.205L11.4213 146.635C18.5411 153.59 28.5838 157 41.4 157V155ZM12.8187 145.205C6.18647 138.727 2.8 129.339 2.8 116.88H0.8C0.8 129.701 4.29353 139.673 11.4213 146.635L12.8187 145.205ZM2.8 116.88V112.08H0.8V116.88H2.8ZM2.8 112.08C2.8 110.463 3.18668 109.436 3.78336 108.81C4.37173 108.194 5.32631 107.8 6.84 107.8V105.8C4.99369 105.8 3.42827 106.286 2.33665 107.43C1.25332 108.564 0.8 110.177 0.8 112.08H2.8ZM6.84 107.8H27.24V105.8H6.84V107.8ZM27.24 107.8C28.7537 107.8 29.7083 108.194 30.2966 108.81C30.8933 109.436 31.28 110.463 31.28 112.08H33.28C33.28 110.177 32.8267 108.564 31.7434 107.43C30.6517 106.286 29.0863 105.8 27.24 105.8V107.8ZM31.28 112.08V116.64H33.28V112.08H31.28ZM31.28 116.64C31.28 121.704 32.3357 125.61 34.6672 128.12L36.1328 126.76C34.3043 124.79 33.28 121.496 33.28 116.64H31.28ZM34.7196 128.173C37.2304 130.504 41.1363 131.56 46.2 131.56V129.56C41.3437 129.56 38.0496 128.536 36.0805 126.707L34.7196 128.173ZM46.2 131.56H57.48V129.56H46.2V131.56ZM57.48 131.56C62.7022 131.56 66.7504 130.505 69.4149 128.196L68.1051 126.684C65.9696 128.535 62.4978 129.56 57.48 129.56V131.56ZM69.4423 128.171C72.1291 125.663 73.36 121.736 73.36 116.64H71.36C71.36 121.464 70.191 124.737 68.0777 126.709L69.4423 128.171ZM73.36 116.64V95.04H71.36V116.64H73.36ZM73.36 95.04C73.36 88.292 72.2527 83.3794 69.7311 80.6777L68.269 82.0423C70.2273 84.1406 71.36 88.348 71.36 95.04H73.36ZM69.7526 80.7015C67.2174 77.8041 62.676 76.52 56.52 76.52V78.52C62.524 78.52 66.3027 79.7959 68.2474 82.0185L69.7526 80.7015Z" fill="#97A7C8"/>
+</svg>

package/src/assets/scss/input.scss

@@ -1,9 +1,10 @@
 // Override input styles
 .f-input {
   border-radius: 5.8px;
-  background-color: rgb(var(--v-theme-background));
   color: rgb(var(--v-theme-text));
-
+  .v-input__control {
+    background-color: rgb(var(--v-theme-fields));
+  }
   &:hover {
     .v-field {
       .v-label {
@@ -140,6 +141,26 @@
   }
 }
 
+// Autocomplete User
+.f-input.f-autocomplete-user {
+  // .v-field {
+  //   .v-field__outline__end {
+  // min-width: calc(100% - 53px);
+  // }
+  // }
+  &.v-input--horizontal .v-input__append {
+    margin-inline-start: 0px;
+    .f-icon {
+      opacity: 1;
+      transition: all 0.3s ease-in-out;
+      &:hover {
+        background: rgb(var(--v-theme-primary)) !important;
+      }
+    }
+  }
+}
+
+// Textarea
 .f-input.v-textarea {
   .v-field {
     .v-field__input {
@@ -170,6 +191,7 @@
       border-radius: 16.8px;
       font-size: 0.75em;
       background: rgb(var(--v-theme-line));
+      color: rgb(var(--v-theme-subTitle));
       .v-chip__close {
         margin-inline-start: 5px;
         margin-inline-end: 5px;
@@ -242,11 +264,11 @@
 
 //Radio
 .f-radio {
-  --v-selection-control-size: 16px;
   &.v-selection-control--inline:not(:last-child) {
     margin-right: 8px;
   }
   .v-selection-control__wrapper {
+    --v-selection-control-size: 16px;
     .v-selection-control__input {
       &::before {
         content: none;

package/src/assets/scss/tabs.scss

@@ -15,7 +15,7 @@
         height: 1px;
         width: 100%;
         background: rgb(var(--v-theme-line));
-        transform: scaleY(0.7);
+        transform: scaleY(1);
         transform-origin: bottom;
       }
       .v-slide-group__content {
@@ -29,8 +29,8 @@
           }
           .v-btn__content {
             .v-tab__slider {
-              height: 1.5px;
-              z-index: 1;
+              // height: 0;
+              // opacity: 0;
             }
           }
         }

package/src/assets/scss/utilities.scss

@@ -63,19 +63,41 @@
   &::-webkit-scrollbar {
     width: 6px;
   }
-
+  &::-webkit-scrollbar-track {
+    border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
   &::-webkit-scrollbar-thumb {
-    background: rgba(var(--v-theme-primary), 0.6);
+    border-top: 0px solid rgba(0, 0, 0, 0);
+    border-bottom: 0px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
     border-radius: 10.8px;
-
+    height: 50px;
+    background-color: rgba(var(--v-theme-disabled));
     &:hover {
-      background: rgba(var(--v-theme-primary), 1);
+      background-color: rgba(var(--v-theme-primary));
     }
   }
+}
 
+.v-virtual-scroll {
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
   &::-webkit-scrollbar-track {
-    background: rgba(var(--v-theme-disabled), 0.4);
     border-radius: 10.8px;
+    box-shadow: inset 0 0 6px rgba(var(--v-theme-disabled));
+  }
+  &::-webkit-scrollbar-thumb {
+    border-top: 0px solid rgba(0, 0, 0, 0);
+    border-bottom: 0px solid rgba(0, 0, 0, 0);
+    background-clip: padding-box;
+    border-radius: 10.8px;
+    height: 50px;
+    background-color: rgba(var(--v-theme-disabled));
+    &:hover {
+      background-color: rgba(var(--v-theme-primary));
+    }
   }
 }
 

package/src/locales/en.json

@@ -17,6 +17,17 @@
     "loginConfirmation": "Login confirmation",
     "confirmationCode": "Confirmation code"
   },
+  "errorPage": {
+    "title": "Oops... Something went wrong :(",
+    "youCan": "however, you can",
+    "checkConnection": "check your internet connection and try again",
+    "networkError": "No connection to the server",
+    "error400": "Bad request",
+    "error404": "Page not found",
+    "error500": "Server error, please contact support",
+    "error503": "Service unavailable, please try again later",
+    "errorUnknown": "An unknown error occurred, please contact support"
+  },
   "buttons": {
     "share": "Share",
     "collect": "Collect",
@@ -35,12 +46,26 @@
     "toBack": "Back",
     "rename": "Rename",
     "yes": "Yes",
-    "no": "No"
+    "no": "No",
+    "home": "Go to home",
+    "reload": "Reload"
   },
   "user": {
     "telephone": "Phone number",
     "position": "Position",
-    "department": "Department"
+    "department": "Department",
+    "executor": "Executor",
+    "executors": "Executors",
+    "initiator": "Initiator",
+    "candidates": "Candidates",
+    "inform": "To attention",
+    "executorLists": "Executor lists",
+    "usersByGroup": "Users by groups",
+    "usersByPosition": "Users by job title",
+    "allUsers": "All users",
+    "allUsersAndGroups": "All users and groups",
+    "selectGroup": "Select group",
+    "selectAllFromList": "Select all from list"
   },
   "tooltip": {
     "actions": "Additional actions",

package/src/locales/ru.json

@@ -10,13 +10,24 @@
     "passwordPlaceholder": "Введите пароль",
     "loggedIn": "Вы уже вошли в систему!",
     "loginSuccess": "Вход выполнен успешно",
-    "loginFail": "Не удалось войти в систему, попробуте еще раз",
+    "loginFail": "Не удалось войти в систему, попробуйте еще раз",
     "loginError": "Ошибка при попытке входа в систему, обратитесь в поддержку",
     "forgotPassword": "Забыли пароль?",
     "errorLoginOrPass": "Не верный логин или пароль",
     "loginConfirmation": "Подтверждение входа",
     "confirmationCode": "Код подтверждения"
   },
+  "errorPage": {
+    "title": "Упс... Что-то пошло не так :(",
+    "youCan": "однако вы можете",
+    "checkConnection": "проверьте интернет-соединение и попробуйте снова",
+    "networkError": "Нет подключения к серверу",
+    "error400": "Плохой запрос",
+    "error404": "Такой страницы не существует",
+    "error500": "Ошибка сервера, обратитесь в поддержку",
+    "error503": "Сервис недоступен, попробуйте позже",
+    "errorUnknown": "Произошла неизвестная ошибка, обратитесь в поддержку"
+  },
   "buttons": {
     "share": "Поделиться",
     "collect": "Отобрать",
@@ -35,18 +46,32 @@
     "toBack": "Назад",
     "rename": "Переименовать",
     "yes": "Да",
-    "no": "Нет"
+    "no": "Нет",
+    "home": "Вернуться на главную",
+    "reload": "Перезагрузить"
   },
   "user": {
     "telephone": "Номер телефона",
     "position": "Должность",
-    "department": "Департамент"
+    "department": "Департамент",
+    "executor": "Исполнитель",
+    "executors": "Исполнители",
+    "candidate": "Кандидат",
+    "candidates": "Кандидаты",
+    "initiator": "Инициатор",
+    "inform": "К сведению",
+    "executorLists": "Списки исполнителей",
+    "usersByGroup": "Пользователи по группам",
+    "usersByPosition": "Пользователи по должностям",
+    "allUsers": "Все пользователи",
+    "allUsersAndGroups": "Все пользователи и группы",
+    "selectGroup": "Выбрать группу",
+    "selectAllFromList": "Выбрать всех из списка"
   },
   "tooltip": {
     "actions": "Дополнительные действия",
     "filter": "Фильтр",
     "sort": "Сортировка",
-    "favoritesFilter": "Фильтр по избранным",
     "search": "Поиск",
     "calendar": "Календарь",
     "clearDate": "Очистить дату"

package/src/locales/uk.json

@@ -17,6 +17,17 @@
     "loginConfirmation": "Підтвердження входу",
     "confirmationCode": "Код підтвердження"
   },
+  "errorPage": {
+    "title": "Упс... Щось пішло не так :(",
+    "youCan": "однак ви можете",
+    "checkConnection": "перевірте інтернет-з'єднання і спробуйте знову",
+    "networkError": "Немає підключення до сервера",
+    "error400": "Поганий запит",
+    "error404": "Такої сторінки не існує",
+    "error500": "Помилка сервера, зверніться до підтримки",
+    "error503": "Сервіс недоступний, спробуйте пізніше",
+    "errorUnknown": "Сталася невідома помилка, зверніться до підтримки"
+  },
   "buttons": {
     "share": "Поділитися",
     "collect": "Зібрати",
@@ -35,12 +46,27 @@
     "toBack": "Назад",
     "rename": "Перейменувати",
     "yes": "Так",
-    "no": "Ні"
+    "no": "Ні",
+    "home": "Повернутися на головну",
+    "reload": "Перезавантажити"
   },
   "user": {
     "telephone": "Номер телефону",
     "position": "Посада",
-    "department": "Департамент"
+    "department": "Департамент",
+    "executor": "Виконавець",
+    "executors": "Виконавці",
+    "candidate": "Кандидат",
+    "candidates": "Кандидати",
+    "initiator": "Ініціатор",
+    "inform": "До відома",
+    "executorLists": "Списки виконавців",
+    "usersByGroup": "Користувачі за групами",
+    "usersByPosition": "Користувачі за посадою",
+    "allUsers": "Всі користувачі",
+    "allUsersAndGroups": "Всі користувачі та групи",
+    "selectGroup": "Вибрати групу",
+    "selectAllFromList": "Вибрати всіх зі списку"
   },
   "tooltip": {
     "actions": "Додаткові дії",

package/src/utils/color.js

@@ -31,3 +31,8 @@ export const hexToRGBA = (hex, alpha) => {
 export const createRadialGradient = (mainColor, spreadColor) => {
   return `radial-gradient(83.34% 88.78% at 50.00% 50.00%, ${hexToRGBA(mainColor, 0.25)} 0%, ${hexToRGBA(mainColor, 0.08)} 31.56%, ${hexToRGBA(spreadColor, 0)} 57.76%)`
 }
+
+export const colorCollection = {
+  light: ['#5400A1', '#038D00', '#0051DC', '#EE6D10', '#DC005C', '#7400CF', '#006794', '#0B14EF', '#CA00DC', '#007B5E'],
+  dark: ['#8848C5', '#6A9269', '#6E96DB', '#D45496', '#0081B9', '#D1AD55', '#DC7B7B', '#614FCF', '#007B5E', '#AF3EB9']
+}