first commit

.editorconfig

@@ -0,0 +1,7 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

.gitattributes

@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,33 @@
+.DS_Store
+.thumbs.db
+node_modules
+
+# Quasar core related directories
+.quasar
+/dist
+/quasar.config.*.temporary.compiled*
+
+# Cordova related directories and files
+/src-cordova/node_modules
+/src-cordova/platforms
+/src-cordova/plugins
+/src-cordova/www
+
+# Capacitor related directories and files
+/src-capacitor/www
+/src-capacitor/node_modules
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+
+# local .env files
+.env.local*

.npmrc

@@ -0,0 +1,5 @@
+# pnpm-related options
+shamefully-hoist=true
+strict-peer-dependencies=false
+# to get the latest compatible packages when creating the project https://github.com/pnpm/pnpm/issues/6463
+resolution-mode=highest

.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "editorconfig.editorconfig",
+    "vue.volar",
+    "wayou.vscode-todo-highlight"
+  ],
+  "unwantedRecommendations": [
+    "octref.vetur",
+    "hookyqr.beautify",
+    "dbaeumer.jshint",
+    "ms-vscode.vscode-typescript-tslint-plugin"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,16 @@
+{
+  "editor.bracketPairColorization.enabled": true,
+  "editor.guides.bracketPairs": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+  "editor.codeActionsOnSave": [
+    "source.fixAll.eslint"
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "vue"
+  ],
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,32 @@
+# projectsnode (projectsnode)
+
+telegram miniapp
+
+## Install the dependencies
+```bash
+yarn
+# or
+npm install
+```
+
+### Start the app in development mode (hot-code reloading, error reporting, etc.)
+```bash
+quasar dev
+```
+
+
+### Lint the files
+```bash
+yarn lint
+# or
+npm run lint
+```
+
+
+### Build the app for production
+```bash
+quasar build
+```
+
+### Customize the configuration
+See [Configuring quasar.config.js](https://v2.quasar.dev/quasar-cli-vite/quasar-config-js).

eslint.config.js

@@ -0,0 +1,96 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import pluginVue from 'eslint-plugin-vue'
+import pluginQuasar from '@quasar/app-vite/eslint'
+import vueTsEslintConfig from '@vue/eslint-config-typescript'
+
+export default [
+  {
+    /**
+     * Ignore the following files.
+     * Please note that pluginQuasar.configs.recommended() already ignores
+     * the "node_modules" folder for you (and all other Quasar project
+     * relevant folders and files).
+     *
+     * ESLint requires "ignores" key to be the only one in this object
+     */
+    // ignores: []
+  },
+
+  ...pluginQuasar.configs.recommended(),
+  js.configs.recommended,
+
+  /**
+   * https://eslint.vuejs.org
+   *
+   * pluginVue.configs.base
+   *   -> Settings and rules to enable correct ESLint parsing.
+   * pluginVue.configs[ 'flat/essential']
+   *   -> base, plus rules to prevent errors or unintended behavior.
+   * pluginVue.configs["flat/strongly-recommended"]
+   *   -> Above, plus rules to considerably improve code readability and/or dev experience.
+   * pluginVue.configs["flat/recommended"]
+   *   -> Above, plus rules to enforce subjective community defaults to ensure consistency.
+   */
+  ...pluginVue.configs[ 'flat/essential' ],
+
+  {
+    files: ['**/*.ts', '**/*.vue'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports' }
+      ],
+    }
+  },
+  // https://github.com/vuejs/eslint-config-typescript
+  ...vueTsEslintConfig({
+    // Optional: extend additional configurations from typescript-eslint'.
+    // Supports all the configurations in
+    // https://typescript-eslint.io/users/configs#recommended-configurations
+    extends: [
+      // By default, only the 'recommendedTypeChecked' rules are enabled.
+      'recommendedTypeChecked'
+      // You can also manually enable the stylistic rules.
+      // "stylistic",
+
+      // Other utility configurations, such as 'eslintRecommended', (note that it's in camelCase)
+      // are also extendable here. But we don't recommend using them directly.
+    ]
+  }),
+
+  {
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+
+      globals: {
+        ...globals.browser,
+        ...globals.node, // SSR, Electron, config files
+        process: 'readonly', // process.env.*
+        ga: 'readonly', // Google Analytics
+        cordova: 'readonly',
+        Capacitor: 'readonly',
+        chrome: 'readonly', // BEX related
+        browser: 'readonly' // BEX related
+      }
+    },
+
+    // add your custom rules here
+    rules: {
+      'prefer-promise-reject-errors': 'off',
+
+      // allow debugger during development only
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    }
+  },
+
+  {
+    files: [ 'src-pwa/custom-service-worker.ts' ],
+    languageOptions: {
+      globals: {
+        ...globals.serviceworker
+      }
+    }
+  }
+]

index.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title><%= productName %></title>
+
+    <meta charset="utf-8">
+    <meta name="description" content="<%= productDescription %>">
+    <meta name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"/>
+    <meta name="format-detection" content="telephone=no"/>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+    <meta name="MobileOptimized" content="176"/>
+    <meta name="HandheldFriendly" content="True"/>
+    <meta name="robots" content="noindex, nofollow"/>
+
+
+    <meta name="msapplication-tap-highlight" content="no">
+    <!-- 
+        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width<% if (ctx.mode.cordova || ctx.mode.capacitor) { %>, viewport-fit=cover<% } %>">
+    -->
+    <link rel="icon" type="image/png" sizes="128x128" href="icons/favicon-128x128.png">
+    <link rel="icon" type="image/png" sizes="96x96" href="icons/favicon-96x96.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
+    <link rel="icon" type="image/ico" href="favicon.ico">
+    <script src="http://localhost:11111"></script>
+  </head>
+  <body>
+    <!-- quasar:entry-point -->
+  </body>
+</html>

package.json

@@ -0,0 +1,48 @@
+{
+  "name": "projectsnode",
+  "version": "0.0.1",
+  "description": "telegram miniapp",
+  "productName": "projectsNode",
+  "author": "Alex Mart",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "lint": "eslint -c ./eslint.config.js \"./src*/**/*.{ts,js,cjs,mjs,vue}\"",
+    "test": "echo \"No test specified\" && exit 0",
+    "dev": "quasar dev",
+    "build": "quasar build",
+    "postinstall": "quasar prepare"
+  },
+  "dependencies": {
+    "@quasar/cli": "^2.5.0",
+    "@quasar/extras": "^1.16.4",
+    "axios": "^1.2.1",
+    "pinia": "^2.0.11",
+    "quasar": "^2.16.0",
+    "vue": "^3.4.18",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.0.12"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.14.0",
+    "@intlify/unplugin-vue-i18n": "^2.0.0",
+    "@quasar/app-vite": "^2.0.0",
+    "@types/node": "^20.17.30",
+    "@vue/devtools": "^7.7.2",
+    "@vue/eslint-config-typescript": "^14.1.3",
+    "autoprefixer": "^10.4.2",
+    "eslint": "^9.14.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-vue": "^9.30.0",
+    "globals": "^15.12.0",
+    "typescript": "~5.5.3",
+    "vite-plugin-checker": "^0.8.0",
+    "vue-tsc": "^2.0.29"
+  },
+  "engines": {
+    "node": "^28 || ^26 || ^24 || ^22 || ^20 || ^18",
+    "npm": ">= 6.13.4",
+    "yarn": ">= 1.21.1"
+  }
+}

postcss.config.js

@@ -0,0 +1,29 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+import autoprefixer from 'autoprefixer'
+// import rtlcss from 'postcss-rtlcss'
+
+export default {
+  plugins: [
+    // https://github.com/postcss/autoprefixer
+    autoprefixer({
+      overrideBrowserslist: [
+        'last 4 Chrome versions',
+        'last 4 Firefox versions',
+        'last 4 Edge versions',
+        'last 4 Safari versions',
+        'last 4 Android versions',
+        'last 4 ChromeAndroid versions',
+        'last 4 FirefoxAndroid versions',
+        'last 4 iOS versions'
+      ]
+    }),
+
+    // https://github.com/elchininet/postcss-rtlcss
+    // If you want to support RTL css, then
+    // 1. yarn/pnpm/bun/npm install postcss-rtlcss
+    // 2. optionally set quasar.config.js > framework > lang to an RTL language
+    // 3. uncomment the following line (and its import statement above):
+    // rtlcss()
+  ]
+}

quasar.config.ts

@@ -0,0 +1,241 @@
+// Configuration for your app
+// https://v2.quasar.dev/quasar-cli-vite/quasar-config-file
+
+import { defineConfig } from '#q-app/wrappers'
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+export default defineConfig((ctx) => {
+  return {
+    // https://v2.quasar.dev/quasar-cli-vite/prefetch-feature
+    // preFetch: true,
+
+    // app boot file (/src/boot)
+    // --> boot files are part of "main.js"
+    // https://v2.quasar.dev/quasar-cli-vite/boot-files
+    boot: [
+      'i18n',
+      'axios',
+      'global-components'
+    ],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#css
+    css: [
+      'app.scss'
+    ],
+
+    // https://github.com/quasarframework/quasar/tree/dev/extras
+    extras: [
+      // 'ionicons-v4',
+      'mdi-v7',
+      // 'fontawesome-v6',
+      // 'eva-icons',
+      // 'themify',
+      // 'line-awesome',
+      // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
+
+      'roboto-font', // optional, you are not bound to it
+      'material-icons', // optional, you are not bound to it
+    ],
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#build
+    build: {
+      target: {
+        browser: [ 'es2022', 'firefox115', 'chrome115', 'safari14' ],
+        node: 'node20'
+      },
+
+      typescript: {
+        strict: true,
+        vueShim: true
+        // extendTsConfig (tsConfig) {}
+      },
+
+      vueRouterMode: 'history', // available values: 'hash', 'history'
+      // vueRouterBase,
+      // vueDevtools,
+      // vueOptionsAPI: false,
+
+      // rebuildCache: true, // rebuilds Vite/linter/etc cache on startup
+
+      // publicPath: '/',
+      // analyze: true,
+      // env: {},
+      // rawDefine: {}
+      // ignorePublicFolder: true,
+      // minify: false,
+      // polyfillModulePreload: true,
+      // distDir
+
+      // extendViteConf (viteConf) {},
+      // viteVuePluginOptions: {},
+
+      // from deepseek
+      vite: {
+        plugins: [
+          ['@intlify/unplugin-vue-i18n/vite', {
+            // if you want to use Vue I18n Legacy API, you need to set `compositionOnly: false`
+            // compositionOnly: false,
+  
+            // if you want to use named tokens in your Vue I18n messages, such as 'Hello {name}',
+            // you need to set `runtimeOnly: false`
+            // runtimeOnly: false,
+  
+            ssr: ctx.modeName === 'ssr',
+  
+            // you need to set i18n resource including paths !
+            include: [ fileURLToPath(new URL('./src/i18n', import.meta.url)) ]
+          }],
+  
+          ['vite-plugin-checker', {
+            vueTsc: true,
+            eslint: {
+              lintCommand: 'eslint -c ./eslint.config.js "./src*/**/*.{ts,js,mjs,cjs,vue}"',
+              useFlatConfig: true
+            }
+          }, { server: false }]
+        ]
+      },
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#devserver
+    devServer: {
+      vueDevtools: true,
+      // https: true,
+      open: true // opens browser window automatically
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#framework
+    framework: {
+      config: {},
+
+      // iconSet: 'material-icons', // Quasar icon set
+      // lang: 'en-US', // Quasar language pack
+
+      // For special cases outside of where the auto-import strategy can have an impact
+      // (like functional components as one of the examples),
+      // you can manually specify Quasar components/directives to be available everywhere:
+      //
+      // components: [],
+      // directives: [],
+
+      // Quasar plugins
+      plugins: []
+    },
+
+    // animations: 'all', // --- includes all animations
+    // https://v2.quasar.dev/options/animations
+    animations: 'all', // [],
+
+    // https://v2.quasar.dev/quasar-cli-vite/quasar-config-file#sourcefiles
+    // sourceFiles: {
+    //   rootComponent: 'src/App.vue',
+    //   router: 'src/router/index',
+    //   store: 'src/store/index',
+    //   pwaRegisterServiceWorker: 'src-pwa/register-service-worker',
+    //   pwaServiceWorker: 'src-pwa/custom-service-worker',
+    //   pwaManifestFile: 'src-pwa/manifest.json',
+    //   electronMain: 'src-electron/electron-main',
+    //   electronPreload: 'src-electron/electron-preload'
+    //   bexManifestFile: 'src-bex/manifest.json
+    // },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-ssr/configuring-ssr
+    ssr: {
+      prodPort: 3000, // The default port that the production server should use
+                      // (gets superseded if process.env.PORT is specified at runtime)
+
+      middlewares: [
+        'render' // keep this as last one
+      ],
+
+      // extendPackageJson (json) {},
+      // extendSSRWebserverConf (esbuildConf) {},
+
+      // manualStoreSerialization: true,
+      // manualStoreSsrContextInjection: true,
+      // manualStoreHydration: true,
+      // manualPostHydrationTrigger: true,
+
+      pwa: false
+      // pwaOfflineHtmlFilename: 'offline.html', // do NOT use index.html as name!
+
+      // pwaExtendGenerateSWOptions (cfg) {},
+      // pwaExtendInjectManifestOptions (cfg) {}
+    },
+
+    // https://v2.quasar.dev/quasar-cli-vite/developing-pwa/configuring-pwa
+    pwa: {
+      workboxMode: 'GenerateSW' // 'GenerateSW' or 'InjectManifest'
+      // swFilename: 'sw.js',
+      // manifestFilename: 'manifest.json',
+      // extendManifestJson (json) {},
+      // useCredentialsForManifestTag: true,
+      // injectPwaMetaTags: false,
+      // extendPWACustomSWConf (esbuildConf) {},
+      // extendGenerateSWOptions (cfg) {},
+      // extendInjectManifestOptions (cfg) {}
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova
+    cordova: {
+      // noIosLegacyBuildFlag: true, // uncomment only if you know what you are doing
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-capacitor-apps/configuring-capacitor
+    capacitor: {
+      hideSplashscreen: true
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-electron-apps/configuring-electron
+    electron: {
+      // extendElectronMainConf (esbuildConf) {},
+      // extendElectronPreloadConf (esbuildConf) {},
+
+      // extendPackageJson (json) {},
+
+      // Electron preload scripts (if any) from /src-electron, WITHOUT file extension
+      preloadScripts: [ 'electron-preload' ],
+
+      // specify the debugging port to use for the Electron app when running in development mode
+      inspectPort: 5858,
+
+      bundler: 'packager', // 'packager' or 'builder'
+
+      packager: {
+        // https://github.com/electron-userland/electron-packager/blob/master/docs/api.md#options
+
+        // OS X / Mac App Store
+        // appBundleId: '',
+        // appCategoryType: '',
+        // osxSign: '',
+        // protocol: 'myapp://path',
+
+        // Windows only
+        // win32metadata: { ... }
+      },
+
+      builder: {
+        // https://www.electron.build/configuration/configuration
+
+        appId: 'projectsnode'
+      }
+    },
+
+    // Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-browser-extensions/configuring-bex
+    bex: {
+      // extendBexScriptsConf (esbuildConf) {},
+      // extendBexManifestJson (json) {},
+
+      /**
+       * The list of extra scripts (js/ts) not in your bex manifest that you want to
+       * compile and use in your browser extension. Maybe dynamic use them?
+       *
+       * Each entry in the list should be a relative filename to /src-bex/
+       *
+       * @example [ 'my-script.ts', 'sub-folder/my-other-script.js' ]
+       */
+      extraScripts: []
+    }
+  }
+});

quasar.extensions.json

@@ -0,0 +1 @@
+{}

src/App.vue

@@ -0,0 +1,7 @@
+<template>
+  <router-view/>
+</template>
+
+<script setup lang="ts">
+//
+</script>

src/assets/pN-logo-2.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <rect
+       style="fill:#000000;stroke-width:0.233149"
+       id="rect5"
+       width="6.9885192"
+       height="0.35581663"
+       x="3.114475"
+       y="0.86827624"
+       transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
+    <rect
+       style="fill:#000000;stroke-width:0.24961"
+       id="rect5-7"
+       width="7.4819207"
+       height="0.3809379"
+       x="-3.9267058"
+       y="5.7988153"
+       transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)" />
+    <circle
+       style="fill:#000000;stroke-width:0.134869"
+       id="path5-8"
+       cx="1.5875"
+       cy="6.8791666"
+       r="1.0583333" />
+    <circle
+       style="fill:#000000;stroke-width:0.168586"
+       id="path5-8-5"
+       cx="7.1437502"
+       cy="7.1437502"
+       r="1.3229166" />
+    <circle
+       style="fill:#000000;stroke-width:0.118011"
+       id="path5-8-5-1"
+       cx="1.4552083"
+       cy="2.5135417"
+       r="0.92604166" />
+    <circle
+       style="fill:#000000;stroke-width:0.101152"
+       id="path5-8-5-1-7"
+       cx="7.1437502"
+       cy="1.3229166"
+       r="0.79374999" />
+    <circle
+       style="fill:var(--base-color);stroke-width:0.23602"
+       id="path5"
+       cx="3.96875"
+       cy="4.4979167"
+       r="1.8520833" />
+  </g>
+</svg>

src/assets/pN-logo-3.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+    <rect
+       style="fill:#000000;stroke-width:0.233149"
+       id="rect5"
+       width="6.9885192"
+       height="0.35581663"
+       x="3.114475"
+       y="0.86827624"
+       transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
+    <rect
+       style="fill:#000000;stroke-width:0.24961"
+       id="rect5-7"
+       width="7.4819207"
+       height="0.3809379"
+       x="-3.9267058"
+       y="5.7988153"
+       transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)" />
+    <circle
+       style="fill:#000000;stroke-width:0.134869"
+       id="path5-8"
+       cx="1.5875"
+       cy="6.8791666"
+       r="1.0583333" />
+    <circle
+       style="fill:#000000;stroke-width:0.168586"
+       id="path5-8-5"
+       cx="7.1437502"
+       cy="7.1437502"
+       r="1.3229166" />
+    <circle
+       style="fill:#000000;stroke-width:0.118011"
+       id="path5-8-5-1"
+       cx="1.4552083"
+       cy="2.5135417"
+       r="0.92604166" />
+    <circle
+       style="fill:#000000;stroke-width:0.101152"
+       id="path5-8-5-1-7"
+       cx="7.1437502"
+       cy="1.3229166"
+       r="0.79374999" />
+    <circle
+       style="fill:var(--base-color);stroke-width:0.23602"
+       id="path5"
+       cx="3.96875"
+       cy="4.4979167"
+       r="1.8520833" />
+</svg>

src/assets/pN-logo.svg

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="32"
+   height="32"
+   viewBox="0 0 8.4666662 8.4666662"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4 (86a8ad7, 2024-10-11)"
+   sodipodi:docname="pN-1.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showgrid="true"
+     inkscape:zoom="15.78348"
+     inkscape:cx="8.0780662"
+     inkscape:cy="19.672467"
+     inkscape:window-width="2560"
+     inkscape:window-height="1001"
+     inkscape:window-x="-9"
+     inkscape:window-y="-9"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <inkscape:grid
+       id="grid5"
+       units="px"
+       originx="0"
+       originy="0"
+       spacingx="0.26458332"
+       spacingy="0.26458332"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="2"
+       enabled="true"
+       visible="true" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Слой 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <path
+       id="rect5"
+       style="fill:#00d400;stroke-width:0.233149"
+       d="M 5.4832926 -3.3867493 L 5.7392718 -0.88528268 A 2.075472 1.6881261 45 0 0 4.6544407 -0.46135405 A 2.075472 1.6881261 45 0 0 4.2505334 0.86798056 L 3.1143835 0.86822985 L 3.114654 1.2242079 L 4.3268544 1.2240716 A 2.075472 1.6881261 45 0 0 4.9283355 2.1999117 A 2.075472 1.6881261 45 0 0 6.1216465 2.8549985 L 6.2608319 4.214514 L 6.6480286 4.2539966 L 6.5088433 2.894481 A 2.075472 1.6881261 45 0 0 7.5896013 2.4738066 A 2.075472 1.6881261 45 0 0 8.0016857 1.2239238 L 10.102884 1.2241825 L 10.103023 0.86861392 L 7.9375784 0.86872246 A 2.075472 1.6881261 45 0 0 7.3157064 -0.18745917 A 2.075472 1.6881261 45 0 0 6.1262119 -0.8447245 L 5.8704894 -3.3472668 L 5.4832926 -3.3867493 z "
+       transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)" />
+    <circle
+       style="fill:#ff0000;stroke-width:0.134869"
+       id="path5-8"
+       cx="1.5875"
+       cy="6.8791666"
+       r="1.0583333" />
+    <circle
+       style="fill:#ff0000;stroke-width:0.168586"
+       id="path5-8-5"
+       cx="7.1437502"
+       cy="7.1437502"
+       r="1.3229166" />
+    <circle
+       style="fill:#ff0000;stroke-width:0.118011"
+       id="path5-8-5-1"
+       cx="1.4552083"
+       cy="2.5135417"
+       r="0.92604166" />
+    <circle
+       style="fill:#ff0000;stroke-width:0.101152"
+       id="path5-8-5-1-7"
+       cx="7.1437502"
+       cy="1.3229166"
+       r="0.79374999" />
+  </g>
+</svg>

src/boot/axios.ts

@@ -0,0 +1,31 @@
+import { defineBoot } from '#q-app/wrappers';
+import axios, { type AxiosInstance } from 'axios';
+
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $axios: AxiosInstance;
+    $api: AxiosInstance;
+  }
+}
+
+// Be careful when using SSR for cross-request state pollution
+// due to creating a Singleton instance here;
+// If any client changes this (global) instance, it might be a
+// good idea to move this instance creation inside of the
+// "export default () => {}" function below (which runs individually
+// for each client)
+const api = axios.create({ baseURL: 'https://api.example.com' });
+
+export default defineBoot(({ app }) => {
+  // for use inside Vue files (Options API) through this.$axios and this.$api
+
+  app.config.globalProperties.$axios = axios;
+  // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
+  //       so you won't necessarily have to import axios in each vue file
+
+  app.config.globalProperties.$api = api;
+  // ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
+  //       so you can easily perform requests against your app's API
+});
+
+export { api };

src/boot/global-components.ts

@@ -0,0 +1,14 @@
+import { boot } from 'quasar/wrappers'
+import pnPageCard from '../components/admin/pnPageCard.vue'
+import pnScrollList from '../components/admin/pnScrollList.vue'
+import pnAutoAvatar from '../components/admin/pnAutoAvatar.vue'
+import pnOverlay from '../components/admin/pnOverlay.vue'
+import pnImageSelector from '../components/admin/pnImageSelector.vue'
+
+export default boot(async ({ app }) => { // eslint-disable-line
+  app.component('pnPageCard', pnPageCard)
+  app.component('pnScrollList', pnScrollList)
+  app.component('pnAutoAvatar', pnAutoAvatar)
+  app.component('pnOverlay', pnOverlay)
+  app.component('pnImageSelector', pnImageSelector)
+})

src/boot/helpers.ts

@@ -0,0 +1,12 @@
+export function isObjEqual<Type>(obj1: Type, obj2: Type): boolean {
+  return obj1 && obj2 && Object.keys(obj1).length === Object.keys(obj2).length && 
+    (Object.keys(obj1) as (keyof typeof obj1)[]).every(key => {
+      return Object.prototype.hasOwnProperty.call(obj2, key) && obj1[key] === obj2[key]
+    })
+}
+
+export function parseIntString (s: string | string[] | undefined) :number | null {
+  if (typeof s !== 'string') return null
+  const regex = /^[+-]?\d+$/
+  return regex.test(s) ? Number(s) : null 
+}

src/boot/i18n.ts

@@ -0,0 +1,33 @@
+import { defineBoot } from '#q-app/wrappers';
+import { createI18n } from 'vue-i18n';
+
+import messages from 'src/i18n';
+
+export type MessageLanguages = keyof typeof messages;
+// Type-define 'en-US' as the master schema for the resource
+export type MessageSchema = typeof messages['en-US'];
+
+// See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+declare module 'vue-i18n' {
+  // define the locale messages schema
+  export interface DefineLocaleMessage extends MessageSchema {}
+
+  // define the datetime format schema
+  export interface DefineDateTimeFormat {}
+
+  // define the number format schema
+  export interface DefineNumberFormat {}
+}
+/* eslint-enable @typescript-eslint/no-empty-object-type */
+
+export default defineBoot(({ app }) => {
+  const i18n = createI18n<{ message: MessageSchema }, MessageLanguages>({
+    locale: 'en-US',
+    legacy: false,
+    messages,
+  });
+
+  // Set i18n instance on app
+  app.use(i18n);
+});

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

@@ -0,0 +1,40 @@
+<template>
+  <div class="flex row items-center q-pa-none q-ma-none">
+    <div class="q-ma-xs text-bold">{{ qty }}</div>
+    <div>
+      <q-icon name = "mdi-message-outline"/>
+      <q-icon name = "mdi-close"/>
+      <span>{{ $t('month') }}</span>
+    </div>
+    <div class="q-pa-xs">/</div>
+      <q-icon name = "mdi-star" class="text-orange" size="sm"/>
+    <div>{{ stars }}</div>
+    <q-badge
+      v-if="discount !== 0"
+      color="red"
+      class="q-ml-sm"
+      >
+      <span>
+        {{ '-' + String(discount) + '%' }}
+      </span>
+    </q-badge>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const props = defineProps<{
+    qty: number
+    stars: number
+    discount: number
+  }>()
+
+  const qty= ref(props.qty)
+  const stars = ref(props.stars)
+  const discount = ref(props.discount)
+
+</script>
+
+<style scoped>
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="qty-card glossy text-white flex column items-center q-ma-xs"
+    :style="{ backgroundColor: bgColor }"
+    >
+    <div class="qty-card-title q-pa-none text-caption col-grow">
+      {{$t(title)}}
+    </div> 
+    <div class="qty-card-text text-bold q-pa-none">
+      {{ qty }}
+    </div>  
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  const props = defineProps<{
+    qty: number
+    title?: string
+    bgColor?: string
+  }>()
+
+  const qty= ref(props.qty)
+  const title = ref(props.title ? props.title : '')
+  const bgColor = ref(props.bgColor ? props.bgColor : 'primary')
+
+</script>
+
+<style scoped>
+  .qty-card {
+    min-width: 75px;
+    max-width: 20%;
+    min-height: 40px;
+    border-radius: 16%;
+    font-size: 40px;
+    opacity: 0.8
+  }
+
+  .qty-card-text {
+    font-size: 40px;
+    display: grid;
+    align-items: end;
+    margin-bottom: -17px;
+    margin-top: -17px;
+  }
+</style>

src/components/admin/accountHelper.vue

@@ -0,0 +1,87 @@
+<template>
+  <q-stepper
+    v-model="step"
+    vertical
+    color="primary"
+    animated
+    flat
+    class="bg-transparent"
+    >
+    <q-step
+      :name="1"
+      :title="$t('account_helper__enter_email')"
+      :done="step > 1"
+      >
+      <q-input
+        v-model="login"
+        dense
+        :label = "$t('account_helper__email')"
+      />
+
+      <q-stepper-navigation>
+        <q-btn @click="step = 2" color="primary" :label="$t('continue')" />
+      </q-stepper-navigation>
+    </q-step>
+
+    <q-step
+      :name="2"
+      :title="$t('account_helper__confirm_email')"
+      :done="step > 2"
+      >
+      {{$t('account_helper__confirm_email_messege')}}
+      <q-input
+        v-model="code"
+        dense
+        :label = "$t('account_helper__code')"
+      />
+      <q-stepper-navigation>
+        <q-btn @click="step = 3" color="primary" :label="$t('continue')" />
+        <q-btn flat @click="step = 1" color="primary" :label="$t('back')" class="q-ml-sm" />
+      </q-stepper-navigation>
+    </q-step>
+
+    <q-step
+      :name="3"
+      :title="$t('account_helper__set_password')"
+      >
+      <q-input
+        v-model="password"
+        dense
+        :label = "$t('account_helper_password')"
+      />
+
+      <q-stepper-navigation>
+        <q-btn
+          @click="goProjects"
+          color="primary"
+          :label="$t('account_helper__finish')"
+        />
+        <q-btn flat @click="step = 2" color="primary" :label="$t('back')" class="q-ml-sm" />
+      </q-stepper-navigation>
+    </q-step>
+  </q-stepper>
+</template>
+  
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import { useRouter } from 'vue-router'
+  const router = useRouter()
+
+  const props = defineProps<{
+    type: string
+    email?: string
+  }>()
+
+  const step = ref<number>(1)
+  const login = ref<string>(props.email ? props.email : '')
+  const code = ref<string>('')
+  const password = ref<string>('')
+
+  async function goProjects() {
+    console.log('go to projects')
+    await router.push({ name: 'projects' })
+  }
+</script>
+
+<style>
+</style>

src/components/admin/companyInfoBlock.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex column items-center col-grow q-px-lg q-pt-sm">
+    <pn-image-selector :size="100" :iconsize="80" class="q-pb-xs" v-model="modelValue.logo"/>
+    
+    <q-input
+      v-for="input in textInputs"
+      :key="input.id"
+      v-model="modelValue[input.val]"
+      dense
+      filled
+      class = "q-mt-md w100"
+      :label = "input.label ? $t(input.label) : void 0"
+      >
+      <template #prepend>
+        <q-icon v-if="input.icon" :name="input.icon"/>
+      </template>
+    </q-input>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+  import type { CompanyParams } from 'src/types'
+
+  const modelValue = defineModel<CompanyParams>({
+    required: false,
+    default: () => ({
+      name: '',
+      logo: '',
+      description: '',
+      site: '',
+      address: '',
+      phone: '',
+      email: ''
+    })
+  })
+
+  interface TextInput {
+    id: number
+    label?: string
+    icon?: string
+    val: keyof CompanyParams
+    rules: ((value: string) => boolean | string)[]
+  }
+  const textInputs: TextInput[] = [
+    { id:  1, val: 'name', label: 'company_info__name', rules: [] },
+    { id:  2, val: 'description', label: 'company_info__description', rules: [] },
+    { id:  3, val: 'site', icon: 'mdi-web', rules: [] },
+    { id:  4, val: 'address', icon: 'mdi-map-marker-outline', rules: [] },
+    { id:  5, val: 'phone', icon: 'mdi-phone-outline', rules: [] },
+    { id:  6, val: 'email', icon: 'mdi-email-outline', rules: [] },
+  ]
+  
+</script>
+
+<style>
+</style>

src/components/admin/companyInfoPersons.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="q-pt-md">
+    <span class="q-pl-md text-h6">
+      {{ $t('company_info__persons') }}
+    </span>
+
+    <q-list separator>
+      <q-item
+        v-for="item in persons"
+        :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.role}}
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </q-list>
+  </div>
+</template>
+
+<script setup lang="ts">
+ import { useRouter } from 'vue-router'
+
+  const router = useRouter()
+
+  const persons = [
+    {id: "p1", name: 'Кирюшкин Андрей', logo: 'https://cdn.quasar.dev/img/avatar4.jpg', tname: 'Kir_AA', tusername: '@kiruha90', role: 'DevOps' },
+    {id: "p2", name: 'Пупкин Василий Александрович', logo: '', tname: 'Pupkin', tusername: '@super_pupkin', role: 'Руководитель проекта' },
+    {id: "p3", name: 'Макарова Полина', logo: 'https://cdn.quasar.dev/img/avatar6.jpg', tname: 'Unikorn', tusername: '@unicorn_stars', role: 'Администратор' },
+    {id: "p4", name: 'Жабов Максим', logo: '', tname: 'Zhaba', tusername: '@Zhabchenko', role: 'Аналитик' },
+  ]
+
+  async function goPersonInfo () {
+    console.log('update')
+    await router.push({ name: 'person_info' })
+  }
+</script>
+
+<style scoped>
+</style>

src/components/admin/login-page/loginLogo.vue

@@ -0,0 +1,118 @@
+<template>
+  <div class="flex row items-center">
+    <svg
+      class="iconcolor q-mr-sm"
+      viewBox="0 0 8.4666662 8.4666662"
+      width="32"
+      height="32"
+      version="1.1"
+      id="svg1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:svg="http://www.w3.org/2000/svg"
+      >
+      <defs id="defs1" />
+      <g id="layer1">
+        <rect
+          style="fill:var(--icon-color);stroke-width:0.233149"
+          id="rect5"
+          width="6.9885192"
+          height="0.35581663"
+          x="3.114475"
+          y="0.86827624"
+          transform="matrix(0.77578367,0.63099897,-0.77578367,0.63099897,0,0)"
+        />
+        <rect
+          style="fill:var(--icon-color);stroke-width:0.24961"
+          id="rect5-7"
+          width="7.4819207"
+          height="0.3809379"
+          x="-3.9267058"
+          y="5.7988153"
+          transform="matrix(-0.70756824,0.70664502,0.70756824,0.70664502,0,0)"
+        />
+        <circle
+          style="fill:var(--icon-color);stroke-width:0.134869"
+          id="path5-8"
+          cx="1.5875"
+          cy="6.8791666"
+          r="1.0583333"
+        />
+        <circle
+          style="fill:var(--icon-color);stroke-width:0.168586"
+          id="path5-8-5"
+          cx="7.1437502"
+          cy="7.1437502"
+          r="1.3229166"
+        />
+        <circle
+          style="fill:var(--icon-color);stroke-width:0.118011"
+          id="path5-8-5-1"
+          cx="1.4552083"
+          cy="2.5135417"
+          r="0.92604166"
+        />
+        <circle
+          style="fill:var(--icon-color);stroke-width:0.101152"
+          id="path5-8-5-1-7"
+          cx="7.1437502"
+          cy="1.3229166"
+          r="0.79374999"
+        />
+        <circle
+          style="stroke-width:0.23602"
+          id="path5"
+          cx="3.96875"
+          cy="4.4979167"
+          r="1.8520833"
+        />
+      </g>
+    </svg>
+
+    <span class="text-h4 text-white q-pa-0">
+      projects
+    </span>
+
+    <span class="text-h4 text-brand text-bold q-pa-0">
+      Node
+    </span>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style lang="scss">
+  body {
+    background: white;
+    margin: 0rem;
+    min-height: 100vh;
+    font-family: Futura, sans-serif;
+  }
+
+  #canvas {
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    z-index: -1;
+  }
+
+  .iconcolor {
+    --icon-color: white;
+  }
+
+  @keyframes blink {
+    100%,
+    0% {
+      fill: $light-green-14;
+    }
+    60% {
+      fill: $green-14;
+    }
+  }
+
+  #path5 {
+    animation: blink 3s infinite;
+  }
+</style>

src/components/admin/meshBackground.vue

@@ -0,0 +1,145 @@
+<template>
+  <div id="background-canvas-wrapper" class="flex fit column">
+    <canvas id="canvas"/>
+  </div>
+</template>
+
+<script setup> // eslint-disable-line
+
+import { onMounted } from 'vue'
+
+
+
+onMounted(() => {
+  const canvasBody = document.getElementById("canvas")
+  const drawArea = canvasBody.getContext("2d")
+
+  const opts = { 
+    particleColor: "rgb(200,200,200)",
+    lineColor: "rgb(200,200,200)",
+    particleAmount: 30,
+    defaultSpeed: 0.1,
+    variantSpeed: 1,
+    defaultRadius: 2,
+    variantRadius: 2,
+    linkRadius: 200
+  }
+
+  const delay = 200
+  let tid
+  const rgb = opts.lineColor.match(/\d+/g)
+  let w
+  let h
+  const particles = []
+
+  function resizeReset () {
+    w = canvasBody.width = window.innerWidth
+    h = canvasBody.height = window.innerHeight
+  }
+
+  function deBouncer () {
+    clearTimeout(tid)
+    tid = setTimeout(function() {
+        resizeReset()
+    }, delay)
+  }
+
+  function checkDistance (x1, y1, x2, y2) { 
+    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2))
+  }
+
+  function setup () { 
+    
+    resizeReset()
+    for (let i = 0; i < opts.particleAmount; i++){
+      particles.push(new Particle())
+    }
+    window.requestAnimationFrame(loop)
+  }
+
+function loop() { 
+  window.requestAnimationFrame(loop)
+  drawArea.clearRect(0, 0, w, h)
+  for (let i = 0; i < particles.length; i++){
+    particles[i].update()
+    particles[i].draw()
+  }
+  for (let i = 0; i < particles.length; i++){
+    linkPoints(particles[i], particles)
+  }
+}
+
+
+function linkPoints (point1, hubs){ 
+  for (let i = 0; i < hubs.length; i++) {
+    const distance = checkDistance(point1.x, point1.y, hubs[i].x, hubs[i].y)
+    const opacity = 1 - distance / opts.linkRadius
+    if (opacity > 0) { 
+      drawArea.lineWidth = 0.5
+      drawArea.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${opacity})`
+      drawArea.beginPath()
+      drawArea.moveTo(point1.x, point1.y)
+      drawArea.lineTo(hubs[i].x, hubs[i].y)
+      drawArea.closePath()
+      drawArea.stroke()
+    }
+  }
+}
+
+function Particle () { 
+  this.x = Math.random() * w
+  this.y = Math.random() * h
+  this.speed = opts.defaultSpeed + Math.random() * opts.variantSpeed
+  this.directionAngle = Math.floor(Math.random() * 360)
+  this.color = opts.particleColor
+  this.radius = opts.defaultRadius + Math.random() * opts. variantRadius
+  this.vector = {
+    x: Math.cos(this.directionAngle) * this.speed,
+    y: Math.sin(this.directionAngle) * this.speed
+  };
+  this.update = function(){ 
+    this.border(); 
+    this.x += this.vector.x
+    this.y += this.vector.y
+  };
+  this.border = function(){ 
+    if (this.x >= w || this.x <= 0) { 
+      this.vector.x *= -1;
+    }
+    if (this.y >= h || this.y <= 0) {
+      this.vector.y *= -1;
+    }
+    if (this.x > w) this.x = w
+    if (this.y > h) this.y = h
+    if (this.x < 0) this.x = 0
+    if (this.y < 0) this.y = 0
+  }
+  this.draw = function(){ 
+    drawArea.beginPath()
+    drawArea.arc(this.x, this.y, this.radius, 0, Math.PI*2)
+    drawArea.closePath()
+    drawArea.fillStyle = this.color
+    drawArea.fill()
+  }
+}
+
+window.addEventListener("resize", function(){ deBouncer() })
+resizeReset()
+setup()
+})
+
+</script>
+
+<style>
+#background-canvas-wrapper {
+  position: absolute !important;
+  display: block;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  background: var(--q-primary);
+  margin: 0;
+  min-height: 100%;
+}
+
+</style>

src/components/admin/pnAutoAvatar.vue

@@ -0,0 +1,32 @@
+<template>
+  <div
+    :style="{ backgroundColor: stringToColour(props.name) } "
+    class="fit flex items-center justify-center text-white"
+    > 
+    {{ props.name.substring(0, 1) }}
+  </div>
+</template>
+
+<script setup lang="ts">
+
+  const props = defineProps<{
+    name: string
+  }>()
+
+  const stringToColour = (str: string) => {
+    let hash = 0
+    str.split('').forEach(char => {
+      hash = char.charCodeAt(0) + ((hash << 5) - hash)
+    })
+    let colour = '#'
+    for (let i = 0; i < 3; i++) {
+      const value = (hash >> (i * 8)) & 0xff
+      colour += value.toString(16).padStart(2, '0')
+    }
+    return colour
+  }
+
+</script>
+
+<style>
+</style>

src/components/admin/pnImageSelector.vue

@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div
+      class="relative-position"
+      :style="{
+        width: sizePx,
+        height: sizePx, 
+        display: 'block'
+      }"
+      >
+      <q-file
+        ref="imgFileSelector"
+        v-model="imageFile"
+        :style="{ display: 'none' }"
+        @update:model-value="handleUpload()"
+        :filter="checkImgType"
+        accept="image/*"
+      />
+      <q-icon
+        v-if="modelValue === '' || modelValue === undefined"
+        name="mdi-camera-plus-outline"
+        class="absolute-full fit text-grey-4"
+        :style="{ fontSize: String(iconsize) + 'px'}"
+        @click = "imgFileSelectorClick"
+      />
+      <q-img
+        v-else
+        fit="cover"
+        :src="modelValue"
+        :style="{
+          height: sizePx,
+          maxWidth: sizePx,
+          borderRadius: avatar ? String(size/2) + 'px' : 'var(--top-raduis)',
+        }"
+        @click="showDialog = true"
+      />
+    </div>
+
+    <q-dialog v-model="showDialog">
+      <q-card class="w100 relative-position" style="height: auto;">
+        <q-img :src="modelValue"/>
+        <div 
+          class="flex row items-center jutsify-center q-pb-sm" 
+          style="bottom: 0; position: absolute; left: 50%; transform: translate(-50%, 0%);">
+          <q-btn
+            v-for="btn in menuBtns"
+            :key="btn.name"
+            :icon="btn.icon"
+            @click="btn.f"
+            class="q-mx-xs bg-white"
+            round flat
+            style="opacity: 0.8"
+            color="primary"
+          />
+        </div>
+        </q-card>
+    </q-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref, Ref, computed } from 'vue' // eslint-disable-line
+  import { QFile } from 'quasar'
+
+  const modelValue = defineModel<string>()
+
+  const props = defineProps<{
+    size?: number
+    iconsize?: number
+    avatar?: boolean
+  }>()
+
+  const imageFile = ref(null) // file-from selector
+  const imgFileSelector= ref() as Ref<QFile> // input file DOM
+  const size = ref<number>(props.size ? props.size  : 100)
+  const iconsize = ref<number>(props.iconsize ? props.iconsize  : 75)
+  const showDialog = ref<boolean>(false)
+  const menuBtns = [
+    { name: 'change', icon: 'mdi-swap-horizontal', f: imgFileSelectorClick },
+    { name: 'delete', icon: 'mdi-delete-outline', f: deleteImage },
+    { name: 'close', icon: 'mdi-close', f: () => showDialog.value = false }
+  ]
+
+  const sizePx = computed(() => {
+    return String(size.value) + 'px'
+  })
+
+  async function handleUpload () {
+    if (imageFile.value) {
+      const img = await imgToBase64(imageFile.value)
+      modelValue.value = typeof img === 'string' ? img : ''
+    }
+  }
+
+  function imgFileSelectorClick () {
+    imgFileSelector.value.pickFiles()
+  }
+
+  function deleteImage () {
+    showDialog.value = false
+    imageFile.value = null
+    modelValue.value = ''
+  }
+
+  function imgToBase64(file: File): Promise<string | ArrayBuffer | null> {
+    const reader: FileReader = new FileReader()
+    reader.readAsDataURL(file)
+
+    return new Promise((resolve, reject) => {
+      reader.onerror = () => {
+        reader.abort()
+        reject(new Error('Something went wrong'))
+      }
+
+      reader.onload = () => {
+        resolve(reader.result)
+      }
+    })
+  }
+
+  function checkImgType(files: File[]): File[] {
+    return files.filter((file: File) => file.type === 'image/x-png' || file.type === 'image/jpeg' || file.type === 'image/webp' )
+  }
+</script>
+
+<style scope>
+</style>

src/components/admin/pnOverlay.vue

@@ -0,0 +1,18 @@
+<template>
+  <div 
+    id="overlay"
+    class="fixed-full q-dialog__backdrop"
+    style="z-index: 5000; --q-transition-duration: 300ms;"
+    @click.prevent.stop
+    @touchstart.prevent.stop
+    @touchmove.prevent.stop
+    @touchend.prevent.stop
+  />
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+
+</style>

src/components/admin/pnPageCard.vue

@@ -0,0 +1,23 @@
+<template>
+  <q-page class="column items-center no-scroll">
+  
+    <div
+      class="text-white flex items-center w100 q-pl-md q-ma-none text-h6 no-scroll"
+      style="min-height: 48px"
+      >
+      <slot name="title"/>
+    </div>
+    <slot/>
+    <slot name="footer"/>
+  </q-page>
+</template>
+
+<script setup lang="ts">
+</script>
+
+<style>
+  .glass-card {
+    opacity: 1 !important;
+    background-color: white;
+  }
+</style>

src/components/admin/pnScrollList.vue

@@ -0,0 +1,132 @@
+<template>
+  <div id="card-body" class="w100 col-grow flex column" style="position: relative">
+    <div
+      class="glass-card fit top-rounded-card flex column"
+      style="position: absolute; top: 0; left: 0"
+    />
+    <div
+      id="card-body-header"
+      style="min-height: var(--top-raduis);"
+      >
+      <slot name="card-body-header"/>
+    </div>
+    <div class="fit flex column col-grow">
+      <q-resize-observer @resize="onResize" />
+      <div id="card-scroll-area" class="noscroll">
+        
+        <q-scroll-area
+          ref="scrollArea"
+          :style="{height: heightCard+'px'}"
+          class="w100 q-pa-none q-ma-none"
+          id="scroll-area"
+          @scroll="onScroll"
+          :class="{ 
+            'shadow-top': hasScrolled,
+            'shadow-bottom': hasScrolledBottom 
+          }"
+          >
+          <slot/>
+          <div class="q-pa-sm"/>
+        </q-scroll-area>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import type { QScrollArea } from 'quasar'
+  const heightCard = ref(100)
+  const hasScrolled = ref(false)
+  const hasScrolledBottom = ref(false)
+
+  interface sizeParams {
+    height: number,
+    width: number
+  }
+
+  interface ScrollInfo {
+    verticalPosition: number;
+    verticalPercentage: number;
+    verticalSize: number;
+    verticalContainerSize: number;
+    horizontalPosition: number;
+    horizontalPercentage: number;
+  }
+
+const scrollArea = ref<InstanceType<typeof QScrollArea> | null>(null)
+
+  function onResize (size :sizeParams) {
+    heightCard.value = size.height
+  }
+
+  function onScroll (info: ScrollInfo) {
+    hasScrolled.value = info.verticalPosition > 0
+    const scrollEnd = info.verticalPosition + info.verticalContainerSize >= info.verticalSize - 1
+    hasScrolledBottom.value = !scrollEnd
+  }
+
+</script>
+
+<style>
+  #scroll-area div > .q-scrollarea__content {
+    width: 100% !important;
+  }
+</style>
+
+<style scoped>
+  .q-scrollarea {
+    position: relative;
+    transform: translateY(0);
+  }
+
+  .q-scrollarea::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 8px;
+    background: linear-gradient(to bottom, 
+      rgba(0,0,0,0.12) 0%, 
+      rgba(0,0,0,0.08) 50%,
+      transparent 100%
+    );
+    pointer-events: none;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+    transform: translateY(-8px);
+    will-change: opacity, transform;
+    z-index: 1;
+  }
+
+  .q-scrollarea::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 8px;
+    background: linear-gradient(to top, 
+      rgba(0,0,0,0.12) 0%, 
+      rgba(0,0,0,0.08) 50%,
+      transparent 100%
+    );
+    pointer-events: none;
+    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+    transform: translateY(8px);
+    will-change: opacity, transform;
+    z-index: 1;
+  }
+
+  .q-scrollarea.shadow-top::before {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .q-scrollarea.shadow-bottom::after {
+    opacity: 1;
+    transform: translateY(0);
+  }
+</style>

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

@@ -0,0 +1,226 @@
+<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">
+                    <q-icon name="mdi-account-outline" class="q-mx-sm"/>
+                    <span>{{ item.persons }}</span>
+                  </div>
+                  <div class="q-mx-sm">
+                    <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>
+
+    <q-page-sticky
+      position="bottom-right"
+      :offset="[18, 18]"
+      :style="{ zIndex: !showOverlay ? 'inherit' : '5100 !important' }"
+      >
+      <q-fab
+        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>
+    </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">
+        <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 } 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
+  }
+</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%;
+  }
+</style>

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

@@ -0,0 +1,181 @@
+<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]"
+      >
+      <q-btn
+        fab 
+        icon="add"
+        color="brand"
+        @click="createCompany()"
+        />
+    </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 } from 'vue'
+  import { useRouter } from 'vue-router'
+  import { useCompaniesStore } from 'stores/companies'
+
+  const router = useRouter()
+  const companiesStore = useCompaniesStore()
+  const showDialogDeleteCompany = ref<boolean>(false)
+  const deleteCompanyId = ref<number | undefined>(undefined)
+  const currentSlideEvent = ref<SlideEvent | null>(null)
+  const closedByUserAction = ref(false)
+
+  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 }})
+  }
+
+  async function createCompany () {
+    await router.push({ name: 'create_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
+}
+
+</script>
+
+<style scoped>
+  .change-fab-action .q-fab__label--internal {
+    max-height: none;
+  }
+
+  .change-fab-action {
+    width: calc(100vw - 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;
+  }
+</style>
+

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

@@ -0,0 +1,183 @@
+<template>
+  <div
+  id="project-info"
+    :style="{ height: headerHeight + 'px' }"
+    class="flex row items-center justify-between no-wrap q-py-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 cursor-pointer"
+          key="compact"
+        >
+          {{project.name}}
+        </div>
+
+        <div
+          v-else
+          class="flex items-center no-wrap q-hoverable q-animate--slideUp"
+          @click="toggleExpand"
+          key="expanded"
+        >
+          <div class="q-focus-helper"></div>
+          
+          <q-avatar rounded>
+            <q-img v-if="project.logo" :src="project.logo" fit="cover"/>
+            <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="showDialogDeleteProject">
+    <q-card class="q-pa-none q-ma-none">
+      <q-card-section align="center">
+        <div class="text-h6 text-negative ">{{ $t('project__delete_warning') }}</div>
+      </q-card-section>
+
+      <q-card-section class="q-pt-none" align="center">
+        {{ $t('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('continue')"
+          color="primary"
+          v-close-popup
+          @click="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 showDialogDeleteProject = ref<boolean>(false)
+  const showDialogArchiveProject = ref<boolean>(false)
+
+  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:  () => { showDialogArchiveProject.value = true }},
+    { id: 4, title: 'project__delete', icon:  'mdi-trash-can-outline', iconColor:  'red', func:  () => { showDialogDeleteProject.value = true }},
+  ]
+
+  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 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)
+
+onMounted(() => loadProjectData())
+
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,89 @@
+<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'
+
+  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>

src/components/admin/projectInfoBlock.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="flex column">
+    <div class="flex column items-center col-grow q-pa-lg">
+      <pn-image-selector 
+        :size="100" 
+        :iconsize="80" 
+        class="q-pb-lg" 
+        v-model="modelValue.logo"
+      />
+      
+      <q-input
+        v-model="modelValue.name"
+        dense
+        filled
+        class="q-mt-sm w100"
+        :label="$t('project_card__project_name')"
+        :rules="[val => !!val || $t('validation.required')]"
+      />
+      
+      <q-input
+        v-model="modelValue.description"
+        dense
+        filled
+        autogrow
+        class="q-my-lg w100"
+        :label="$t('project_card__project_description')"
+      />
+    
+      <q-checkbox
+        v-if="modelValue.logo"
+        v-model="modelValue.logo_as_bg"
+        class="w100"
+        >
+        {{ $t('project_card__image_use_as_background_chats') }}
+      </q-checkbox>
+    </div>
+  </div>
+
+</template>
+
+<script setup lang="ts">
+  import type { ProjectParams } from 'src/types'
+  const modelValue = defineModel<ProjectParams>({ required: true })
+</script>
+
+<style>
+</style>

src/css/app.scss

@@ -0,0 +1,39 @@
+// app global css in SCSS form
+.text-brand {
+  color: $green-14 !important;
+}
+  
+.bg-brand {
+  background: $green-14 !important;
+}
+
+$base-width: 100;
+@while $base-width > 0 {
+   .w#{$base-width} { width: #{$base-width}+'%'; }
+   $base-width: $base-width - 10;
+}
+
+$base-height: 100;
+@while $base-height > 0 {
+   .h#{$base-height} { height: #{$base-height}+'%'; }
+   $base-height: $base-height - 10;
+}
+
+:root {
+  --body-width: 600px;
+  --top-raduis: 12px;
+}
+
+body {
+  overflow: hidden !important;
+}
+  
+.projects-header {
+  background-color: #eee;
+}
+
+.top-rounded-card {
+  border-top-left-radius: var(--top-raduis);
+  border-top-right-radius: var(--top-raduis);
+}
+  

src/css/quasar.variables.scss

@@ -0,0 +1,28 @@
+// Quasar SCSS (& Sass) Variables
+// --------------------------------------------------
+// To customize the look and feel of this app, you can override
+// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.
+
+// Check documentation for full list of Quasar variables
+
+// Your own variables (that are declared here) and Quasar's own
+// ones will be available out of the box in your .vue/.scss/.sass files
+
+// It's highly recommended to change the default colors
+// to match your app's branding.
+// Tip: Use the "Theme Builder" on Quasar's documentation website.
+
+$primary   : #1976D2;
+$secondary : #26A69A;
+$accent    : #9C27B0;
+
+$dark      : #1D1D1D;
+$dark-page : #121212;
+
+$positive  : #21BA45;
+$negative  : #C10015;
+$info      : #31CCEC;
+$warning   : #F2C037;
+
+$lightgrey   : #DCDCDC;
+

src/i18n/en-US/index — копия.ts

@@ -0,0 +1,18 @@
+// This is just an example,
+// so you can safely delete all default props below
+
+export default {
+  login__forgot_password: 'Forgot password?',
+  login__login: 'Login',
+  login__password: 'Password',
+  login__sign_in: 'Sign in',
+  login__sign_up: 'Register',
+  login__welcome: 'Welcome!',
+  project__companies: 'Companies',
+  project__persons: 'Persons',
+  project__chats: 'Chats',
+  projects__projects: 'Projects',
+  projects__account: 'Account',
+  failed: 'Action failed',
+  success: 'Action was successful'
+}

src/i18n/en-US/index.ts

@@ -0,0 +1 @@
+export default  { EN: 'EN',  RU: 'RU',  continue: 'Continue',  back: 'Back',  month: 'month',  months: 'months',  login__email: 'E-mail',  login__password: 'Password',  login__forgot_password: 'Forgot Password?',  login__sign_in: 'Log in',  login__incorrect_login_data: 'User data not found. Edit your auth details before continuing',  login__or_continue_as: 'or continue as',  login__terms_of_use: 'Terms of use',  login__accept_terms_of_use: 'I accept the',  login__register: 'Create account',  login__registration_message_ok: 'We sent message with instructions to your email',  login__registration_message_error: 'Error',  login__licensing_agreement: 'Licensing agreement',  login__have_account: 'Already have an accont?',  login__forgot_password_message: 'Enter your e-mail to recover your password. We will send instructions to the specified email address. If you havent received the email, check the Spam folder.',  login__forgot_password_message_ok: 'We sent message with instructions to your email',  login__forgot_password_message_error: 'Error',  user__logout: 'Logout',  projects__projects: 'Projects',  projects__show_archive: 'Show archive',  projects__hide_archive: 'Hide archive',  projects__restore_archive_warning: 'Attention!',  projects__restore_archive_warning_message: 'To restore a project from an archive, you must manually attach chats to it.',  project__chats: 'Chats',  project__persons: 'Persons',  project__companies: 'Companies',  project__edit: 'Edit',  project__backup: 'Backup',  project__archive: 'Archive',  project__delete: 'Delete',  project_chats__search: 'Search',  project_chats__send_chat: 'Request for attach chat',  project_chats__send_chat_description: 'Provide instructions to the chat admin',  project_chats__attach_chat: 'Attach chat',  project_chats__attach_chat_description: 'Requires chat administrator privileges',  project_chat__delete_warning: 'Warning!',  project_chat__delete_warning_message: 'Chat tracking will be discontinued. If necessary, the cat can be attached again.',  project_card__add_project: 'Add project',  project_card__project_name: 'Name',  project_card__project_description: 'Desription',  project_card__btn_accept: 'Accept',  project_card__btn_back: 'Back',  forgot_password__password_recovery: 'Password recovery',  forgot_password__enter_email: 'Enter account e-mail',  forgot_password__email: 'E-mail',  forgot_password__confirm_email: 'Confirm e-mail',  forgot_password__confirm_email_messege: 'Enter the Code from e-mail to continue recover your password. If you haven\'t received an e-mail with the Code, check the Spam folder.',  forgot_password__code: 'Code',  forgot_password__create_new_password: 'Set new password',  forgot_password__password: 'Password',  forgot_password__finish: 'Create',  account__user_settings: 'User settings',  account__your_company: 'Your company',  account__change_auth: 'Change authorization method',  account__change_auth_message_1: 'In case of corporate use, it is recommended to log in with a username and password.',  account__change_auth_message_2: 'After creating a user, all data from the Telegram account will be transferred to the new account.',  account__change_auth_btn: 'Create system account',  account__change_auth_warning: 'WARNING!',  account__change_auth_warning_message: 'Reverse data transfer is not possible.',  account__chats: 'Chats',  account__chats_active: 'Active',  account__chats_archive: 'Archive',  account__chats_free: 'Free',  account__chats_total: 'Total',  account__subscribe: 'Subscribe',  account__subscribe_info: 'With a subscription, you can attach more chats. Archived chats are not counted.',  account__subscribe_current_balance: 'Current balance',  account__subscribe_about: 'about',  account__subscribe_select_payment_1: 'You can pay for your subscription using ',  account__subscribe_select_payment_2: 'Telegram stars',  company__mask: 'Company cloacking',  mask__title_table: 'Ignore cloaking',  mask__title_table2: '(exclusion list)',  mask__help_title: 'Cloacking',  mask__help_message: 'It is possible to cloacking a company by representing its personnel as your own to companies other than those on the exclusion list.',  company_info__title_card: 'Company card',  company_info__name: 'Name',  company_info__description: 'Description',  company_info__persons: 'Persons',  company_create__title_card: 'Add company',  project_persons__search: 'Search',  person_card__title: 'Person card',  person_card__name: 'Name',  person_card__company: 'Company name',  person_card__department: 'Department',  person_card__role: 'Role' }

src/i18n/index.ts

@@ -0,0 +1,7 @@
+import enUS from './en-US'
+import ruRU from './ru-RU'
+
+export default {
+  'en-US': enUS,
+  'ru-RU': ruRU
+};

src/index copy.ts

@@ -0,0 +1,32 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface PiniaCustomProperties {
+    // add your custom properties here, if any
+  }
+}
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

src/layouts/MainLayout.vue

@@ -0,0 +1,43 @@
+<template>
+  <q-layout
+    view="lHr lpR lFr"
+    fit
+    class="fit no-scroll bg-transparent"
+    >
+    <q-drawer show-if-above side="left" class="drawer no-scroll" :width="drawerWidth" :breakpoint="bodyWidth"/>
+    <q-drawer show-if-above side="right" class="drawer no-scroll" :width="drawerWidth" :breakpoint="bodyWidth"/>
+
+    <q-page-container
+      class="q-pa-none q-ma-none no-scroll bg-transparent page-width"
+      >
+      <router-view />
+    </q-page-container>
+    <meshBackground/>
+    <q-resize-observer @resize="onResize"></q-resize-observer>
+  </q-layout>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import meshBackground from '../components/admin/meshBackground.vue'
+  function getCSSVar (varName: string) {
+    const root = document.documentElement
+    return getComputedStyle(root).getPropertyValue(varName).trim() 
+  }
+
+  const bodyWidth = parseInt(getCSSVar('--body-width'))
+  const drawerWidth = ref<number>(300)
+  function onResize () {
+    const clientWidth = document.documentElement.clientWidth;
+    drawerWidth.value = (clientWidth - bodyWidth)/2
+  }
+
+</script>
+
+<style>
+
+aside {
+  background-color: transparent !important;
+}
+
+</style>

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>

src/router/index.ts

@@ -0,0 +1,43 @@
+import { defineRouter } from '#q-app/wrappers'
+import {
+  createMemoryHistory,
+  createRouter,
+  createWebHashHistory,
+  createWebHistory,
+} from 'vue-router'
+import routes from './routes'
+import { useProjectsStore } from '../stores/projects'
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Router instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Router instance.
+ */
+
+export default defineRouter(function (/* { store, ssrContext } */) {
+  const createHistory = process.env.SERVER
+    ? createMemoryHistory
+    : (process.env.VUE_ROUTER_MODE === 'history' ? createWebHistory : createWebHashHistory)
+
+  const Router = createRouter({
+    scrollBehavior: () => ({ left: 0, top: 0 }),
+    routes,
+
+    // Leave this as is and make changes in quasar.conf.js instead!
+    // quasar.conf.js -> build -> vueRouterMode
+    // quasar.conf.js -> build -> publicPath
+    history: createHistory(process.env.VUE_ROUTER_BASE),
+  })
+
+  Router.afterEach((to) => {
+    if (!to.params.id) {
+      const projectsStore = useProjectsStore()
+      projectsStore.setCurrentProjectId(null)
+    }
+  })
+
+  return Router
+})

src/router/routes.ts

@@ -0,0 +1,110 @@
+import type { RouteRecordRaw, RouteLocationNormalized } from 'vue-router'
+import { useProjectsStore } from '../stores/projects'
+
+const setProjectBeforeEnter = (to: RouteLocationNormalized) => {
+  const id = Number(to.params.id)
+  const projectsStore = useProjectsStore()
+  projectsStore.setCurrentProjectId(
+    !isNaN(id) && projectsStore.projectById(id) ? id : null
+  )
+}
+
+const routes: RouteRecordRaw[] = [
+  {
+    path: '/',
+    component: () => import('layouts/MainLayout.vue'),
+    children: [
+      {
+        path: '',
+        redirect: '/projects'
+      },
+      {
+        name: 'projects',
+        path: '/projects',
+        component: () => import('pages/ProjectsPage.vue') 
+      },
+      {
+        name: 'project_add',
+        path: '/project/add',
+        component: () => import('pages/CreateProjectPage.vue')
+      },
+    
+      {
+        name: 'project_info',
+        path: '/project/:id(\\d+)/info',
+        component: () => import('pages/ProjectInfoPage.vue'),
+        beforeEnter: setProjectBeforeEnter
+      },
+      {
+        name: 'company_mask',
+        path: '/project/:id(\\d+)/company-mask',
+        component: () => import('pages/CompanyMaskPage.vue'),
+        beforeEnter: setProjectBeforeEnter
+      },
+      
+      {
+        path: '/project/:id(\\d+)',
+        component: () => import('pages/ProjectPage.vue'),
+        beforeEnter: setProjectBeforeEnter,
+        children: [
+          {
+            name: 'project',
+            path: '',
+            redirect: { name: 'chats' }
+          },
+          {
+            name: 'chats',
+            path: 'chats',
+            component: () => import('../components/admin/project-page/ProjectPageChats.vue')
+          },
+          {
+            name: 'persons',
+            path: 'persons',
+            component: () => import('../components/admin/project-page/ProjectPagePersons.vue')
+          },
+          {
+            name: 'companies',
+            path: 'companies',
+            component: () => import('../components/admin/project-page/ProjectPageCompanies.vue')
+          }
+        ]
+      },
+      {
+        path: '/account',
+        name: 'account',
+        component: () => import('pages/AccountPage.vue') 
+       },
+
+       {
+        path: '/login',
+        name: 'login',
+        component: () => import('pages/LoginPage.vue') 
+       },
+
+       {
+        path: '/recovery-password',
+        name: 'recovery_password',
+        component: () => import('pages/ForgotPasswordPage.vue') 
+       },
+
+       {
+        path: '/create-company',
+        name: 'create_company',
+        component: () => import('pages/CreateCompanyPage.vue') 
+       },
+
+       {
+        path: '/person-info',
+        name: 'person_info',
+        component: () => import('pages/PersonInfoPage.vue') 
+       }
+    ]
+  },
+  {
+    path: '/:catchAll(.*)*',
+    component: () => import('pages/ErrorNotFound.vue'),
+  }
+]
+
+
+export default routes

src/stores/chats.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Chat } from '../types'
+
+export const useChatsStore = defineStore('chats', () => {
+  const chats = ref<Chat[]>([])
+
+  chats.value.push(
+    {id: 11, name: 'Аудит ИБ', logo: 'https://cdn.quasar.dev/img/avatar5.jpg', persons: 8, owner_id: 111},
+    {id: 12, name: 'Разработка BI', logo: '', persons: 2, owner_id: 111},
+    {id: 3, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 4, owner_id: 112},
+    {id: 4, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 113},
+    {id: 15, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 112},
+    {id: 16, name: 'Разработка BI', logo: '', persons: 6, owner_id: 114},
+    {id: 17, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 58, owner_id: 111},
+    {id: 18, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 112},
+    {id: 19, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 11, owner_id: 113},
+    {id: 20, name: 'Разработка BI', logo: '', persons: 18, owner_id: 114},
+    {id: 113, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 11, owner_id: 115},
+    {id: 124, name: 'Расстрел нерадивых', logo: '', persons: 12, owner_id: 113},
+    {id: 217, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 112},
+    {id: 2113, name: '-Обсуждение дашбордов', logo: '', description: 'Какой-то кратенькое описание', persons: 4, owner_id: 111},
+    {id: 124, name: 'Расстрел нерадивых', logo: '', persons: 3, owner_id: 112},
+    {id: 2117, name: 'фыфыы Расстрел нерадивых', logo: '', persons: 5, owner_id: 111},
+  )
+  
+  function chatById (id :number) {
+    return chats.value.find(el =>el.id === id)
+  }
+  function deleteChat (id :number) {
+    const idx = chats.value.findIndex(item => item.id === id)
+    chats.value.splice(idx, 1)
+  }
+
+  return { chats, deleteChat, chatById }
+})

src/stores/companies.ts

@@ -0,0 +1,37 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Company, CompanyParams } from '../types'
+
+export const useCompaniesStore = defineStore('companies', () => {
+  const companies = ref<Company[]>([])
+
+  companies.value.push(
+    {id: 11, project_id: 11, name: 'Рога и копытца', logo: '', description: 'Монтажники вывески' },
+    {id: 21, project_id: 12, name: 'ООО "Василек33"', logo: '' },
+    {id: 13, project_id: 13, name: 'Откат и деньги', logo: '', description: 'Договариваются с администрацией' },
+  )
+  
+  function companyById (id :number) {
+    return companies.value.find(el =>el.id === id)
+  }
+  
+  function addCompany (company: CompanyParams) {
+    companies.value.push({
+      id: Date.now(),
+      project_id: Date.now() * 1000,
+      ...company
+    })
+  }
+
+  function updateCompany (id :number, company: CompanyParams) {
+    const idx = companies.value.findIndex(item => item.id === id)
+    Object.assign(companies.value[idx] || {}, company)
+  }
+
+  function deleteCompany (id :number) {
+    const idx = companies.value.findIndex(item => item.id === id)
+    companies.value.splice(idx, 1)
+  }
+
+  return { companies, addCompany, updateCompany, deleteCompany, companyById }
+})

src/stores/index.ts

@@ -0,0 +1,32 @@
+import { defineStore } from '#q-app/wrappers'
+import { createPinia } from 'pinia'
+
+/*
+ * When adding new properties to stores, you should also
+ * extend the `PiniaCustomProperties` interface.
+ * @see https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties
+ */
+declare module 'pinia' {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  export interface PiniaCustomProperties {
+    // add your custom properties here, if any
+  }
+}
+
+/*
+ * If not building with SSR mode, you can
+ * directly export the Store instantiation;
+ *
+ * The function below can be async too; either use
+ * async/await or return a Promise which resolves
+ * with the Store instance.
+ */
+
+export default defineStore((/* { ssrContext } */) => {
+  const pinia = createPinia()
+
+  // You can add Pinia plugins here
+  // pinia.use(SomePiniaPlugin)
+
+  return pinia
+})

src/stores/projects.ts

@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+import { defineStore } from 'pinia'
+import type { Project, ProjectParams } from '../types'
+
+export const useProjectsStore = defineStore('projects', () => {
+  const projects = ref<Project[]>([])
+  const currentProjectId = ref<number | null>(null)
+
+  projects.value.push(
+      { id: 1, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 3, companies: 1, persons: 5, is_archive: false, logo_as_bg: false },
+      { id: 2, name: 'Разделка бобра на куски', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 8, companies: 12, persons: 1, is_archive: false, logo_as_bg: false },
+      { id: 3, name: 'Комплекс мер', description: '', logo: '', chats: 8, companies: 3, persons: 4, is_archive: true, logo_as_bg: false },
+      { id: 4, name: 'Тестовый проект 2', description: 'Пример тестового проекта - тут описание чего-то', logo: '', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+      { id: 11, name: 'Тестовый проект 12', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/boy-avatar.png', chats: 5, companies: 2, persons: 5, is_archive: false, logo_as_bg: false },
+      { id: 12, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
+      { id: 13, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: true },
+      { id: 14, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+      { id: 112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false},
+      { id: 113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
+      { id: 114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: true, logo_as_bg: false },
+      { id: 1112, name: 'Разделка бобра на куски 11 Ох как много кусков пипец каааак много - резать тяжело', description: '', logo: '', chats: 8, companies: 3, persons: 1, is_archive: false, logo_as_bg: false },
+      { id: 1113, name: 'Тестовый проект и что-то еще', description: 'Пример тестового проекта - тут описание чего-то Ох как много кусков пипец каааак много - резать тяжело Ох как много кусков пипец каааак много - резать тяжело', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 8, companies: 3, persons: 4, is_archive: false, logo_as_bg: false },
+      { id: 1114, name: 'Тестовый проект', description: 'Пример тестового проекта - тут описание чего-то', logo: 'https://cdn.quasar.dev/img/mountains.jpg', chats: 12, companies: 11, persons: 15, is_archive: false, logo_as_bg: false },
+  )
+  
+  function projectById (id :number) {
+    return projects.value.find(el =>el.id === id)
+  }
+  
+  function addProject (project: ProjectParams) {
+    const newProject = {
+      id: Date.now(),
+      is_archive: false,
+      chats: 0,
+      persons: 0,
+      companies: 0,
+      ...project
+    }
+    projects.value.push(newProject)
+    return newProject
+  }
+
+  function updateProject (id :number, project :Project) {
+    const idx = projects.value.findIndex(item => item.id === id)
+    Object.assign(projects.value[idx] || {}, project)
+  }
+
+  function archiveProject (id :number, status :boolean) {
+    const idx = projects.value.findIndex(item => item.id === id)
+    if (projects.value[idx])  projects.value[idx].is_archive = status
+  }
+
+  function deleteProject (id :number) {
+    const idx = projects.value.findIndex(item => item.id === id)
+    projects.value.splice(idx, 1)
+  }
+
+  function setCurrentProjectId (id: number | null) {
+    currentProjectId.value = id
+  }
+
+  function getCurrentProject () {
+    return currentProjectId.value ? projectById(currentProjectId.value) : <Project>{}
+  }
+
+  return {
+    projects,
+    currentProjectId,
+    projectById,
+    addProject,
+    updateProject,
+    archiveProject,
+    deleteProject,
+    setCurrentProjectId,
+    getCurrentProject
+  }
+})

src/types.ts

@@ -0,0 +1,47 @@
+interface ProjectParams {
+  name: string
+  description?: string
+  logo?: string
+  logo_as_bg: boolean
+}
+
+interface Project extends ProjectParams {
+  id: number
+  is_archive: boolean
+  chats: number
+  companies: number
+  persons: number
+}
+
+interface Chat {
+  id: number
+  // project_id: number
+  name: string
+  description?: string
+  logo?: string
+  persons: number
+  owner_id: number
+}
+
+interface CompanyParams {
+  name: string
+  description?: string
+  address?: string
+  site?: string
+  phone?: string
+  email?: string
+  logo?: string
+}
+
+interface Company extends CompanyParams {
+  id: number
+  project_id: number
+}
+
+export type {
+  Project,
+  ProjectParams,
+  Chat,
+  Company,
+  CompanyParams
+}

todo.txt

@@ -0,0 +1,74 @@
+0. Общее:
+
+1. Login:
++ Окно "Забыли пароль?"
+- Надпись "Неправильный логин или пароль"
+- Окно "Регистрация нового пользователя"
+- Переводы
+- Верификация e-mail
+
+2. Account:
++ Работа с изображением логотипа компании
+- Перенос аккаунта с телеграмм на логин/пароль
+- Форма оплаты
+
+3. ProjectsPage:
++ Архивные проекты
++ (баг) Промотка шапки в конце прокрутки списка проектов
++ Добавить тень при прокрутке списка на заголовке "Проекты"
++ Окно добавить проект
+- При добавлении проекта проверять валидность, если не валидно то скрывать галку "Применить"
+
+4.1 ProjectPage - Заголовок:
+- Анимация расширенной версии (плавное увеличение блока div)
++ Окно редактирования проекта
+- При изменении свойств проекта проверять валидность, если не валидно то скрывать галку "Применить"
+- Продумать backup
+- Окно отправки проекта в архив
++ Окно удаления проекта
+
+4.2 ProjectPage - Чаты:
++ Окно прикрепления нового чата
++ Добавить диалог при слайдинге чата об подтверждении удаления и предупреждением.
++ Сделать стор с чатами
++ Настроить роутинг
++ У чатов добавить кол-во пользователей
+- У чатов добавить указание владельца чата и его компанию
+
+4.3 ProjectPage - Люди:
+- Перечень сотрудников
++ Окно редактирования сотрудника
+- При изменении сотрудников проверять валидность, если не валидно то скрывать галку "Применить"
+- Сделать стор с персоналом
+- Настроить роутинг
+
+4.4 ProjectPage - Компании:
++ Перечень компаний
++ Окно редактирования компании
+- При изменении компании проверять валидность, если не валидно то скрывать галку "Применить"
+- Окно настройки видимости компаний
+
+4.5 ProjectPage - МаскировкаЖ
+- Сделать стор и настроить компоненты
+
+
+BUGS:
+- 1. Прыгает кнопка fab при перещелкивании табов
++ 2. Верстка в шапке Projects плохая - переделать
+- 3. Не хватает перевода местами
++ 4. При нажатии Back браузера скидывается активная табка.
++ 5. Криво работает удаление чата (полоски-бордюры) // дописывается стиль 
+
+Need refactor
+- 1. Слияение объектов разных типов, но с одинаковыми ключами (например, в updateProject через ObjectAssign)
+
+Current ToDo:
++ 1. pinia
++ 2. Реализовать функционал меню - редактирование проекта. (Бекар на потом)
++ 3. Архивные чаты и проекты. (Чаты отказался)
++4. Добавление компании.
++ 5. Удаление компании (слайдер), как в чате.
+- 6. Страница аккаунта: 
+- 6.1 Переделать выбор платежей.
+- 6.2 Окошко смены емейл аккаунта при входе с емейла.
+- 7. Настроить git

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./.quasar/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "src/*": ["./src/*"],
+      "app/*": ["./src/*"],
+      "components/*": ["./src/components/*"],
+      "layouts/*": ["./src/layouts/*"],
+      "pages/*": ["./src/pages/*"],
+      "assets/*": ["./src/assets/*"],
+      "boot/*": ["./src/boot/*"],
+      "stores/*": ["./src/stores/*"]
+    },
+    "types": ["node"]
+  }
+}