v3

src/components/admin/account-page/qtyChatCard.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="qty-card glossy text-white flex column items-center q-ma-xs"
+    class="qty-card glossy text-white flex column items-center"
     :style="{ backgroundColor: bgColor }"
     >
     <div class="qty-card-title q-pa-none text-caption col-grow">

src/components/admin/accountHelper.vue

@@ -81,7 +81,6 @@
   const password = ref<string>('')
 
   async function goProjects() {
-    console.log('go to projects')
     await router.push({ name: 'projects' })
   }
 </script>

src/components/admin/project-page/ProjectPageChats.vue

@@ -64,49 +64,59 @@
       </q-list>
 
     </pn-scroll-list>
-    <q-page-sticky
+
+
+  </div>
+
+  <q-page-sticky
+      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
       position="bottom-right"
       :offset="[18, 18]"
-      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
       >
+      <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"
+            v-if="fixShowFab"
+            icon="add"
+            color="brand"
+            direction="up"
+            vertical-actions-align="right"
+            @click="showOverlay = !showOverlay"
             >
-            <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-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 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-item-section>
+                </q-item>
+              </template>
+            </q-fab-action>
+      
         </q-fab>
+      </transition>
     </q-page-sticky>
+
     <pn-overlay  v-if="showOverlay"/>
-  </div>
   <q-dialog v-model="showDialogDeleteChat" @before-hide="onDialogBeforeHide()">
     <q-card class="q-pa-none q-ma-none">
       <q-card-section align="center">
@@ -138,9 +148,13 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  import { ref, computed, watch } from 'vue'
   import { useChatsStore } from 'stores/chats'
 
+  const props = defineProps<{
+    showFab: boolean
+  }>()
+
   const search = ref('')
   const showOverlay = ref<boolean>(false)
   const chatsStore = useChatsStore()
@@ -200,15 +214,17 @@
     currentSlideEvent.value = null
   }
 
-  const showFab = ref(false)
+  // fix fab jumping
+  const fixShowFab = ref(true)
+  const showFabFixTrue = () => fixShowFab.value = true
 
-  onMounted(() => {
-    setTimeout(() => showFab.value = true, 500) 
-  })
-
-  onUnmounted(() => {
-    showFab.value = false
-  })
+  watch(() => props.showFab, (newVal) => {
+    const timerId = setTimeout(showFabFixTrue, 700)
+    if (newVal === false) {
+      clearTimeout(timerId)
+      fixShowFab.value = false
+    }
+  }, {immediate: true})
 </script>
 
 <style scoped>
@@ -231,4 +247,10 @@
     align-self: center;
     height: 98%;
   }
+
+  .fix-fab {
+    top: calc(100vh - 92px);
+    left: calc(100vw - 92px);
+    padding: 18px;
+  }
 </style>

src/components/admin/project-page/ProjectPageCompanies.vue

@@ -58,13 +58,18 @@
       position="bottom-right"
       :offset="[18, 18]"
       >
+      <transition
+        appear
+        enter-active-class="animated slideInUp"
+        >
         <q-btn
+          v-if="fixShowFab"
           fab 
           icon="add"
           color="brand"
           @click="createCompany()"
-          v-if="showFab"
         />
+      </transition>
     </q-page-sticky>
   </div>
   <q-dialog v-model="showDialogDeleteCompany" @before-hide="onDialogBeforeHide()">
@@ -98,11 +103,15 @@
 </template>
     
 <script setup lang="ts">
-  import { ref, computed, onMounted, onUnmounted } from 'vue'
+  import { ref, computed, watch } from 'vue'
   import { useRouter, useRoute  } from 'vue-router'
   import { useCompaniesStore } from 'stores/companies'
   import { parseIntString } from 'boot/helpers'
 
+  const props = defineProps<{
+    showFab: boolean
+  }>()
+  
   const router = useRouter()
   const route = useRoute()
   const companiesStore = useCompaniesStore()
@@ -159,15 +168,17 @@
     currentSlideEvent.value = null
   }
 
-  const showFab = ref(false)
+  // fix fab jumping
+  const fixShowFab = ref(false)
+  const showFabFixTrue = () => fixShowFab.value = true
 
-  onMounted(() => {
-    setTimeout(() => showFab.value = true, 500) 
-  })
-
-  onUnmounted(() => {
-    showFab.value = false
-  })
+  watch(() => props.showFab, (newVal) => {
+    const timerId = setTimeout(showFabFixTrue, 500)
+    if (newVal === false) {
+      clearTimeout(timerId)
+      fixShowFab.value = false
+    }
+  }, {immediate: true})
 
 </script>
 

src/components/admin/project-page/ProjectPagePersons.vue

@@ -53,6 +53,7 @@
 <script setup lang="ts">
   import { ref, computed } from 'vue'
   import { useRouter } from 'vue-router'
+  defineOptions({ inheritAttrs: false })
 
   const router = useRouter()
   const search = ref('')

src/pages/AccountChangeEmailPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="col-grow">
+        {{$t('account__change_password')}}
+      </div>
+    </template>
+    <pn-scroll-list>
+      <account-helper :type />
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import accountHelper from 'components/admin/accountHelper.vue'
+  const type = 'change'
+</script>

src/pages/AccountChangePasswordPage.vue

@@ -0,0 +1,17 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="col-grow">
+        {{$t('account__change_password')}}
+      </div>
+    </template>
+    <pn-scroll-list>
+      <account-helper :type />
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import accountHelper from 'components/admin/accountHelper.vue'
+  const type = 'change'
+</script>

src/pages/AccountPage.vue

@@ -19,258 +19,70 @@
             </span>
           </div>
         </div>
+        <q-btn flat icon="mdi-logout"/>
       </div>
     </template>
 
     <pn-scroll-list>
-      <div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
-        <div class="flex w100 justify-between items-center q-pl-sm">
-          <div class="text-caption text-bold">
-            {{ $t('account__user_settings') }}</div>
-          <q-btn
-            @click = "goProjects()"
-            flat round
-            color="primary"
-            icon="mdi-check"
-          />
-        </div>
-        <q-transition-group
-          tag="div"
-          class="flex w100 company-container"
-          enter-active-class="animate__animated animate__fadeIn"
-          leave-active-class="animate__animated animate__fadeOut"
-          appear
+      <q-list separator>
+        <q-item
+          v-for="item in items"
+          :key="item.id"
+          @click="goTo(item.pathName)"
+          clickable
+          v-ripple
           >
-          <template v-if="company">
-            <pn-image-selector
-              key="image"
-              class="q-mr-sm company-logo"
-              :size="40"
-              :iconsize="40"
-            />
-          </template>
-
-          <q-input
-            key="input"
-            v-model="company"
-            dense
-            filled
-            class="q-mb-md col-grow company-input"
-            :label="$t('account__your_company')"
-            :style="{ marginLeft: !company ? '0' : '48px', transition: 'all 0.3s' }"
-          />
-        </q-transition-group>
-        <q-expansion-item
-          dense
-          id="warning"
-          class="q-mt-sm w100 q-pa-sm"
-          style="border: solid 1px var(--q-warning)"
-          >
-          <template #header>
-            <q-item-section>
-              <div class="flex row w100 items-center">
-                <q-icon name="mdi-alert-decagram-outline" color="warning " size="sm" />
-                <span class="q-pl-xs">{{$t('account__change_auth')}}</span>
-              </div>
+            <q-item-section avatar>
+              <q-avatar
+                :icon="item.icon"
+                :color="item.iconColor ? item.iconColor: 'brand'"
+                text-color="white"
+                rounded
+                font-size ="26px"
+              />
             </q-item-section>
-          </template>
-          <q-card class="q-pa-none">
-            <q-card-section class="q-pa-sm">
-              <div class="flex justify-center column">
-                <span>{{$t('account__change_auth_message_1')}}</span>
-                <span>{{$t('account__change_auth_message_2')}}</span>
-                <div class="flex justify-end">
-                  <q-btn
-                    @click="showChangeAuthDialog = true"
-                    flat
-                    color="primary"
-                    no-caps
-                    class="q-pb-none"
-                    >
-                    {{$t('account__change_auth_btn')}} &#9658;
-                  </q-btn>
-                </div>
-              </div>
-            </q-card-section>
-          </q-card>
-        </q-expansion-item>
-
-        <div id="qty_chats" class="flex column q-pt-lg w100 q-pl-sm">
-          <div class="text-caption text-bold flex items-center">
-            <span>{{ $t('account__chats') }}</span>
-          </div>
-          <div class="flex row justify-between">
-            <qty-chat-card
-              v-for = "chat in chats"
-              :key = chat.title
-              :qty = chat.qty
-              :bgColor = chat.color
-              :title = chat.title
-            />
-          </div>
-        </div>
-
-        <div id="subscribe" class="flex column q-pt-lg w100 q-pl-sm">
-          <div class="text-caption text-bold">
-            {{ $t('account__subscribe') }}
-          </div>
-
-            <q-item class="q-pa-sm text-caption">
-              <q-item-section
-                avatar
-                class="q-pr-none"
-                :style="{ minWidth: 'inherit !important' }"
-                >
-                <q-icon name = "mdi-crown-circle-outline" color="orange" size="md"/>
-              </q-item-section>
-              <q-item-section class="q-pl-sm">
-                <span>{{ $t('account__subscribe_info') }}</span>
-                <span>{{ $t('account__subscribe_select_payment_1') }}</span>
-              <q-icon name = "mdi-star" class="text-orange" size="sm"/>
-              <span>{{ $t('account__subscribe_select_payment_2') }}</span>
-              </q-item-section>
-            </q-item>
-          
-          <div class="flex w100 justify-between items-center no-wrap q-pt-sm">
-            <div class="flex column">
-              <div>
-                {{ $t('account__subscribe_current_balance') }}
-              </div>
-            </div>
-
-            <div class="flex items-center">
-              <q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
-              <div class="text-bold q-pa-xs text-h6">
-                50
-              </div>
-              
-            </div>
-          </div>
-      
-          <div id="payment-selector">
-            <div class="q-py-sm">
-              
-            </div>
-            <q-list>
-              <q-item
-              v-for="item in payment"
-              :key="item.id"
-              >
-                <q-radio
-                v-model="paymentSelect"
-                :val="item.stars"
-                dense
-                >
-                  <option-payment
-                    :qty="item.qty"
-                    :stars="item.stars"
-                    :discount="item.discount"
-                  />
-                </q-radio>
-              </q-item>
-            </q-list>
-
-          </div>
-        </div>
-      </div>
+            <q-item-section>
+              <q-item-label>
+                {{ $t(item.name) }}
+              </q-item-label>
+              <q-item-label class="text-caption">
+                {{ $t(item.description) }}
+              </q-item-label>
+            </q-item-section>
+        </q-item>
+      </q-list>
     </pn-scroll-list>
-
-    <q-dialog v-model="showChangeAuthDialog">
-      <q-card>
-        <q-card-section align="center">
-          <div class="text-h6 text-negative ">{{ $t('account__change_auth_warning') }}</div>
-        </q-card-section>
-
-        <q-card-section class="q-pt-none" align="center">
-          {{ $t('account__change_auth_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('continue')"
-            color="primary"
-            v-close-popup
-            @click="change_auth()"
-          />
-        </q-card-actions>
-      </q-card>
-    </q-dialog>
   </pn-page-card>
 </template>
 
 <script setup lang="ts">
-  import { ref, inject } from 'vue'
-  import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
-  import optionPayment from 'components/admin/account-page/optionPayment.vue'
+  import { inject, computed } from 'vue'
   import { useRouter } from 'vue-router'
-  import { useAuthStore } from 'stores/auth'
+  // import { useAuthStore } from 'stores/auth'
   import type { WebApp } from '@twa-dev/types'
 
   const router = useRouter()
-  const authStore = useAuthStore()
+  // const authStore = useAuthStore()
 
   const tg = inject('tg') as WebApp
   const tgUser = tg.initDataUnsafe.user
-  const company = ref<string>('')
-  const showChangeAuthDialog = ref<boolean>(false)
 
-  const chats = ref([
-    { title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
-    { title: 'account__chats_archive', qty: 2, color: 'grey' },
-    { title: 'account__chats_free', qty: 5, color: 'green' },
-    { title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
-  ])
-  const payment=ref([
-    { id: 1, qty: 50, stars: 200, discount: 0 },
-    { id: 2, qty: 120, stars: 400, discount: 20 },
-    { id: 3, qty: 220, stars: 500, discount: 30 }
-  ])
+  const items = computed(() => ([
+    { id: 1, name: 'account__subscribe', description: 'account__subscribe_description', icon: 'mdi-crown-circle-outline', iconColor: 'orange', pathName: 'subscribe' },
+    { id: 2, name: 'account__auth_change_method', description: 'account__auth_change_method_description', icon: 'mdi-account-sync-outline', iconColor: 'primary', pathName: '' },
+    { 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' }
+  ]))
 
-  const paymentSelect = ref(200)
-
-  async function change_auth () {
-    console.log('update')
-    console.log(authStore)
-    await router.push({ name: 'login' })
-  }
-
-  async function goProjects () {
-    await router.push({ name: 'projects' })
+  async function goTo (path: string) {
+    await router.push({ name: path })
   }
 
 </script>
 
 <style lang="scss">
-  #warning {
-    & >div .q-item {
-      padding: 0 !important;
-    }
-  }
 </style>
-
-<style scoped>
-  .company-container {
-    position: relative;
-    overflow: hidden;
-    min-height: 60px;
-  }
-
-  .company-logo {
-    position: absolute;
-    left: 0;
-    z-index: 1;
-  }
-
-
-  :deep(.animate__animated) {
-    --animate-duration: 0.4s;
-    animation-fill-mode: both;
-  }
-</style>

src/pages/CompanyMaskPage.vue

@@ -19,11 +19,8 @@
             </div>
           </q-item-section>
           <q-item-section></q-item-section>
-          <q-item-section align="end">
+          <q-item-section align="end" class="col-grow">
             {{ $t('mask__title_table') }}
-            <span class="text-caption">
-              {{ $t('mask__title_table2') }}
-            </span>
           </q-item-section>
         </q-item>
         <q-item
@@ -91,7 +88,10 @@
     <q-dialog v-model="showDialogHelp">
       <q-card class="q-ma-sm w100">
         <q-card-section class="row items-center q-pb-none">
-          <div class="text-h6">{{ $t('mask__help_title')}}</div>
+          <span class="text-h6">
+            <q-icon name="mdi-drama-masks"/>
+            {{ $t('mask__help_title')}}
+          </span>
           <q-space />
           <q-btn icon="close" flat round dense v-close-popup />
         </q-card-section>

src/pages/CompanyYourPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('Your_company__title_card')}}
+        </div>
+        <q-btn
+          v-if="(Object.keys(companyMod).length !== 0)"
+          @click = "addCompany(companyMod)"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+    <pn-scroll-list>
+      <company-info-block v-model="companyMod"/>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import { useCompaniesStore } from 'stores/companies'
+  import type { Company } from 'src/types'
+
+  const router = useRouter()
+  const companiesStore = useCompaniesStore()
+
+  const companyMod = ref(<Company>{})
+  
+  function addCompany (data: Company) {
+    companiesStore.addCompany(data)
+    router.go(-1)
+  }
+
+</script>

src/pages/PrivacyPage.vue

@@ -0,0 +1,22 @@
+<template>
+    <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{ $t('privacy__title') }}
+        </div>
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      {{ $t('under_construction') }}
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style>
+</style>

src/pages/ProjectPage.vue

@@ -7,6 +7,9 @@
     <q-tab-panels
       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
@@ -16,17 +19,18 @@
         class="q-pa-none flex column col-grow no-scroll"
         style="flex-grow: 2"
         >
-        <component :is="tab.component"/>
+        <component :is="tab.component" :showFab = "tab.name === tabSelect" />
       </q-tab-panel>
     </q-tab-panels>
 
     <template #footer>
-      <q-footer class="bg-grey-1 text-grey"> 
+      <q-footer class="bg-grey-1 text-grey">
         <q-tabs
           style = "z-index: 1000"
           v-model="tabSelect"
           dense
           align="justify"
+          id="tabs"
           >
           <q-route-tab
             v-for="tab in tabs"
@@ -60,13 +64,18 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, computed } from 'vue'
+  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 { useRoute } from 'vue-router'
+
+  const route = useRoute()
+
+  const showFab = ref<boolean>(false)
+
   const projectStore = useProjectsStore()
   const currentProject = computed(() => projectStore.getCurrentProject() )
 
@@ -82,7 +91,12 @@
     {name: 'companies', label: 'project__companies', icon: 'mdi-account-group-outline', component: tabComponents.projectPageCompanies, to: { name: 'companies'} },
   ]
 
-  const tabSelect =  ref<string>(tabs[0]?.name ? tabs[0]?.name : '')
+  const tabSelect = ref<string>()
+
+  onBeforeMount(() => {
+    const initialTab = tabs.find(t => t.to.name === route.name)?.name || tabs[0]?.name || ''
+    tabSelect.value = initialTab
+  })
 
 </script>
 
@@ -101,4 +115,11 @@
     flex-grow: 2;
     width: 100%
   }
+
+</style>
+
+<style scoped>
+#tabs :deep(.q-tab__indicator) {
+  height: 3px !important;
+}
 </style>

src/pages/SubscribePage.vue

@@ -0,0 +1,82 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('subscribe__title')}}
+        </div>
+      </div>
+    </template>
+
+    <pn-scroll-list class="q-px-md">
+      <div id="subscribe-current-balance" class="flex w100 justify-between items-center no-wrap text-h6">
+        <span>
+          {{ $t('subscribe__current_balance') }}
+        </span>
+
+        <div class="flex items-center">
+          <q-icon name = "mdi-crown-circle-outline" color="orange" size="sm"/>
+          <div class="text-bold q-pa-xs ">
+            50
+          </div>
+        </div>
+      </div>
+      <div id="subscribe-need-tocken" :style = "{ borderLeft: 'solid 5px var(--q-info)' }" class="q-pl-sm">
+       <q-icon name = "mdi-crown-circle-outline" color="orange" size="xs"/>{{ $t('subscribe__token_formula') }}
+       <div class="text-caption">{{ $t('subscribe__token_formula_description') }}</div>
+      </div>
+      
+      <div id="qty_chats" class="flex column q-pt-lg w100">
+          <div class="text-h6 flex items-center">
+            <span>{{ $t('account__chats') }}</span>
+          </div>
+          <div class="flex row justify-between">
+            <qty-chat-card
+              v-for = "chat in chats"
+              :key = chat.title
+              :qty = chat.qty
+              :bgColor = chat.color
+              :title = chat.title
+            />
+          </div>
+        </div>
+
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref, inject, computed } 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 optionPayment from 'components/admin/account-page/optionPayment.vue'
+
+  // const router = useRouter()
+  // const authStore = useAuthStore()
+
+  // const tg = inject('tg') as WebApp
+  // const tgUser = tg.initDataUnsafe.user
+
+  const chats = ref([
+    { title: 'account__chats_active', qty: 8, color: 'var(--q-primary)' },
+    { title: 'account__chats_unbound', qty: 2, color: 'grey' },
+    { title: 'account__chats_free', qty: 5, color: 'green' },
+    { title: 'account__chats_total', qty: 15, color: 'var(--q-info)' },
+  ])
+
+  /* const payment=ref([
+    { id: 1, qty: 50, stars: 200, discount: 0 },
+    { id: 2, qty: 120, stars: 400, discount: 20 },
+    { id: 3, qty: 220, stars: 500, discount: 30 }
+  ]) */
+
+
+
+
+
+</script>
+
+<style lang="scss">
+</style>

src/pages/TermsPage.vue

@@ -9,7 +9,7 @@
     </template>
 
     <pn-scroll-list>
-      Фигня которую никто не читает!
+      {{ $t('under_construction') }}
     </pn-scroll-list>
   </pn-page-card>
 </template>

src/router/index.ts

@@ -33,7 +33,7 @@ export default defineRouter(function (/* { store, ssrContext } */) {
     history: createHistory(process.env.VUE_ROUTER_BASE),
   })
   
-  const publicPaths = ['/login', '/terms-of-use', '/create-account', '/recovery-password']
+  const publicPaths = ['/login', '/create-account', '/recovery-password']
 
   Router.beforeEach(async (to) => {
     const authStore = useAuthStore()

src/router/routes.ts

@@ -27,7 +27,7 @@ const routes: RouteRecordRaw[] = [
       {
         name: 'project_add',
         path: '/project/add',
-        component: () => import('pages/CreateProjectPage.vue')
+        component: () => import('pages/ProjectCreatePage.vue')
       },
     
       {
@@ -94,9 +94,38 @@ const routes: RouteRecordRaw[] = [
        {
         name: 'create_account',
         path: '/create-account',
-        component: () => import('pages/CreateAccountPage.vue') 
+        component: () => import('src/pages/AccountCreatePage.vue') 
+       },
+       {
+        name: 'change_account_password',
+        path: '/change-password',
+        component: () => import('pages/AccountChangePasswordPage.vue') 
+       },
+       {
+        name: 'change_account_email',
+        path: '/change-email',
+        component: () => import('pages/AccountChangeEmailPage.vue') 
+       },
+       {
+        name: 'subscribe',
+        path: '/subscribe',
+        component: () => import('pages/SubscribePage.vue') 
+       },
+       {
+        name: 'terms',
+        path: '/terms-of-use',
+        component: () => import('pages/TermsPage.vue') 
+       },
+       {
+        name: 'privacy',
+        path: '/privacy',
+        component: () => import('pages/PrivacyPage.vue') 
+       },
+       {
+        name: 'your_company',
+        path: '/your-company',
+        component: () => import('src/pages/CompanyYourPage.vue') 
        },
-
        {
         name: 'login',
         path: '/login',
@@ -106,13 +135,13 @@ const routes: RouteRecordRaw[] = [
        {
         name: 'recovery_password',
         path: '/recovery-password',
-        component: () => import('pages/ForgotPasswordPage.vue') 
+        component: () => import('src/pages/AccountForgotPasswordPage.vue') 
        },
 
        {
         name: 'add_company',
         path: '/add-company',
-        component: () => import('pages/CreateCompanyPage.vue') 
+        component: () => import('src/pages/CompanyCreatePage.vue') 
        },
 
        {
@@ -125,12 +154,6 @@ const routes: RouteRecordRaw[] = [
         name: 'settings',
         path: '/settings',
         component: () => import('pages/SettingsPage.vue') 
-       },
-
-       {
-        name: 'terms',
-        path: '/terms-of-use',
-        component: () => import('pages/TermsPage.vue') 
        }
     ]
   },