v4

src/pages/AccountChangeEmailPage.vue

@@ -12,6 +12,6 @@
 </template>
 
 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
-  const type = 'change'
+  import accountHelper from 'src/components/accountHelper.vue'
+  const type = 'forgotPwd'
 </script>

src/pages/AccountChangePasswordPage.vue

@@ -12,6 +12,6 @@
 </template>
 
 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
+  import accountHelper from 'src/components/accountHelper.vue'
   const type = 'change'
 </script>

src/pages/AccountCreatePage.vue

@@ -6,12 +6,20 @@
       </div>
     </template>
     <pn-scroll-list>
-      <account-helper :type />
+      <account-helper :type :email/>
     </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import accountHelper from 'components/admin/accountHelper.vue'
-  const type = 'new'
+  import { onMounted, ref } from 'vue'
+  import accountHelper from 'src/components/accountHelper.vue'
+
+  const type = 'register'
+  const email = ref(sessionStorage.getItem('pendingLogin') || '')
+
+  onMounted(() => {
+    sessionStorage.removeItem('pendingLogin')
+  })
+  
 </script>

src/pages/AccountForgotPasswordPage.vue

@@ -6,17 +6,20 @@
       </div>
     </template>
     <pn-scroll-list>
-      <account-helper :type :email="email"/>
+      <account-helper :type :email/>
     </pn-scroll-list>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue'
-  import { useRoute } from 'vue-router' // Добавляем импорт
-  import accountHelper from 'components/admin/accountHelper.vue'
+  import { onMounted, ref } from 'vue'
+  import accountHelper from 'src/components/accountHelper.vue'
+
+  const type = 'forgotPwd'
+  const email = ref(sessionStorage.getItem('pendingLogin') || '')
+
+  onMounted(() => {
+    sessionStorage.removeItem('pendingLogin')
+  })
 
-  const route = useRoute()
-  const type = 'forgot'
-  const email = ref(route.query.email as string)
 </script>

src/pages/AccountPage.vue

@@ -1,25 +1,16 @@
 <template>
   <pn-page-card>
     <template #title>
-      <div class="flex justify-between items-center text-white q-pa-sm w100">
-        <div class="flex items-center justify-center row">
-          <q-avatar v-if="tgUser?.photo_url" size="48px" class="q-mr-xs">
-            <q-img :src="tgUser.photo_url"/>
-          </q-avatar>
-          <div class="flex column">
-            <span class="q-ml-xs text-h5">
-              {{
-                tgUser?.first_name + 
-                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
-                tgUser?.last_name
-              }}
-            </span>
-            <span class="q-ml-xs text-caption">
-              {{ tgUser?.username }}
-            </span>
-          </div>
-        </div>
-        <q-btn flat icon="mdi-logout"/>
+      <div class="flex items-center no-wrap w100">
+        <pn-account-block-name/>
+        <q-btn
+          v-if="user?.email"
+          @click="logout()"
+          flat
+          round
+          icon="mdi-logout"
+          class="q-ml-md"
+        />
       </div>
     </template>
 
@@ -56,16 +47,13 @@
 </template>
 
 <script setup lang="ts">
-  import { inject, computed } from 'vue'
+  import { computed } from 'vue'
   import { useRouter } from 'vue-router'
-  // import { useAuthStore } from 'stores/auth'
-  import type { WebApp } from '@twa-dev/types'
+  import { useAuthStore } from 'stores/auth'
 
   const router = useRouter()
-  // const authStore = useAuthStore()
-
-  const tg = inject('tg') as WebApp
-  const tgUser = tg.initDataUnsafe.user
+  const authStore = useAuthStore()
+  const user = authStore.user
 
   const items = computed(() => ([
     { id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
@@ -73,15 +61,20 @@
     { id: 3, name: 'account__auth_change_password', description: 'account__auth_change_password_description', icon: 'mdi-account-key-outline', iconColor: 'primary', pathName: 'change_account_password' },
     { id: 4, name: 'account__auth_change_account', description: 'account__auth_change_account_description', icon: 'mdi-account-switch-outline', iconColor: 'primary', pathName: 'change_account_email' },
     { id: 5, name: 'account__company_data', icon: 'mdi-account-group-outline', description: 'account__company_data_description', pathName: 'your_company' },
-    { id: 6, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
-    { id: 7, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
-    { id: 8, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
+    { id: 6, name: 'account__settings', icon: 'mdi-cog-outline', description: 'account__settings_description', iconColor: 'info', pathName: 'settings' },
+    { id: 7, name: 'account__support', icon: 'mdi-lifebuoy', description: 'account__support_description', iconColor: 'info', pathName: 'support' },
+    { id: 8, name: 'account__terms_of_use', icon: 'mdi-book-open-variant-outline', description: '', iconColor: 'grey', pathName: 'terms' },
+    { id: 9, name: 'account__privacy', icon: 'mdi-lock-outline', description: '', iconColor: 'grey', pathName: 'privacy' }
   ]))
 
   async function goTo (path: string) {
     await router.push({ name: path })
   }
 
+  async function logout () {
+    await authStore.logout()
+  }
+
 </script>
 
 <style lang="scss">

src/pages/CompanyCreatePage.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
   import { ref } from 'vue'
   import { useRouter } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
   import { useCompaniesStore } from 'stores/companies'
   import type { Company } from 'src/types'
 

src/pages/CompanyInfoPage.vue

@@ -27,8 +27,8 @@
 <script setup lang="ts">
   import { ref, onMounted } from 'vue'
   import { useRouter, useRoute } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
-  import companyInfoPersons from 'components/admin/companyInfoPersons.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
+  import companyInfoPersons from 'src/components/companyInfoPersons.vue'
   import { useCompaniesStore } from 'stores/companies'
   import type { Company } from 'src/types'
   import { parseIntString, isObjEqual } from 'boot/helpers'

src/pages/CompanyYourPage.vue

@@ -22,7 +22,7 @@
 <script setup lang="ts">
   import { ref } from 'vue'
   import { useRouter } from 'vue-router'
-  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import companyInfoBlock from 'src/components/companyInfoBlock.vue'
   import { useCompaniesStore } from 'stores/companies'
   import type { Company } from 'src/types'
 

src/pages/LoginPage.vue

@@ -1,5 +1,6 @@
 <template>
-  <q-page class="flex column items-center justify-between">
+  <q-page class="flex column items-center justify-center">
+
     <q-card
       id="login_block"
       flat
@@ -10,22 +11,37 @@
         :style="{ alignItems: 'flex-end' }"
         />
 
-      <div class = "q-ma-md flex column input-login">
+      <div class="q-ma-md flex column input-login">
         <q-input
           v-model="login"
+          autofocus
           dense
           filled
-          class = "q-mb-md"
-          :label = "$t('login__email')"
+          class="q-mb-sm"
+          :label="$t('login__email')"
+          :rules="validationRules.email"
+          lazy-rules="ondemand"
+          no-error-icon
+          @focus="emailInput?.resetValidation()"
+          @blur="delayValidity('login')"
+          ref="emailInput"
         />
 
         <q-input
           v-model="password"
           dense
           filled
-          :label = "$t('login__password')"
-          class = "q-mb-md"
+          :label="$t('login__password')"
+          class="q-mb-none q-mt-xs"
           :type="isPwd ? 'password' : 'text'"
+          hide-hint
+          :hint="passwordHint"
+          :rules="validationRules.password"
+          lazy-rules="ondemand"
+          no-error-icon
+          @focus="passwordInput?.resetValidation()"
+          @blur="delayValidity('password')"
+          ref="passwordInput"
           >
           <template #append>
             <q-icon
@@ -35,24 +51,25 @@
               @click="isPwd = !isPwd"
             />
           </template>
+
         </q-input>
 
         <div class="self-end">
           <q-btn
-            @click="forgotPwd"
+            @click.prevent="forgotPwd"
             flat
             no-caps
             dense
             class="text-grey"
             >
-              {{$t('login__forgot_password')}}
+            {{$t('login__forgot_password')}}
           </q-btn>
         </div>
       </div>
       <q-btn
-        @click="sendAuth"
+        @click="sendAuth()"
         color="primary"
-        :disabled="!acceptTermsOfUse"
+        :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
         >
         {{$t('login__sign_in')}}
       </q-btn>
@@ -62,7 +79,7 @@
           sm
           no-caps
           color="primary"
-          @click="createAccount()"
+          @click="createAccount"
           >
           {{$t('login__register')}}
         </q-btn>
@@ -83,7 +100,7 @@
           sm
           no-caps
           color="primary"
-          :disabled="!acceptTermsOfUse"
+          :disabled="!acceptTermsOfUse || !isEmailValid || !isPasswordValid"
           @click="handleTelegramLogin"
           >
           <div class="flex items-center text-blue">
@@ -100,7 +117,10 @@
       </div>
     </q-card>
 
-    <div id="term-of-use" class="q-py-lg text-white q-flex row">
+    <div
+      id="term-of-use"
+      class="absolute-bottom q-py-lg text-white flex justify-center row"
+      >
       <q-checkbox
         v-model="acceptTermsOfUse"
         checked-icon="task_alt"
@@ -110,24 +130,31 @@
         keep-color
       />
       <span class="q-px-xs">
-        {{$t('login__accept_terms_of_use') + ' '}}
+        {{ $t('login__accept_terms_of_use') + ' ' }}
       </span>
-      <span class="text-cyan-12">
-        {{$t('login__terms_of_use') }}
+      <span
+        @click="router.push('terms-of-use')"
+        style="text-decoration: underline;"
+        >
+        {{ $t('login__terms_of_use') }}
       </span>
     </div>
   </q-page>
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, inject } from 'vue'
+  import { ref, computed, inject, onUnmounted } from 'vue'
   import { useQuasar } from 'quasar'
   import { useRouter } from 'vue-router'
-  import loginLogo from 'components/admin/login-page/loginLogo.vue'
+  import loginLogo from 'components/login-page/loginLogo.vue'
   import { useI18n } from "vue-i18n"
   import { useAuthStore } from 'src/stores/auth'
   import type { WebApp } from '@twa-dev/types'
+  import { QInput } from 'quasar'
+  import type { ServerError } from 'boot/axios'
 
+  type ValidationRule = (val: string) => boolean | string
+  
   const tg = inject('tg') as WebApp
   const tgUser = tg.initDataUnsafe.user
     
@@ -141,9 +168,50 @@
   const isPwd = ref<boolean>(true)
   const acceptTermsOfUse = ref<boolean>(true)
 
-  function onErrorLogin () {
+  const emailInput = ref<InstanceType<typeof QInput>>()
+  const passwordInput = ref<InstanceType<typeof QInput>>()
+
+  const validationRules = {
+    email: [(val: string) => /.+@.+\..+/.test(val) || t('login__incorrect_email')] as [ValidationRule],
+    password: [(val: string) => val.length >= 8 || t('login__password_require')] as [ValidationRule]
+  }
+
+  const isEmailValid = computed(() => 
+    validationRules.email.every(f => f(login.value) === true)
+  )
+
+  const isPasswordValid = computed(() => 
+    validationRules.password.every(f => f(password.value) === true)
+  )
+
+  const passwordHint = computed(() => {
+    const result = validationRules.password[0](password.value)
+    return typeof result === 'string' ? result : ''
+  })
+
+  // fix validity problem with router.push
+  type Field = 'login' | 'password'
+
+  const validateTimerId = ref<Record<Field, ReturnType<typeof setTimeout> | null>>({
+    login: null,
+    password: null
+  })
+  
+  const delayValidity = (type: Field) => {
+    validateTimerId.value[type] = setTimeout(() => {
+      void (async () => {
+        if (validateTimerId.value[type] !== null) {
+          clearTimeout(validateTimerId.value[type])
+        }
+        if (type === 'login') await emailInput.value?.validate()
+        if (type === 'password') await passwordInput.value?.validate()
+      })()
+    }, 300)
+  }
+
+  function onErrorLogin (error: ServerError) {
     $q.notify({
-      message: t('login__incorrect_login_data'),
+      message: t(error.message) + ' (' + t('code') + ':' + error.code + ')',
       type: 'negative',
       position: 'bottom',
       timeout: 2000,
@@ -152,18 +220,22 @@
   }
 
   async function sendAuth() {
-    console.log('1')
+    try { void await authStore.loginWithCredentials(login.value, password.value) }
+    catch (error) {
+      console.log(error)
+      onErrorLogin(error as ServerError)
+    }
     await router.push({ name: 'projects' })
   }
 
+  
   async function forgotPwd() {
-    await router.push({
-      name: 'recovery_password',
-      query: { email: login.value } 
-    })
+    sessionStorage.setItem('pendingLogin', login.value)
+    await router.push({ name: 'recovery_password' })
   }
 
   async function createAccount() {
+    sessionStorage.setItem('pendingLogin', login.value)
     await router.push({ name: 'create_account' })
   }
 
@@ -181,6 +253,10 @@ async function handleTelegramLogin () {
   const initData = window.Telegram.WebApp.initData
   await authStore.loginWithTelegram(initData)
 }
+
+onUnmounted(() => {
+  Object.values(validateTimerId.value).forEach(timer => timer && clearTimeout(timer))
+})
   
 </script>
 

src/pages/PersonInfoPage.vue

@@ -29,7 +29,7 @@
 
             <div class="q-gutter-y-lg w100">
               <q-input
-                v-model="person.name"
+                v-model.trim="person.name"
                 dense
                 filled
                 class = "w100"
@@ -64,7 +64,7 @@
               </q-select>
 
               <q-input
-                v-model="person.department"
+                v-model.trim="person.department"
                 dense
                 filled
                 class = "w100"
@@ -72,7 +72,7 @@
               />
 
               <q-input
-                v-model="person.role"
+                v-model.trim="person.role"
                 dense
                 filled
                 class = "w100"

src/pages/ProjectCreatePage.vue

@@ -25,7 +25,7 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
-  import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+  import projectInfoBlock from 'src/components/projectInfoBlock.vue'
   import { useProjectsStore } from 'stores/projects'
   import type { ProjectParams } from 'src/types'
 
@@ -53,8 +53,9 @@
   })
   
  async function addProject (data: ProjectParams) {
-    const newProject = projectsStore.addProject(data)
-    await router.push({name: 'chats', params: { id: newProject.id}})
+    const newProject = await projectsStore.addProject(data)
+    // await router.push({name: 'chats', params: { id: newProject.id}})
+    console.log(newProject)
   }
 
 </script>

src/pages/ProjectInfoPage.vue

@@ -29,7 +29,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { useProjectsStore } from 'stores/projects'
-import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+import projectInfoBlock from 'src/components/projectInfoBlock.vue'
 import type { Project } from '../types'
 import { parseIntString, isObjEqual } from 'boot/helpers'
 
@@ -45,7 +45,7 @@ const isFormValid = ref(false)
 const originalProject = ref<Project>({} as Project)
 
 const isDirty = () => {
-  return project.value && !isObjEqual(originalProject.value, project.value)
+  return true // project.value && !isObjEqual(originalProject.value, project.value)
 }
 
 onMounted(async () => {

src/pages/ProjectPage.vue

@@ -8,8 +8,6 @@
       v-model="tabSelect"
       animated
       keep-alive
-      @before-transition="showFab = false"
-      @transition="showFab = true"
       class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
       >
       <q-tab-panel
@@ -19,7 +17,7 @@
         class="q-pa-none flex column col-grow no-scroll"
         style="flex-grow: 2"
         >
-        <component :is="tab.component" :showFab = "tab.name === tabSelect" />
+        <router-view/>
       </q-tab-panel>
     </q-tab-panels>
 
@@ -66,29 +64,18 @@
 <script setup lang="ts">
   import { ref, onBeforeMount, computed } from 'vue'
   import { useProjectsStore } from 'stores/projects'
-  import projectPageHeader from 'components/admin/project-page/ProjectPageHeader.vue' 
-  import projectPageChats from 'components/admin/project-page/ProjectPageChats.vue'  
-  import projectPageCompanies from 'components/admin/project-page/ProjectPageCompanies.vue'  
-  import projectPagePersons from 'components/admin/project-page/ProjectPagePersons.vue'  
+  import projectPageHeader from 'pages/project-page/ProjectPageHeader.vue' 
   import { useRoute } from 'vue-router'
 
   const route = useRoute()
 
-  const showFab = ref<boolean>(false)
-
   const projectStore = useProjectsStore()
   const currentProject = computed(() => projectStore.getCurrentProject() )
 
-  const tabComponents = {
-    projectPageChats,
-    projectPagePersons,
-    projectPageCompanies
-  }
-
   const tabs = [
-    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', component: tabComponents.projectPageChats, to: { name: 'chats'} },
-    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', component: tabComponents.projectPagePersons, to: { name: 'persons'} },
-    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
+    {name: 'chats', label: 'project__chats', icon: 'mdi-chat-outline', to: { name: 'chats'} },
+    {name: 'persons', label: 'project__persons', icon: 'mdi-account-outline', to: { name: 'persons'} },
+    {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', to: { name: 'companies'} },
   ]
 
   const tabSelect = ref<string>()

src/pages/ProjectsPage.vue

@@ -13,19 +13,9 @@
             icon-right="mdi-chevron-right"
             align="right"
             dense
+            class="fix-btn"
             >
-            <div class="flex items-center">
-              <q-avatar v-if="tgUser?.photo_url" size="32px">
-                <q-img :src="tgUser.photo_url"/>
-              </q-avatar>
-              <div class="q-ml-xs ellipsis" style="max-width: 100px">
-                {{
-                tgUser?.first_name + 
-                (tgUser?.first_name && tgUser?.last_name ? ' ' : '') +
-                tgUser?.last_name
-                }}
-              </div>
-            </div>
+            <pn-account-block-name/>
           </q-btn>
         </div>
           
@@ -33,7 +23,7 @@
     </template>
 
     <pn-scroll-list>
-      <template #card-body-header>
+      <template #card-body-header v-if="projects.length !== 0">
         <q-input
           v-model="searchProject"
           clearable
@@ -47,75 +37,91 @@
           </template>
         </q-input>
       </template>  
-    
-      <q-list separator>
-        <q-item
-          v-for = "item in activeProjects"
-          :key="item.id"
-          clickable
-          v-ripple
-          @click="goProject(item.id)"
-          class="w100"
-          >
-            <q-item-section avatar>
-              <q-avatar rounded >
-                <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-                <pn-auto-avatar v-else :name="item.name"/>
-              </q-avatar>
+      
+      <div id="projects-wrapper">
+        <q-list separator v-if="projects.length !== 0">
+          <q-item
+            v-for = "item in activeProjects"
+            :key="item.id"
+            clickable
+            v-ripple
+            @click="goProject(item.id)"
+            class="w100"
+            >
+              <q-item-section avatar>
+                <q-avatar rounded >
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
+                  <pn-auto-avatar v-else :name="item.name"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+                <q-item-label caption lines="2">{{item.description}}</q-item-label>
+
             </q-item-section>
-            <q-item-section>
-              <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-              <q-item-label caption lines="2">{{item.description}}</q-item-label>
+            <q-item-section side class="text-caption ">
+              <div class="flex items-center column">           
+                <div class="flex items-center">
+                  <q-icon name="mdi-chat-outline"/>
+                  <span>{{ item.chats }} </span>
+                </div>
+                <div class="flex items-center">
+                  <q-icon name="mdi-account-outline"/>
+                  <span>{{ item.persons }}</span>
+                </div>
+              </div>  
+            </q-item-section>
+          </q-item>
+        </q-list>
+        <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
+          <div id="btn_show_archive">
+            <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
+              <template #label>
+                <span class="text-caption">
+                  <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
+                  <span v-else>{{ $t('projects__hide_archive') }}</span>
+                </span>
+              </template>
+            </q-btn-dropdown>
+          </div>
 
-          </q-item-section>
-          <q-item-section side class="text-caption ">
-            <div class="flex items-center column">           
-              <div class="flex items-center">
-                <q-icon name="mdi-chat-outline"/>
-                <span>{{ item.chats }} </span>
-              </div>
-              <div class="flex items-center">
-                <q-icon name="mdi-account-outline"/>
-                <span>{{ item.persons }}</span>
-              </div>
-            </div>  
-          </q-item-section>
-        </q-item>
-      </q-list>
-      <div v-if="archiveProjects.length !== 0" class="flex column items-center w100" :class="showArchive ? 'bg-grey-12' : ''">
-        <div id="btn_show_archive">
-          <q-btn-dropdown color="grey" flat no-caps @click="showArchive = !showArchive" dropdown-icon="arrow_drop_up">
-            <template #label>
-              <span class="text-caption">
-                <span v-if="!showArchive">{{ $t('projects__show_archive') }}</span>
-                <span v-else>{{ $t('projects__hide_archive') }}</span>
-              </span>
-            </template>
-          </q-btn-dropdown>
+          <q-list separator v-if="showArchive" class="w100">
+            <q-item
+              v-for = "item in archiveProjects"
+              :key="item.id"
+              clickable
+              v-ripple
+              @click="handleArchiveList(item.id)"
+              class="w100 text-grey"
+              >
+              <q-item-section avatar>
+                <q-avatar rounded >
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
+                  <pn-auto-avatar v-else :name="item.name"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+                <q-item-label caption lines="2">{{item.description}}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </q-list>
         </div>
-
-        <q-list separator v-if="showArchive" class="w100">
-        <q-item
-          v-for = "item in archiveProjects"
-          :key="item.id"
-          clickable
-          v-ripple
-          @click="handleArchiveList(item.id)"
-          class="w100 text-grey"
-          >
-          <q-item-section avatar>
-            <q-avatar rounded >
-              <q-img v-if="item.logo" :src="item.logo" fit="cover" style="height: 40px"/>
-              <pn-auto-avatar v-else :name="item.name"/>
-            </q-avatar>
-          </q-item-section>
-          <q-item-section>
-            <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
-            <q-item-label caption lines="2">{{item.description}}</q-item-label>
-          </q-item-section>
-        </q-item>
-      </q-list>
       </div>
+      <div
+          v-if="projects.length === 0"
+          class="flex w100 column q-pt-xl q-pa-md"
+          >
+            <div class="flex column justify-center col-grow items-center text-grey">
+            <q-icon name="mdi-briefcase-plus-outline" size="160px" class="q-pb-md"/>
+            <div class="text-h6">
+              {{$t('projects__lets_start')}}
+            </div>
+            <div class="text-caption" align="center">
+              {{$t('projects__lets_start_description')}}
+            </div>
+          </div>
+        </div> 
     </pn-scroll-list>
 
     <q-page-sticky
@@ -160,13 +166,9 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, watch, inject } from 'vue'
+  import { ref, computed, watch, onMounted } from 'vue'
   import { useRouter } from 'vue-router'
   import { useProjectsStore } from 'stores/projects'
-  import type { WebApp } from '@twa-dev/types'
-
-  const tg = inject('tg') as WebApp
-  const tgUser = tg.initDataUnsafe.user
 
   const router = useRouter()
   const projectsStore = useProjectsStore()
@@ -223,11 +225,20 @@
     return displayProjects.value.filter(el => el.is_archive)
   })
 
+  onMounted(async () => {
+    if (!projectsStore.isInit) {
+      await projectsStore.init()
+    }
+  })
+
   watch(showDialogArchive, (newD :boolean) => {
     if (!newD) archiveProjectId.value = undefined
   })
 
 </script>
 
-<style>
+<style scoped>
+  .fix-btn :deep(.q-btn__content) {
+    flex-wrap: nowrap;
+  }
 </style>

src/pages/SubscribePage.vue

@@ -46,11 +46,11 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, inject, computed } from 'vue'
+  import { ref } from 'vue'
   // import { useRouter } from 'vue-router'
   // import { useAuthStore } from 'stores/auth'
   // import type { WebApp } from '@twa-dev/types'
-  import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
+  import qtyChatCard from 'components/account-page/qtyChatCard.vue'
   // import optionPayment from 'components/admin/account-page/optionPayment.vue'
 
   // const router = useRouter()
@@ -72,10 +72,6 @@
     { id: 3, qty: 220, stars: 500, discount: 30 }
   ]) */
 
-
-
-
-
 </script>
 
 <style lang="scss">

src/pages/project-page/ProjectPageChats.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="q-pa-none flex column col-grow no-scroll">
+    <pn-scroll-list>
+      <template #card-body-header>
+        
+        <div class="flex row q-ma-md justify-between">
+          <q-input
+            v-model="search"
+            clearable
+            clear-icon="close"
+            :placeholder="$t('project_chats__search')"
+            dense
+            class="col-grow"
+            >
+            <template #prepend>
+              <q-icon name="mdi-magnify" />
+            </template>
+          </q-input>
+        </div>
+      </template>
+      <q-list bordered separator>
+        <q-slide-item
+          v-for="item in displayChats"
+          :key="item.id"
+          @right="handleSlide($event, item.id)"
+          right-color="red"
+          >
+          <template #right>
+            <q-icon size="lg" name="mdi-link-off"/>
+          </template>
+
+          <q-item
+            :key="item.id"
+            :clickable="false"
+            >
+            <q-item-section avatar>
+              <q-avatar rounded>
+                <q-img  v-if="item.logo" :src="item.logo"/>
+                <pn-auto-avatar v-else :name="item.name"/>
+              </q-avatar>
+            </q-item-section>
+            <q-item-section>
+              <q-item-label lines="1" class="text-bold">
+                {{ item.name }}
+              </q-item-label>
+              <q-item-label caption lines="2">
+                {{ item.description }}
+              </q-item-label>
+              <q-item-label caption lines="1">
+                <div class = "flex justify-start items-center">
+                  <div class="q-mr-sm flex items-center">
+                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
+                    <span>{{ item.persons }}</span>
+                  </div>
+                  <div class="q-mx-sm flex items-center">
+                    <q-icon name="mdi-key" class="q-mr-sm"/>
+                    <span>{{ item.owner_id }} </span>
+                  </div>
+                </div>
+              </q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-slide-item>
+      </q-list>
+
+    </pn-scroll-list>
+
+
+  </div>
+
+  <q-page-sticky
+      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
+      position="bottom-right"
+      :offset="[18, 18]"
+      >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
+        <q-fab
+            v-if="showFab"
+            icon="add"
+            color="brand"
+            direction="up"
+            vertical-actions-align="right"
+            @click="showOverlay = !showOverlay"
+            >
+            <q-fab-action
+              v-for="item in fabMenu"
+              :key="item.id"
+              square
+              clickable
+              v-ripple
+              class="bg-white change-fab-action"
+              >
+              <template #icon>
+                <q-item class="q-pa-xs w100">
+                  <q-item-section avatar class="items-center">
+                    <q-avatar color="brand" rounded text-color="white" :icon="item.icon" />
+                  </q-item-section>
+
+                  <q-item-section class="items-start">
+                      <q-item-label class="fab-action-item">
+                        {{ $t(item.name) }}
+                      </q-item-label>
+                      <q-item-label caption class="fab-action-item">
+                        {{ $t(item.description) }}
+                      </q-item-label>
+
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-fab-action>
+      
+        </q-fab>
+      </transition>
+    </q-page-sticky>
+
+    <pn-overlay  v-if="showOverlay"/>
+  <q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">{{ $t('project_chat__delete_warning') }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t('project_chat__delete_warning_message') }}
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          flat
+          :label="$t('back')"
+          color="primary"
+          v-close-popup
+          @click="onCancel()"
+        />
+        <q-btn
+          flat
+          :label="$t('delete')"
+          color="primary"
+          v-close-popup
+          @click="onConfirm()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
+  import { useChatsStore } from 'stores/chats'
+
+  const search = ref('')
+  const showOverlay = ref<boolean>(false)
+  const chatsStore = useChatsStore()
+  const showDialogDeleteChat = ref<boolean>(false)
+  const deleteChatId = ref<number | undefined>(undefined)
+  const currentSlideEvent = ref<SlideEvent | null>(null)
+  const closedByUserAction = ref(false)
+
+  interface SlideEvent {
+    reset: () => void
+  }
+
+  const chats = chatsStore.chats
+
+  const fabMenu = [
+    {id: 1, icon: 'mdi-chat-plus-outline', name: 'project_chats__attach_chat', description: 'project_chats__attach_chat_description', func: 'attachChat'},
+    {id: 2, icon: 'mdi-share-outline', name: 'project_chats__send_chat', description: 'project_chats__send_chat_description', func: 'sendChat'},
+  ]
+
+  const displayChats = computed(() => {
+    if (!search.value || !(search.value && search.value.trim())) return chats
+    const searchValue = search.value.trim().toLowerCase()
+    const arrOut = chats
+      .filter(el =>
+        el.name.toLowerCase().includes(searchValue) ||
+        el.description && el.description.toLowerCase().includes(searchValue)
+      )
+    return arrOut
+  })
+
+    function handleSlide (event: SlideEvent, id: number) {
+    currentSlideEvent.value = event
+    showDialogDeleteChat.value = true
+    deleteChatId.value = id
+  }
+
+  function onDialogBeforeHide () {
+      if (!closedByUserAction.value) {
+        onCancel()
+      }
+    closedByUserAction.value = false
+  }
+
+  function onCancel() {
+    closedByUserAction.value = true
+    if (currentSlideEvent.value) {
+      currentSlideEvent.value.reset()
+      currentSlideEvent.value = null
+    }
+  }
+
+  function onConfirm() {
+    closedByUserAction.value = true
+    if (deleteChatId.value) {
+      chatsStore.deleteChat(deleteChatId.value)
+    }
+    currentSlideEvent.value = null
+  }
+
+  // fix fab jumping
+  const showFab = ref(false)
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
+
+  onActivated(() => {
+    timerId.value = setTimeout(() => {
+      showFab.value = true
+    }, 300)
+  })
+
+
+  onDeactivated(() => {
+    showFab.value = false
+    if (timerId.value) {
+      clearTimeout(timerId.value)
+      timerId.value = null
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (timerId.value) clearTimeout(timerId.value)
+  })
+   
+</script>
+
+<style scoped>
+  .change-fab-action .q-fab__label--internal {
+    max-height: none;
+  }
+
+  .change-fab-action {
+    width: calc(min(100vw, var(--body-width)) - 48px) !important;
+  }
+
+  .fab-action-item {
+    text-wrap: auto !important; 
+    text-align: left;
+  }
+  
+  /* fix mini border after slide */
+  :deep(.q-slide-item__right)
+  {
+    align-self: center;
+    height: 98%;
+  }
+
+  .fix-fab {
+    top: calc(100vh - 92px);
+    left: calc(100vw - 92px);
+    padding: 18px;
+  }
+</style>

src/pages/project-page/ProjectPageCompanies.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="q-pa-none flex column col-grow no-scroll">
+    <pn-scroll-list>
+      <template #card-body-header>
+        <div class="w100 flex items-center justify-end q-pa-sm">
+            <q-btn color="primary" flat no-caps dense @click="maskCompany()">
+              <q-icon
+                left
+                size="sm"
+                name="mdi-drama-masks"
+              />
+              <div>
+                {{ $t('company__mask')}}
+              </div>
+            </q-btn>
+          </div>
+      </template>  
+
+      <q-list separator>
+        <q-slide-item
+          v-for="item in companies"
+          :key="item.id"
+          @right="handleSlide($event, item.id)"
+          right-color="red"
+          >
+          <template #right>
+            <q-icon size="lg" name="mdi-delete-outline"/>
+          </template>
+          <q-item
+            :key="item.id"
+            clickable
+            v-ripple
+            class="w100"
+            @click="goCompanyInfo(item.id)"
+            >
+              <q-item-section avatar>
+                <q-avatar rounded>
+                  <q-img v-if="item.logo" :src="item.logo" fit="cover" style="max-width: unset; height:40px;"/>
+                  <pn-auto-avatar v-else :name="item.name"/>
+                </q-avatar>
+              </q-item-section>
+              <q-item-section>
+                <q-item-label lines="1" class="text-bold">{{ item.name }}</q-item-label>
+                <q-item-label caption lines="2">{{ item.description }}</q-item-label>
+              </q-item-section>
+              <!-- <q-item-section side top>
+                  <div class="flex items-center">
+                    <q-icon v-if="item.masked" name="mdi-drama-masks" color="black" size="sm"/>
+                    <q-icon name="mdi-account-outline" color="grey" />
+                    <span>{{ item.qtyPersons }}</span>
+                  </div>
+                </q-item-section> -->
+          </q-item>
+        </q-slide-item>
+      </q-list>
+    </pn-scroll-list>
+    <q-page-sticky
+      position="bottom-right"
+      :offset="[18, 18]"
+      >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
+        <q-btn
+          v-if="showFab"
+          fab 
+          icon="add"
+          color="brand"
+          @click="createCompany()"
+        />
+      </transition>
+    </q-page-sticky>
+  </div>
+  <q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">{{ $t('company__delete_warning') }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t('company__delete_warning_message') }}
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          flat
+          :label="$t('back')"
+          color="primary"
+          v-close-popup
+          @click="onCancel()"
+        />
+        <q-btn
+          flat
+          :label="$t('delete')"
+          color="primary"
+          v-close-popup
+          @click="onConfirm()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+    
+<script setup lang="ts">
+  import { ref, computed, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
+  import { useRouter, useRoute  } from 'vue-router'
+  import { useCompaniesStore } from 'stores/companies'
+  import { parseIntString } from 'boot/helpers'
+  
+  const router = useRouter()
+  const route = useRoute()
+  const companiesStore = useCompaniesStore()
+  const showDialogDeleteCompany = ref<boolean>(false)
+  const deleteCompanyId = ref<number | undefined>(undefined)
+  const currentSlideEvent = ref<SlideEvent | null>(null)
+  const closedByUserAction = ref(false)
+  const projectId = computed(() => parseIntString(route.params.id))
+
+  interface SlideEvent {
+    reset: () => void
+  }
+
+  const companies = companiesStore.companies
+
+  async function maskCompany () {
+    await router.push({ name: 'company_mask' })
+  }
+
+  async function goCompanyInfo (id :number) {
+    await router.push({ name: 'company_info', params: { id: projectId.value, companyId: id }})
+  }
+
+  async function createCompany () {
+    await router.push({ name: 'add_company' })
+  }
+
+  function handleSlide (event: SlideEvent, id: number) {
+    currentSlideEvent.value = event
+    showDialogDeleteCompany.value = true
+    deleteCompanyId.value = id
+  }
+
+  function onDialogBeforeHide () {
+    if (!closedByUserAction.value) {
+      onCancel()
+    }
+    closedByUserAction.value = false
+  }
+
+  function onCancel() {
+    closedByUserAction.value = true
+    if (currentSlideEvent.value) {
+      currentSlideEvent.value.reset()
+      currentSlideEvent.value = null
+    }
+  }
+
+  function onConfirm() {
+    closedByUserAction.value = true
+    if (deleteCompanyId.value) {
+      companiesStore.deleteCompany(deleteCompanyId.value)
+    }
+    currentSlideEvent.value = null
+  }
+
+  // fix fab jumping
+  const showFab = ref(false)
+  const timerId = ref<ReturnType<typeof setTimeout> | null>(null)
+
+  onActivated(() => {
+    timerId.value = setTimeout(() => {
+      showFab.value = true
+    }, 300)
+  })
+
+
+  onDeactivated(() => {
+    showFab.value = false
+    if (timerId.value) {
+      clearTimeout(timerId.value)
+      timerId.value = null
+    }
+  })
+
+  onBeforeUnmount(() => {
+    if (timerId.value) clearTimeout(timerId.value)
+  })
+</script>
+
+<style scoped>
+
+  /* fix mini border after slide */
+  :deep(.q-slide-item__right)
+  {
+    align-self: center;
+  }
+</style>
+

src/pages/project-page/ProjectPageHeader.vue

@@ -0,0 +1,202 @@
+<template>
+  <div
+  id="project-info"
+    :style="{ height: headerHeight + 'px' }"
+    class="flex row items-center justify-between no-wrap q-my-sm w100"
+    style="overflow: hidden; transition: height 0.3s ease-in-out;"
+    >
+    <div class="ellipsis overflow-hidden">
+      <q-resize-observer @resize="onResize" />
+      <transition
+        enter-active-class="animated slideInUp"
+        leave-active-class="animated slideOutUp"
+        mode="out-in"
+      >
+        <div
+          v-if="!expandProjectInfo"
+          @click="toggleExpand"
+          class="text-h6 ellipsis no-wrap w100"
+          key="compact"
+        >
+          {{project.name}}
+        </div>
+
+        <div
+          v-else
+          class="flex items-center no-wrap q-hoverable q-animate--slideUp"
+          @click="toggleExpand"
+          key="expanded"
+        >
+          <q-avatar rounded>
+            <q-img v-if="project.logo" :src="project.logo" fit="cover" style="height: 100%;"/>
+            <pn-auto-avatar v-else :name="project.name"/>
+          </q-avatar>
+
+          <div class="q-px-md flex column text-white fit">
+            <div
+              class="text-h6"
+              :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }"
+            >
+              {{project.name}}
+            </div>
+
+            <div class="text-caption" :style="{ maxWidth: '-webkit-fill-available', whiteSpace: 'normal' }">
+              {{project.description}}
+              
+            </div>
+          </div>
+        </div>
+      </transition>
+    </div>
+
+    <q-btn flat round color="white" icon="mdi-pencil" size="sm" class="q-ml-xl q-mr-sm">
+      <q-menu anchor="bottom right" self="top right">
+        <q-list>
+          <q-item
+            v-for="item in menuItems"
+            :key="item.id"
+            @click="item.func"
+            clickable
+            v-close-popup 
+            class="flex items-center"
+            >
+              <q-icon :name="item.icon" size="sm" :color="item.iconColor"/>
+              <span class="q-ml-xs">{{ $t(item.title) }}</span>
+            </q-item>
+          </q-list>
+      </q-menu>
+    </q-btn>
+  </div>
+  <q-dialog v-model="showDialog">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">
+          {{ $t( 
+            dialogType === 'archive'
+              ? 'project__archive_warning'
+              : 'project__delete_warning'
+          )}}
+        </div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t( 
+            dialogType === 'archive'
+              ? 'project__archive_warning_message'
+              : 'project__delete_warning_message'
+          )}}
+      </q-card-section>
+
+      <q-card-actions align="center">
+        <q-btn
+          flat
+          :label="$t('back')"
+          color="primary"
+          v-close-popup
+        />
+        <q-btn
+          flat
+          :label="$t(
+            dialogType === 'archive'
+              ? 'project__archive'
+              : 'project__delete'
+          )"
+          color="negative"
+          v-close-popup
+          @click="dialogType === 'archive' ? archiveProject() : deleteProject()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch, onMounted } from 'vue'
+  import { useRouter, useRoute  } from 'vue-router'
+  import { useProjectsStore } from 'stores/projects'
+  import { parseIntString } from 'boot/helpers'
+  
+  const router = useRouter()
+  const route = useRoute()
+  const projectsStore = useProjectsStore()
+
+  const expandProjectInfo = ref<boolean>(false)
+  const showDialog = ref<boolean>(false)
+  const dialogType = ref<null | 'archive' | 'delete'>(null)
+
+  const headerHeight = ref<number>(0)
+
+  const menuItems = [
+    { id: 1, title: 'project__edit', icon:  'mdi-square-edit-outline', iconColor:  '', func: editProject },
+    // { id: 2, title: 'project__backup', icon:  'mdi-content-save-outline', iconColor:  '', func: () => {} },
+    { id: 3, title: 'project__archive', icon:  'mdi-archive-outline', iconColor:  '', func:  () => { showDialog.value = true; dialogType.value = 'archive' }},
+    { id: 4, title: 'project__delete', icon:  'mdi-trash-can-outline', iconColor:  'red', func:  () => { showDialog.value = true; dialogType.value = 'delete' }},
+  ]
+
+  const projectId = computed(() => parseIntString(route.params.id))
+  const project =ref({
+    name: '',
+    description: '',
+    logo: ''
+  })
+
+  const loadProjectData = async () => {
+  if (!projectId.value) {
+    await abort()
+    return
+  } else {
+    const projectFromStore = projectsStore.projectById(projectId.value)
+    if (!projectFromStore) {
+      await abort()
+      return
+    }
+
+    project.value = {
+      name: projectFromStore.name,
+      description: projectFromStore.description || '',
+      logo: projectFromStore.logo || ''
+    }
+  }
+}
+
+async function abort () {
+  await router.replace({ name: 'projects' })
+}
+
+async function editProject () {
+  await router.push({ name: 'project_info' })
+}
+
+function archiveProject () {
+  console.log('archive project')
+}
+
+function deleteProject () {
+  console.log('delete project')
+}
+
+function toggleExpand () {
+  expandProjectInfo.value = !expandProjectInfo.value
+}
+
+interface sizeParams {
+    height: number,
+    width: number
+  }
+
+function onResize (size :sizeParams) {
+  headerHeight.value = size.height
+}
+
+watch(projectId, loadProjectData)
+
+watch(showDialog, () => {
+  if (showDialog.value === false) dialogType.value = null
+})
+
+onMounted(() => loadProjectData())
+
+</script>
+
+<style>
+</style>

src/pages/project-page/ProjectPagePersons.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="q-pa-none flex column col-grow no-scroll">
+    <pn-scroll-list>
+      <template #card-body-header>
+        <div class="flex row q-ma-md justify-between">
+          <q-input
+            v-model="search"
+            clearable
+            clear-icon="close"
+            :placeholder="$t('project_persons__search')"
+            dense
+            class="col-grow"
+            >
+            <template #prepend>
+              <q-icon name="mdi-magnify" />
+            </template>
+          </q-input>
+        </div>
+      </template>
+
+      <q-list separator>
+        <q-item
+          v-for="item in displayPersons"
+          :key="item.id"
+          v-ripple
+          clickable
+          @click="goPersonInfo()"
+          >
+          <q-item-section avatar>
+            <q-avatar>
+              <img v-if="item.logo" :src="item.logo"/>
+              <pn-auto-avatar v-else :name="item.name"/>
+            </q-avatar>
+          </q-item-section>
+          <q-item-section>
+            <q-item-label lines="1" class="text-bold">
+              {{item.name}}
+            </q-item-label>
+            <q-item-label caption lines="2">
+              <span>{{item.tname}}</span>
+              <span class="text-blue q-ml-sm">{{item.tusername}}</span>
+            </q-item-label>
+            <q-item-label lines="1">
+            {{ item.company.name +', ' + item.role }}
+            </q-item-label>
+          </q-item-section>
+        </q-item>
+      </q-list>
+    </pn-scroll-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+  import { useRouter } from 'vue-router'
+  defineOptions({ inheritAttrs: false })
+
+  const router = useRouter()
+  const search = ref('')
+
+  const persons = [
+      {id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: {id: "com11", name: 'Рога и копытца', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false }},
+      {id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта', company: {id: "com11", name: 'Рога и копытца', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false }},
+      {id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор', company: {id: "com21", name: 'ООО "Василек"', logo: '', qtyPersons: 2, masked: true }},
+      {id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик', company: {id: "com21", name: 'ООО "Василек"', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', qtyPersons: 2, masked: true }},
+    ]
+
+  const displayPersons = computed(() => {
+    if (!search.value || !(search.value && search.value.trim())) return persons
+    const searchValue = search.value.trim().toLowerCase()
+    const arrOut = persons
+      .filter(el =>
+        el.name.toLowerCase().includes(searchValue) ||
+        el.tname && el.tname.toLowerCase().includes(searchValue) ||
+        el.tusername && el.tusername.toLowerCase().includes(searchValue) ||
+        el.role && el.role.toLowerCase().includes(searchValue) ||
+        el.company.name && el.company.name.toLowerCase().includes(searchValue)
+      )
+    return arrOut
+  })
+
+  async function goPersonInfo () {
+    console.log('update')
+    await router.push({ name: 'person_info' })
+  }
+
+</script>
+
+<style>
+</style>