first commit

src/pages/AccountPage.vue

@@ -0,0 +1,246 @@
+<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 size="48px" class="q-mr-xs">
+            <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+          </q-avatar>
+          <div class="flex column">
+            <span class="q-ml-xs text-h5">
+              Alex mart
+            </span>
+            <span class="q-ml-xs text-caption">
+              @alexmart80
+            </span>
+          </div>
+
+        </div>
+        <q-btn
+          @click = "goProjects()"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <div class="w100 flex column items-center q-pb-md q-pt-sm q-px-md" >
+        <div class="text-caption text-bold self-start q-pl-sm q-pb-sm">
+          {{ $t('account__user_settings') }}
+        </div>
+        <div class="flex w100">
+        <q-input
+          v-model="company"
+          dense
+          filled
+          class = "q-mb-md q-mr-md col-grow"
+          :label = "$t('account__your_company')"
+        />
+        <pn-image-selector v-if="company" :size="40" :iconsize="40"/>
+        
+        </div>
+        <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>
+          </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>
+            <q-icon name = "mdi-message-outline" class="q-ma-xs"/>
+          </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>
+          <div 
+            class="bg-info q-pa-sm text-white"
+            :style="{ borderRadius: '5px' }"
+            >
+            <q-item class="q-pa-none q-ma-none">
+              <q-item-section
+                avatar
+                class="q-pr-none"
+                :style="{ minWidth: 'inherit !important' }"
+                >
+                <q-icon name = "mdi-message-plus-outline"  size="md"/>
+              </q-item-section>
+              <q-item-section class="q-pl-sm">
+                <span>{{ $t('account__subscribe_info') }}</span>
+              </q-item-section>
+            </q-item>
+          </div>
+
+          
+          <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 class="text-caption text-grey">
+                {{ $t('account__subscribe_about') }} 3 {{ $t('months') }}
+              </div>
+            </div>
+
+            <div class="flex items-center">
+              <div class="text-bold q-pa-sm text-h6">
+                50
+              </div>
+              <span class="text-grey">
+                <q-icon name = "mdi-message-outline"/>
+                <q-icon name = "mdi-close"/>
+                <span>
+                  {{ $t('month') }}
+                </span>
+              </span>
+            </div>
+          </div>
+      
+          <div id="payment-selector">
+            <div class="q-py-sm">
+              <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>
+            </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>
+    </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 } from 'vue'
+  import qtyChatCard from 'components/admin/account-page/qtyChatCard.vue'
+  import optionPayment from 'components/admin/account-page/optionPayment.vue'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter()
+
+  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 paymentSelect = ref(200)
+
+  async function change_auth () {
+    console.log('update')
+    await router.push({ name: 'login' })
+  }
+
+  async function goProjects () {
+    await router.push({ name: 'projects' })
+  }
+
+
+</script>
+
+<style lang="scss">
+  #warning {
+    & >div .q-item {
+      padding: 0 !important;
+    }
+  }
+
+
+</style>

src/pages/CompanyInfoPage.vue

@@ -0,0 +1,40 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('company_info__title_card')}}
+        </div>
+        <q-btn
+          v-if="!isObjEqual<Company | undefined>(companyFromStore, companyMod)"
+          @click = "companiesStore.updateCompany(companyId, companyMod)"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+    <pn-scroll-list>
+      <company-info-block v-model="companyMod"/>
+      <company-info-persons/>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRoute } from 'vue-router'
+  import companyInfoBlock from 'components/admin/companyInfoBlock.vue'
+  import companyInfoPersons from 'components/admin/companyInfoPersons.vue'
+  import { useCompaniesStore } from 'stores/companies'
+  import type { Company } from 'src/types'
+  import { isObjEqual } from 'boot/helpers'
+
+  const route = useRoute()
+  const companiesStore = useCompaniesStore()
+
+  const companyId = Number(route.params.id)
+  const companyFromStore = companiesStore.companyById(companyId)
+  const companyMod = ref({...(companyFromStore ? companyFromStore  : <Company>{})})
+  
+</script>
+

src/pages/CompanyMaskPage.vue

@@ -0,0 +1,157 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="col-grow">
+        {{$t('company__mask')}}
+      </div>
+    </template>
+    <pn-scroll-list>
+      <template #card-body-header>
+        <div style="min-height: var(--top-raduis);"/>
+      </template>
+      <q-list
+        separator
+        >
+        <q-item>
+          <q-item-section>
+            <div>
+              <q-btn flat round color="primary" icon="mdi-help-circle-outline" @click="showDialogHelp = true" />
+            </div>
+          </q-item-section>
+          <q-item-section></q-item-section>
+          <q-item-section align="end">
+            {{ $t('mask__title_table') }}
+            <span class="text-caption">
+              {{ $t('mask__title_table2') }}
+            </span>
+          </q-item-section>
+        </q-item>
+        <q-item
+          v-for = "company in companies"
+          :key="company.id"
+          class="w100"
+          >
+          <q-item-section>
+            <q-checkbox
+              v-model="company.masked"
+              :label="company.name"
+              unchecked-icon="mdi-drama-masks"
+              checked-icon="mdi-drama-masks"
+              :class="company.masked ? 'masked' : 'unmasked'"
+            />
+          </q-item-section>
+          <q-item-section>
+            <q-select
+              v-if="company.masked"
+              v-model="company.unmasked"
+              multiple
+              :options="companiesSelect(company.id)"
+              dense
+              borderless
+              dropdown-icon="mdi-plus"
+              class="fix-select"
+              >
+              <template #selected>
+                <div
+                  v-for="(comp, idx) in company.unmasked"
+                  :key=idx
+                  class="q-pa-xs"
+                  >
+                  <q-avatar rounded size="md">
+                    <img v-if="comp['logo']" :src="comp['logo']"/>
+                    <pn-auto-avatar v-else :name="comp['name']"/>
+                  </q-avatar>
+                </div>
+              </template>
+              <template #option="scope">
+                <q-item v-bind="scope.itemProps">
+                  <q-item-section avatar>
+                    <q-avatar rounded size="md">
+                      <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
+                      <pn-auto-avatar v-else :name="scope.opt.name"/>
+                    </q-avatar>   
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label>{{ scope.opt.name }}</q-item-label>
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-select>
+          </q-item-section>
+        </q-item>
+        <q-item 
+          class="q-pa-none q-ma-none"
+          style="min-height: 18px"
+          >
+          <div class="q-py-none flex column w100"/>
+        </q-item>
+      </q-list>
+    </pn-scroll-list>
+    
+    <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>
+          <q-space />
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section class="q-pt-sm">
+          {{ $t('mask__help_message')}}
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </pn-page-card>
+</template>
+    
+<script setup lang="ts">
+  import { ref } from 'vue'
+  // import { useCompaniesStore } from 'src/stores/companies'
+
+  const showDialogHelp = ref<boolean>(false)
+  // const companiesStore =  useCompaniesStore()
+
+  // const companies = computed(() => companiesStore.companies)
+
+  const companies = ref([
+    {id: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
+    {id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
+    {id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+  ])
+
+  function companiesSelect (id :string) {
+    return  companies.value
+      .map(el => ({
+        id: el.id,
+        name: el.name,
+        logo: el.logo 
+      }))
+      .filter(el => el.id !== id)
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+  :deep(.fix-select .q-field__control) {
+    align-items: center;
+  }
+
+  :deep(.fix-select .q-icon) {
+    color: $green-14 !important;
+  }
+
+  :deep(.masked .q-icon) {
+    color: red;
+    opacity: 1;
+  }
+
+  :deep(.unmasked .q-icon) {
+    color: grey;
+    opacity: 0.5;
+  }
+</style>
+

src/pages/CreateAccountPage.vue

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

src/pages/CreateCompanyPage.vue

@@ -0,0 +1,39 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('company_create__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/CreateProjectPage.vue

@@ -0,0 +1,44 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{$t('project_card__add_project')}}
+        </div>
+        <q-btn
+          v-if="(Object.keys(project).length !== 0)"
+          @click = "addProject(project)"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+    <pn-scroll-list>
+      <project-info-block v-model="project"/>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+  import { useProjectsStore } from 'stores/projects'
+  import type { ProjectParams } from 'src/types'
+
+
+  const router = useRouter()
+  const projectsStore = useProjectsStore()
+  const project = ref<ProjectParams>({
+    name: '',
+    logo: '',
+    description: '',
+    logo_as_bg: false
+  })
+
+ async function addProject (data: ProjectParams) {
+    const newProject = projectsStore.addProject(data)
+    await router.push({name: 'chats', params: { id: newProject.id}})
+  }
+
+</script>

src/pages/ErrorNotFound.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="fullscreen bg-blue text-white text-center q-pa-md flex flex-center">
+    <div>
+      <div style="font-size: 30vh">
+        404
+      </div>
+
+      <div class="text-h2" style="opacity:.4">
+        Oops. Nothing here...
+      </div>
+
+      <q-btn
+        class="q-mt-xl"
+        color="white"
+        text-color="blue"
+        unelevated
+        to="/"
+        label="Go Home"
+        no-caps
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+//
+</script>

src/pages/ForgotPasswordPage.vue

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

src/pages/LoginPage.vue

@@ -0,0 +1,177 @@
+<template>
+  <q-page class="flex column items-center justify-between">
+
+    <q-card
+      id="login_block"
+      flat
+      class="flex column items-center w80 justify-between q-py-lg login-card "
+      >
+      <login-logo
+        class="col-grow q-pa-md"
+        :style="{ alignItems: 'flex-end' }"
+    />
+
+      <div class = "q-ma-md flex column input-login">
+        <q-input
+          v-model="login"
+          dense
+          filled
+          class = "q-mb-md"
+          :label = "$t('login__email')"
+          :rules="['email']"
+        />
+
+        <q-input
+          v-model="password"
+          dense
+          filled
+          :label = "$t('login__password')"
+          class = "q-mb-md"
+          :type="isPwd ? 'password' : 'text'"
+          >
+          <template #append>
+            <q-icon
+              color="grey-5"
+              :name="isPwd ? 'mdi-eye-off-outline' : 'mdi-eye-outline'"
+              class="cursor-pointer"
+              @click="isPwd = !isPwd"
+            />
+          </template>
+        </q-input>
+
+        <div class="self-end">
+          <q-btn
+            @click="forgotPwd"
+            flat
+            no-caps
+            dense
+            class="text-grey"
+            >
+              {{$t('login__forgot_password')}}
+          </q-btn>
+        </div>
+      </div>
+      <q-btn
+        @click="sendAuth"
+        color="primary"
+        :disabled="!acceptTermsOfUse"
+        >
+        {{$t('login__sign_in')}}
+      </q-btn>
+      <div class="q-pt-lg">
+        <q-btn
+          flat
+          sm
+          no-caps
+          color="primary"
+          @click="createAccount()"
+          >
+          {{$t('login__register')}}
+        </q-btn>
+      </div>
+    
+      <div
+        id="alt_login"
+        class="w80 q-flex column items-center q-pt-xl"
+        >
+        <div
+          class="orline w100 text-grey"
+          >
+          <span class="q-mx-sm">{{$t('login__or_continue_as')}}</span>
+        </div>
+        <q-btn
+          flat
+          sm
+          no-caps
+          color="primary"
+          :disabled="!acceptTermsOfUse"
+          >
+          <span class="text-blue">
+            <q-icon name="telegram" size="md" class="q-mx-none text-blue"/>
+            Alex mart
+          </span>
+        </q-btn>
+      </div>
+    </q-card>
+
+    <div id="term-of-use" class="q-py-lg text-white q-flex row">
+      <q-checkbox
+        v-model="acceptTermsOfUse"
+        checked-icon="task_alt"
+        unchecked-icon="highlight_off"
+        :color="acceptTermsOfUse ? 'brand' : 'red'"
+        dense
+        keep-color
+      />
+      <span class="q-px-xs">
+        {{$t('login__accept_terms_of_use') + ' '}}
+      </span>
+      <span class="text-cyan-12">
+        {{$t('login__terms_of_use') }}
+      </span>
+    </div>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  import loginLogo from 'components/admin/login-page/loginLogo.vue'
+  // import { useI18n } from "vue-i18n"
+  const router = useRouter()
+  // const { t } = useI18n()
+
+  const login = ref<string>('')
+  const password = ref<string>('')
+  const isPwd = ref<boolean>(true)
+  const acceptTermsOfUse = ref<boolean>(true)
+
+  /* function rules () :Record<string, Array<(value: string) => boolean | string>> {
+    return {
+      email: [value => (value.length <= 25) || t('login__incorrect_email')]}
+  } */
+
+  async function sendAuth() {
+    console.log('1')
+    await router.push({ name: 'projects' })
+  }
+
+  async function forgotPwd() {
+    await router.push({ name: 'forgot_password' })
+  }
+
+  async function createAccount() {
+    await router.push({ name: 'create_account' })
+  }
+  
+</script>
+
+<style scoped>
+
+  .maxh15 {
+    max-height: calc(100Vh *0.15);
+  }
+
+  .input-login {
+    width: calc(100% * 0.8);
+    max-width: 300px;
+  }
+
+  .orline {
+    display: flex;
+    flex-direction: row;
+  }     
+
+  .orline:before,
+  .orline:after {
+      content: "";
+      flex: 1 1;
+      border-bottom: 1px solid;
+      margin: auto;
+  }
+
+  .login-card {
+    opacity: 0.9 !important;
+    border-radius: var(--top-raduis);
+  }
+</style>

src/pages/PersonInfoPage.vue

@@ -0,0 +1,112 @@
+<template>
+    <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          {{ $t('person_card__title') }}
+        </div>
+        <q-btn
+          @click = "goProject()"
+          flat round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <div class="flex column">
+        <div class="flex column items-center col-grow q-pa-lg">
+          <q-avatar size="100px">
+            <q-img :src="person.logo"/>
+          </q-avatar>
+          <div class="flex row items-start justify-center no-wrap">
+
+            <div class="flex column justify-center">
+              <div class="text-bold q-pr-xs text-center">{{ person.tname }}</div>
+              <div caption class="text-blue text-caption">{{ person.tusername }}</div>
+            </div>
+          </div>
+
+          <q-input
+            v-model="person.name"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__name')"
+          />
+
+          <q-select
+            v-if="companies"
+            v-model="person.company"
+            :options="companies"
+            dense
+            filled
+            class="q-my-sm w100"
+            :label = "$t('person_card__company')"
+            >
+            <template #option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section avatar>
+                  <q-avatar rounded size="md">
+                    <img v-if="scope.opt.logo" :src="scope.opt.logo"/>
+                    <pn-auto-avatar v-else :name="scope.opt.name"/>
+                  </q-avatar>   
+                </q-item-section>
+                <q-item-section>
+                  <q-item-label>{{ scope.opt.name }}</q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+            <template v-slot:selected>
+                {{ JSON.parse(JSON.stringify(person.company)).name }}
+            </template>
+          </q-select>
+
+          <q-input
+            v-model="person.department"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__department')"
+          />
+
+          <q-input
+            v-model="person.role"
+            dense
+            filled
+            class = "q-my-sm w100"
+            :label = "$t('person_card__role')"
+          />
+        </div>
+      </div>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+
+  const router = useRouter()
+
+  const person = ref({id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps', company: '', department: 'test' })
+
+  const companies = ref([
+    {id: "com11", value: "com11", name: 'Рога и копытца1', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: [] },
+    {id: "com21", name: 'ООО "Василек1"', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch13", name: 'Откат и деньги1', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "ch14", name: 'Откат и деньги2', logo: '', description: 'Договариваются о чем-то',  qtyPersons: 5, masked: false, unmasked: [] },
+    {id: "com111", name: 'Рога и копытца2', logo: '', description: 'Монтажники вывески', qtyPersons: 3, masked: false, unmasked: []},
+    {id: "com211", name: 'ООО "Василек2"', logo: '', qtyPersons: 2, masked: true, unmasked: [] },
+    {id: "ch131", name: 'Откат и деньги3', logo: '', description: 'Договариваются с администрацией',  qtyPersons: 5, masked: false, unmasked: [] },
+  ])
+
+
+  async function goProject () {
+
+    await router.push({ name: 'project' })
+  }
+</script>
+
+<style lang="scss">
+</style>

src/pages/ProjectInfoPage.vue

@@ -0,0 +1,62 @@
+<template>
+  >>{{ project }}
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+        <div>
+          <span>{{ $t('project_card__project_card') }}</span>
+        </div>
+        <q-btn
+          @click="updateProject()"
+          flat
+          round
+          icon="mdi-check"
+        />
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <project-info-block v-if="project" v-model="project"/>
+    </pn-scroll-list>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useProjectsStore } from 'stores/projects'
+import projectInfoBlock from 'components/admin/projectInfoBlock.vue'
+import type { Project } from '../types'
+import { parseIntString } from 'boot/helpers'
+
+// import { isObjEqual } from '../boot/helpers'
+
+const router = useRouter()
+const route = useRoute()
+const projectsStore = useProjectsStore()
+
+const project = ref<Project>()
+const id = parseIntString(route.params.id)
+
+onMounted(async () => {
+    if (id && projectsStore.projectById(id)) {
+      project.value = projectsStore.projectById(id)
+    } else {
+      await abort()
+    }
+})
+
+function updateProject () {
+  if (id && project.value) {
+    projectsStore.updateProject(id, project.value)
+    router.back()
+  }
+}
+
+async function abort () {
+  await router.replace({name: 'projects'})
+}
+</script>
+
+<style>
+</style>

src/pages/ProjectPage.vue

@@ -0,0 +1,105 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <project-page-header/>
+    </template>
+
+    <q-tab-panels
+      v-model="tabSelect"
+      animated
+      class="tab-panel-color full-height-panel w100 flex column col-grow no-scroll"
+      >
+      <q-tab-panel
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        class="q-pa-none flex column col-grow no-scroll"
+        style="flex-grow: 2"
+        >
+        <component :is="tab.component"/>
+      </q-tab-panel>
+    </q-tab-panels>
+
+    <template #footer>
+      <q-footer class="bg-grey-1 text-grey"> 
+        <q-tabs
+          style = "z-index: 1000"
+          v-model="tabSelect"
+          dense
+          align="justify"
+          switch-indicator
+          >
+          <q-route-tab
+            v-for="tab in tabs"
+            :to="tab.to"
+            :name="tab.name"
+            :key="tab.name"
+            no-caps
+            dense
+            :class="tabSelect === tab.name ? 'active' : ''"
+            class="w100 flex column"
+            >
+            <template #default>
+              <div class="flex column items-center">
+                <q-icon :name="tab.icon" size="sm">
+                  <q-badge
+                    color="brand" align="top"
+                    rounded floating
+                    style="font-style: normal;"
+                    >
+                    {{ currentProject?.[tab.name as keyof typeof currentProject] ?? 0 }}
+                  </q-badge>
+                </q-icon>
+                <span>{{$t(tab.label)}}</span>
+              </div>
+            </template>
+          </q-route-tab>
+        </q-tabs>
+      </q-footer>
+    </template>
+  </pn-page-card>
+</template>
+
+<script setup lang="ts">
+  import { ref, 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'  
+  
+  const projectStore = useProjectsStore()
+  const currentProject = computed(() => projectStore.getCurrentProject() )
+
+  const tabComponents = {
+    projectPageChats,
+    projectPagePersons,
+    projectPageCompanies
+  }
+
+  const tabs = [
+    {name: 'chats', label: 'project__chats', icon: 'mdi-message-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'} },
+  ]
+
+  const tabSelect =  ref<string>(tabs[0]?.name ? tabs[0]?.name : '')
+
+</script>
+
+<style>
+  .active {
+    color: var(--q-primary)
+  }
+
+  .tab-panel-color {
+    background: transparent
+  }
+
+  .full-height-panel > .q-panel {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 2;
+    width: 100%
+  }
+</style>

src/pages/ProjectsPage.vue

@@ -0,0 +1,228 @@
+<template>
+  <pn-page-card>
+    <template #title>
+      <div class="flex items-center justify-between col-grow">
+
+        <div>{{ $t('projects__projects') }}</div>
+
+        <div class="flex items-center">
+          <q-btn
+            @click="goAccount()"
+            flat
+            no-caps
+            icon-right="mdi-chevron-right"
+            align="right"
+            dense
+            >
+            <div class="flex items-center">
+              <q-avatar size="32px">
+                <img src="https://cdn.quasar.dev/img/avatar2.jpg">
+              </q-avatar>
+              <div class="q-ml-xs ellipsis" style="max-width: 100px">
+                Alex mart
+              </div>
+            </div>
+          </q-btn>
+        </div>
+          
+      </div>
+    </template>
+
+    <pn-scroll-list>
+      <template #card-body-header>
+        <q-input
+          v-model="searchProject"
+          clearable
+          clear-icon="close"
+          :placeholder="$t('project_chats__search')"
+          dense
+          class="col-grow q-px-md q-py-md"
+          >
+          <template #prepend>
+            <q-icon name="mdi-magnify" />
+          </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>
+            </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">
+                    <q-icon name="mdi-message-outline" class="q-mr-sm"/>
+                    <span>{{ item.chats }} </span>
+                  </div>
+                  <div class="q-mr-sm">
+                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
+                    <span>{{ item.persons }}</span>
+                  </div>
+                  <div class="q-mx-sm">
+                    <q-icon name="mdi-account-group-outline" class="q-mr-sm"/>
+                    <span>{{ item.companies }} </span>
+                  </div>
+                </div>
+              </q-item-label>
+          </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_down">
+            <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-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>
+    </pn-scroll-list>
+
+    <q-page-sticky
+      position="bottom-right"
+      :offset="[18, 18]"
+      >
+      <q-btn
+        fab 
+        icon="add"
+        color="brand"
+        @click="createNewProject"
+        />
+    </q-page-sticky>
+  </pn-page-card>
+  <q-dialog v-model="showDialogArchive">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">{{ $t('projects__restore_archive_warning') }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t('projects__restore_archive_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="restoreFromArchive()"
+        />
+      </q-card-actions>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup lang="ts">
+  import { ref, computed, watch } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useProjectsStore } from 'stores/projects'
+
+  const router = useRouter()
+  const projectsStore = useProjectsStore()
+  const projects = projectsStore.projects
+
+  const searchProject = ref('')
+  const showArchive = ref(false)
+  const showDialogArchive = ref(false)
+  const archiveProjectId = ref<number | undefined> (undefined)
+
+  async function goProject (id: number) {
+    await router.push({ name: 'chats', params: { id }})
+  }
+
+  async function goAccount () {
+    await router.push({ name: 'account' })
+  }
+
+  async function createNewProject () {
+    await router.push({ name: 'project_add' })
+  }
+
+  function handleArchiveList (id: number) {
+    showDialogArchive.value = true
+    archiveProjectId.value = id
+  }
+
+  function restoreFromArchive () {
+    if (archiveProjectId.value) {
+      const projectTemp = projectsStore.projectById(archiveProjectId.value)
+      if (projectTemp) {
+        projectTemp.is_archive = false
+        projectsStore.updateProject(archiveProjectId.value, projectTemp)
+      }
+    }
+  }
+
+  const displayProjects = computed(() => {
+    if (!searchProject.value || !(searchProject.value && searchProject.value.trim())) return projects
+    const searchChatValue = searchProject.value.trim().toLowerCase()
+    const arrOut = projects
+      .filter(el =>
+        el.name.toLowerCase().includes(searchChatValue) ||
+        el.description && el.description.toLowerCase().includes(searchProject.value)
+      )
+    return arrOut
+  })
+
+  const activeProjects = computed(() => {
+    return displayProjects.value.filter(el => !el.is_archive)
+  })
+
+  const archiveProjects = computed(() => {
+    return displayProjects.value.filter(el => el.is_archive)
+  })
+
+  watch(showDialogArchive, (newD :boolean) => {
+    if (!newD) archiveProjectId.value = undefined
+  })
+
+</script>
+
+<style>
+</style>