From 6a683744297544900367a9d5e2b025d4441ad537 Mon Sep 17 00:00:00 2001
From: Dmitry Shurco <dmitry@werbot.com>
Date: Fri, 5 Jul 2024 17:20:39 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A6=84=20refactor:=20storage=20for=20proj?=
 =?UTF-8?q?ects?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Breadcrumbs/server-name.vue    |   8 +-
 src/components/Pagination/index.vue           |   2 +-
 src/pages/profile/keys/index.vue              |   2 +-
 src/pages/profile/logs.vue                    |   2 +-
 src/pages/projects/_projectId/index.vue       |  72 ++++++++---
 .../projects/_projectId/members/index.vue     |   2 +-
 .../projects/_projectId/members/invites.vue   |   2 +-
 .../_projectId/servers/_serverId/activity.vue |   8 +-
 .../_projectId/servers/_serverId/destroy.vue  |   8 +-
 .../_projectId/servers/_serverId/firewall.vue |  10 +-
 .../_projectId/servers/_serverId/index.vue    |   8 +-
 .../_serverId/members/_memberId/index.vue     |   8 +-
 .../servers/_serverId/members/add.vue         |  10 +-
 .../servers/_serverId/members/index.vue       |  10 +-
 .../servers/_serverId/session/_sessionId.vue  |   8 +-
 .../servers/_serverId/session/index.vue       |   8 +-
 .../_projectId/servers/_serverId/setting.vue  |  10 +-
 .../projects/_projectId/servers/index.vue     |   2 +-
 src/pages/projects/index.vue                  |   2 +-
 src/proto/project.ts                          |  51 ++++++--
 src/store/index.ts                            |   6 +-
 src/store/modules/auth.ts                     |   4 +-
 src/store/modules/project.ts                  | 120 ++++++++++++++++++
 src/store/modules/server.ts                   |  73 -----------
 src/utils/time.ts                             |   4 +-
 25 files changed, 271 insertions(+), 169 deletions(-)
 create mode 100644 src/store/modules/project.ts
 delete mode 100644 src/store/modules/server.ts

diff --git a/src/components/Breadcrumbs/server-name.vue b/src/components/Breadcrumbs/server-name.vue
index 2ad1399..056e715 100644
--- a/src/components/Breadcrumbs/server-name.vue
+++ b/src/components/Breadcrumbs/server-name.vue
@@ -1,14 +1,14 @@
 <template>
   <router-link :to="{ name: 'projects-projectId-servers' }">
-    {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+    {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
   </router-link>
 </template>
 
 <script lang="ts" setup>
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps<{
   memberId: string;
@@ -17,6 +17,6 @@ const props = defineProps<{
 }>();
 
 onMounted(async () => {
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/components/Pagination/index.vue b/src/components/Pagination/index.vue
index 732b440..9eead36 100644
--- a/src/components/Pagination/index.vue
+++ b/src/components/Pagination/index.vue
@@ -39,7 +39,7 @@ const getQuery = (page: number) => ({
   offset: (page - 1) * limit.value
 });
 
-const onSelectPage = (query: Record<string, unknown>): void => {
+const onSelectPage = (query: Record<string, any>): void => {
   emits("selectPage", query);
 };
 </script>
diff --git a/src/pages/profile/keys/index.vue b/src/pages/profile/keys/index.vue
index 1d78071..4338637 100644
--- a/src/pages/profile/keys/index.vue
+++ b/src/pages/profile/keys/index.vue
@@ -96,7 +96,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/pages/profile/logs.vue b/src/pages/profile/logs.vue
index d9986b8..c81512f 100644
--- a/src/pages/profile/logs.vue
+++ b/src/pages/profile/logs.vue
@@ -128,7 +128,7 @@ const getData = async (routeQuery?: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/pages/projects/_projectId/index.vue b/src/pages/projects/_projectId/index.vue
index 8ab2811..27e38f5 100644
--- a/src/pages/projects/_projectId/index.vue
+++ b/src/pages/projects/_projectId/index.vue
@@ -1,22 +1,35 @@
 <template>
   <div class="artboard">
     <header>
-      <h1>Project information</h1>
+      <h1>{{ pageData.base.title }}</h1>
     </header>
 
-    <div class="content">{{ pageData.base }}</div>
+    <div class="desc">Project information</div>
+
+    <div class="content">
+      <dl class="info">
+        <router-link
+          v-for="item in infoItems"
+          :key="item.countKey"
+          :to="{ name: item.routeName, params: { projectId: props.projectId } }"
+        >
+          <div>
+            <dt>{{ item.label }}</dt>
+            <dd>{{ projectStore.projects[props.projectId]?.info[item.countKey] || 0 }}</dd>
+          </div>
+        </router-link>
+      </dl>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { showApiError } from "@/utils";
 import { defaultPageData, PageData } from "@/interface/page";
+import { useProjectStore } from "@/store";
 
 // API section
-import { api } from "@/api";
-import { Project_Request } from "@proto/project";
-
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -27,21 +40,7 @@ const props = defineProps({
 });
 
 const getData = async (): Promise<void> => {
-  try {
-    const queryParams = <Project_Request>{
-      project_id: props.projectId
-    };
-
-    const res = await api().GET(`/v1/projects`, queryParams);
-    if (res.data) {
-      pageData.value.base = res.data.result;
-    }
-    if (res.error) {
-      showApiError(res.error);
-    }
-  } catch (err) {
-    console.error("Unexpected error:", err);
-  }
+  projectStore.projectInfo(props.projectId);
 };
 
 watch(() => props.projectId, getData);
@@ -50,4 +49,35 @@ onMounted(async () => {
   document.title = "Project information";
   await getData();
 });
+
+const infoItems = [
+  { label: "Servers", routeName: "projects-projectId-servers", countKey: "servers_count" },
+  { label: "Databases", routeName: "projects-projectId-databases", countKey: "database_count" },
+  { label: "Applications", routeName: "projects-projectId-applications", countKey: "applications_count" },
+  { label: "Desktops", routeName: "projects-projectId-desktops", countKey: "desktops_count" },
+  { label: "Containers", routeName: "projects-projectId-containers", countKey: "containers_count" },
+  { label: "Clouds", routeName: "projects-projectId-clouds", countKey: "clouds_count" }
+];
 </script>
+
+<style lang="scss">
+dl.info {
+  @apply flex flex-wrap gap-4;
+
+  a {
+    @apply no-underline;
+  }
+
+  div {
+    @apply flex w-32 flex-col rounded border border-gray-100 px-4 py-8 text-center;
+
+    dt {
+      @apply order-last text-lg font-medium text-gray-500;
+    }
+
+    dd {
+      @apply text-4xl font-extrabold text-gray-600 md:text-5xl;
+    }
+  }
+}
+</style>
diff --git a/src/pages/projects/_projectId/members/index.vue b/src/pages/projects/_projectId/members/index.vue
index 02329eb..dcd3350 100644
--- a/src/pages/projects/_projectId/members/index.vue
+++ b/src/pages/projects/_projectId/members/index.vue
@@ -124,7 +124,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/pages/projects/_projectId/members/invites.vue b/src/pages/projects/_projectId/members/invites.vue
index 742b852..5a82924 100644
--- a/src/pages/projects/_projectId/members/invites.vue
+++ b/src/pages/projects/_projectId/members/invites.vue
@@ -106,7 +106,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/pages/projects/_projectId/servers/_serverId/activity.vue b/src/pages/projects/_projectId/servers/_serverId/activity.vue
index c811b3d..786a3ed 100644
--- a/src/pages/projects/_projectId/servers/_serverId/activity.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/activity.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">Time at which access to the server is possible</div>
@@ -68,7 +68,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { showApiError, showMessage } from "@/utils";
 import { Badge, FormButton, Tabs } from "@/components";
 import { defaultPageData, PageData } from "@/interface/page";
@@ -80,7 +80,7 @@ import { ServerActivity_Request, UpdateServerActivity_Request } from "@proto/ser
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -199,7 +199,7 @@ const templateWork = {
 
 onMounted(async () => {
   document.title = "Server activity";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData();
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/destroy.vue b/src/pages/projects/_projectId/servers/_serverId/destroy.vue
index 482974a..fbeee43 100644
--- a/src/pages/projects/_projectId/servers/_serverId/destroy.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/destroy.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
 
     <Tabs :tabs="tabMenu" />
@@ -26,7 +26,7 @@
 <script lang="ts" setup>
 import { onMounted } from "vue";
 import { useRouter } from "vue-router";
-import { useAuthStore, useServerStore } from "@/store";
+import { useAuthStore, useProjectStore } from "@/store";
 import { FormButton, Tabs } from "@/components";
 import { showApiError, showMessage } from "@/utils";
 
@@ -39,7 +39,7 @@ import { tabMenu } from "./tab";
 
 const router = useRouter();
 const authStore = useAuthStore();
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -75,6 +75,6 @@ const onDelete = async (): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Destroy server";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/firewall.vue b/src/pages/projects/_projectId/servers/_serverId/firewall.vue
index 46f2f44..8faa796 100644
--- a/src/pages/projects/_projectId/servers/_serverId/firewall.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/firewall.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">In addition to creating your own, some add-ons come with their own.</div>
@@ -99,7 +99,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { Address4, Address6 } from "ip-address";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { showApiError, showMessage } from "@/utils";
 import { Badge, FormInput, FormToggle, SvgIcon, Tabs } from "@/components";
 import { PageData } from "@/interface/page";
@@ -118,7 +118,7 @@ import {
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>({
   base: {
     country: [],
@@ -253,7 +253,7 @@ const addIp = async (ip: string, rules: Rules): Promise<void> => {
 };
 
 // ---
-const create = async (record: any, rules: Rules): Promise<unknown> => {
+const create = async (record: any, rules: Rules): Promise<any> => {
   const { projectId, serverId } = props;
 
   try {
@@ -378,7 +378,7 @@ const remove = async (index: number, rules: Rules): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Server firewall";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData();
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/index.vue b/src/pages/projects/_projectId/servers/_serverId/index.vue
index b633fe8..d778521 100644
--- a/src/pages/projects/_projectId/servers/_serverId/index.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/index.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">
@@ -17,13 +17,13 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { Tabs } from "@/components";
 
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -38,6 +38,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server info";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/members/_memberId/index.vue b/src/pages/projects/_projectId/servers/_serverId/members/_memberId/index.vue
index a439828..347a416 100644
--- a/src/pages/projects/_projectId/servers/_serverId/members/_memberId/index.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/members/_memberId/index.vue
@@ -7,7 +7,7 @@
         </router-link>
       </h1>
       <div class="breadcrumbs">
-        {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+        {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
         <span>
           <router-link
             :to="{
@@ -27,13 +27,13 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { Tabs } from "@/components";
 
 // Tabs section
 import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -52,6 +52,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server member";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/members/add.vue b/src/pages/projects/_projectId/servers/_serverId/members/add.vue
index 63d3427..da61e50 100644
--- a/src/pages/projects/_projectId/servers/_serverId/members/add.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/members/add.vue
@@ -7,7 +7,7 @@
         </router-link>
       </h1>
       <div class="breadcrumbs">
-        {{ serverStore.getServerNameByID(props.projectId, props.serverId) }}
+        {{ projectStore.getServerNameByID(props.projectId, props.serverId) }}
         <span>
           <router-link
             :to="{
@@ -64,7 +64,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useAuthStore, useServerStore } from "@/store";
+import { useAuthStore, useProjectStore } from "@/store";
 import { Badge, Pagination, SvgIcon, Tabs } from "@/components";
 import { showApiError, showMessage } from "@/utils";
 import { defaultPageData, PageData } from "@/interface/page";
@@ -78,7 +78,7 @@ import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
 const route = useRoute();
 const authStore = useAuthStore();
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -92,7 +92,7 @@ const props = defineProps({
   }
 });
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
@@ -157,7 +157,7 @@ const addingMember = async (index: number): Promise<void> => {
 
 onMounted(async () => {
   document.title = "Server member add";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData(route.query);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/members/index.vue b/src/pages/projects/_projectId/servers/_serverId/members/index.vue
index afa27dc..516e381 100644
--- a/src/pages/projects/_projectId/servers/_serverId/members/index.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/members/index.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
       <router-link :to="{ name: 'projects-projectId-servers-serverId-members-add' }" class="breadcrumbs">
         <SvgIcon name="plus_square" class="mr-3" />
         add new
@@ -77,7 +77,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
-import { useAuthStore, useServerStore } from "@/store";
+import { useAuthStore, useProjectStore } from "@/store";
 import { showApiError, showMessage, toDate } from "@/utils";
 import { FormButton, FormToggle, Modal, Pagination, SvgIcon, Tabs } from "@/components";
 import { defaultPageData, PageData } from "@/interface/page";
@@ -91,7 +91,7 @@ import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
 const route = useRoute();
 const authStore = useAuthStore();
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>(defaultPageData);
 
 const props = defineProps({
@@ -133,7 +133,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
@@ -200,7 +200,7 @@ const closeModal = (): void => {
 
 onMounted(async () => {
   document.title = "Server member";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData(route.query);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/session/_sessionId.vue b/src/pages/projects/_projectId/servers/_serverId/session/_sessionId.vue
index 058dc4b..93856c6 100644
--- a/src/pages/projects/_projectId/servers/_serverId/session/_sessionId.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/session/_sessionId.vue
@@ -7,7 +7,7 @@
         </router-link>
       </h1>
       <div class="breadcrumbs">
-        <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+        <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
         <span>
           <router-link
             :to="{
@@ -25,9 +25,9 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -46,6 +46,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server session info";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/session/index.vue b/src/pages/projects/_projectId/servers/_serverId/session/index.vue
index f22cc9c..1150942 100644
--- a/src/pages/projects/_projectId/servers/_serverId/session/index.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/session/index.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
 
@@ -33,13 +33,13 @@
 
 <script setup lang="ts">
 import { onMounted } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { Tabs } from "@/components";
 
 // Tabs section
 import { tabMenu } from "@/pages/projects/_projectId/servers/_serverId/tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 
 const props = defineProps({
   projectId: {
@@ -54,6 +54,6 @@ const props = defineProps({
 
 onMounted(async () => {
   document.title = "Server session list";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
 });
 </script>
diff --git a/src/pages/projects/_projectId/servers/_serverId/setting.vue b/src/pages/projects/_projectId/servers/_serverId/setting.vue
index ec93c4c..49478a3 100644
--- a/src/pages/projects/_projectId/servers/_serverId/setting.vue
+++ b/src/pages/projects/_projectId/servers/_serverId/setting.vue
@@ -6,7 +6,7 @@
           Servers
         </router-link>
       </h1>
-      <div class="breadcrumbs">{{ serverStore.getServerNameByID(props.projectId, props.serverId) }}</div>
+      <div class="breadcrumbs">{{ projectStore.getServerNameByID(props.projectId, props.serverId) }}</div>
     </header>
     <Tabs :tabs="tabMenu" />
     <div class="desc">
@@ -141,7 +141,7 @@
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 import { useClipboard } from "@vueuse/core";
 import { FormButton, FormInput, FormTextarea, FormToggle, SvgIcon, Tabs } from "@/components";
 import { showApiError, showMessage } from "@/utils";
@@ -154,7 +154,7 @@ import { Auth, Server_Request, ServerAccess_Request } from "@proto/server";
 // Tabs section
 import { tabMenu } from "./tab";
 
-const serverStore = useServerStore();
+const projectStore = useProjectStore();
 const pageData = ref<PageData>({
   base: {
     host: {},
@@ -265,7 +265,7 @@ const onUpdate = async (typeData: string): Promise<void> => {
     const res = await api(false).UPDATE(`/v1/servers`, {}, bodyParams);
     if (res.data) {
       if (typeData === "info") {
-        serverStore.updateServerNameByID(props.projectId, props.serverId, title);
+        projectStore.updateServerNameByID(props.projectId, props.serverId, title);
         ["address", "port", "login", "description"].forEach((field) => {
           pageData.value.error[`info.${field}`] = null;
         });
@@ -356,7 +356,7 @@ watch(copied, (val) => {
 
 onMounted(async () => {
   document.title = "Server setting";
-  serverStore.serverNameByID(props.projectId, props.serverId);
+  projectStore.serverNameByID(props.projectId, props.serverId);
   await getData();
 
   if (pageData.value.base.host.audit === undefined) {
diff --git a/src/pages/projects/_projectId/servers/index.vue b/src/pages/projects/_projectId/servers/index.vue
index 13b6346..8dc11ba 100644
--- a/src/pages/projects/_projectId/servers/index.vue
+++ b/src/pages/projects/_projectId/servers/index.vue
@@ -167,7 +167,7 @@ const getData = async (routeQuery: any): Promise<void> => {
   }
 };
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/pages/projects/index.vue b/src/pages/projects/index.vue
index 176cf3a..4482d0e 100644
--- a/src/pages/projects/index.vue
+++ b/src/pages/projects/index.vue
@@ -70,7 +70,7 @@ const route = useRoute();
 const authStore = useAuthStore();
 const pageData = ref<PageData>(defaultPageData);
 
-const onSelectPage = (e: unknown): void => {
+const onSelectPage = (e: any): void => {
   getData(e);
 };
 
diff --git a/src/proto/project.ts b/src/proto/project.ts
index ae372f3..4644845 100644
--- a/src/proto/project.ts
+++ b/src/proto/project.ts
@@ -85,28 +85,48 @@ export interface Project_Response {
      * @generated from protobuf field: string login = 4;
      */
     login: string;
-    /**
-     * @generated from protobuf field: int32 members_count = 5;
-     */
-    members_count: number;
     /**
      * @generated from protobuf field: int32 servers_count = 6;
      */
     servers_count: number;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp locked_at = 7;
+     * @generated from protobuf field: int32 databases_count = 7;
+     */
+    databases_count: number;
+    /**
+     * @generated from protobuf field: int32 applications_count = 8;
+     */
+    applications_count: number;
+    /**
+     * @generated from protobuf field: int32 desktops_count = 9;
+     */
+    desktops_count: number;
+    /**
+     * @generated from protobuf field: int32 containers_count = 10;
+     */
+    containers_count: number;
+    /**
+     * @generated from protobuf field: int32 clouds_count = 11;
+     */
+    clouds_count: number;
+    /**
+     * @generated from protobuf field: int32 members_count = 12;
+     */
+    members_count: number;
+    /**
+     * @generated from protobuf field: google.protobuf.Timestamp locked_at = 13;
      */
     locked_at?: Timestamp;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp archived_at = 8;
+     * @generated from protobuf field: google.protobuf.Timestamp archived_at = 14;
      */
     archived_at?: Timestamp;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp updated_at = 9;
+     * @generated from protobuf field: google.protobuf.Timestamp updated_at = 15;
      */
     updated_at?: Timestamp;
     /**
-     * @generated from protobuf field: google.protobuf.Timestamp created_at = 10;
+     * @generated from protobuf field: google.protobuf.Timestamp created_at = 16;
      */
     created_at?: Timestamp;
 }
@@ -398,12 +418,17 @@ class Project_Response$Type extends MessageType<Project_Response> {
             { no: 2, name: "owner_id", kind: "scalar", localName: "owner_id", T: 9 /*ScalarType.STRING*/ },
             { no: 3, name: "title", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
             { no: 4, name: "login", kind: "scalar", T: 9 /*ScalarType.STRING*/ },
-            { no: 5, name: "members_count", kind: "scalar", localName: "members_count", T: 5 /*ScalarType.INT32*/ },
             { no: 6, name: "servers_count", kind: "scalar", localName: "servers_count", T: 5 /*ScalarType.INT32*/ },
-            { no: 7, name: "locked_at", kind: "message", localName: "locked_at", T: () => Timestamp },
-            { no: 8, name: "archived_at", kind: "message", localName: "archived_at", T: () => Timestamp },
-            { no: 9, name: "updated_at", kind: "message", localName: "updated_at", T: () => Timestamp },
-            { no: 10, name: "created_at", kind: "message", localName: "created_at", T: () => Timestamp }
+            { no: 7, name: "databases_count", kind: "scalar", localName: "databases_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 8, name: "applications_count", kind: "scalar", localName: "applications_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 9, name: "desktops_count", kind: "scalar", localName: "desktops_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 10, name: "containers_count", kind: "scalar", localName: "containers_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 11, name: "clouds_count", kind: "scalar", localName: "clouds_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 12, name: "members_count", kind: "scalar", localName: "members_count", T: 5 /*ScalarType.INT32*/ },
+            { no: 13, name: "locked_at", kind: "message", localName: "locked_at", T: () => Timestamp },
+            { no: 14, name: "archived_at", kind: "message", localName: "archived_at", T: () => Timestamp },
+            { no: 15, name: "updated_at", kind: "message", localName: "updated_at", T: () => Timestamp },
+            { no: 16, name: "created_at", kind: "message", localName: "created_at", T: () => Timestamp }
         ]);
     }
 }
diff --git a/src/store/index.ts b/src/store/index.ts
index de455d9..03db9fb 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -3,7 +3,7 @@ import { createPinia } from "pinia";
 
 import { useAuthStore } from "@/store/modules/auth";
 import { useSystemStore } from "@/store/modules/system";
-import { useServerStore } from "@/store/modules/server";
+import { useProjectStore } from "@/store/modules/project";
 
 export default {
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
@@ -13,7 +13,7 @@ export default {
     const stores = {
       authStore: useAuthStore(),
       systemStore: useSystemStore(),
-      serverStore: useServerStore()
+      projectStore: useProjectStore()
     };
 
     Object.keys(stores).forEach((name) => {
@@ -29,4 +29,4 @@ export default {
   }
 };
 
-export { useAuthStore, useSystemStore, useServerStore };
+export { useAuthStore, useSystemStore, useProjectStore };
diff --git a/src/store/modules/auth.ts b/src/store/modules/auth.ts
index f7088a6..16ba53f 100644
--- a/src/store/modules/auth.ts
+++ b/src/store/modules/auth.ts
@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { useServerStore } from "@/store";
+import { useProjectStore } from "@/store";
 
 import { api } from "@/api";
 import { RefreshTokenRequest, SignIn_Request } from "@proto/account";
@@ -60,7 +60,7 @@ export const useAuthStore = defineStore("auth", {
 
       this.logged_in = false;
       this.$reset();
-      useServerStore().resetStore();
+      useProjectStore().resetStore();
     },
 
     resetError() {
diff --git a/src/store/modules/project.ts b/src/store/modules/project.ts
new file mode 100644
index 0000000..6f4ca8f
--- /dev/null
+++ b/src/store/modules/project.ts
@@ -0,0 +1,120 @@
+import { defineStore } from "pinia";
+import { api } from "@/api";
+import { Project_Request } from "@proto/project";
+import { ServerNameByID_Request } from "@proto/server";
+import { checkTimestampDifference } from "@/utils";
+
+interface ProjectState {
+  [key: string]: {
+    info: any;
+    servers: {
+      [key: string]: {
+        name: string;
+        timestamp: number;
+      };
+    };
+    timestamp: number;
+  };
+}
+
+export const useProjectStore = defineStore("project", {
+  state: () => ({
+    projects: <ProjectState>{}
+  }),
+
+  getters: {
+    getProjectInfo:
+      (state) =>
+      (project_id: string): string => {
+        return state.projects?.[project_id]?.info ?? undefined;
+      },
+
+    getServerNameByID:
+      (state) =>
+      (project_id: string, server_id: string): string => {
+        return state.projects?.[project_id]?.servers[server_id]?.name ?? undefined;
+      }
+  },
+
+  actions: {
+    resetStore() {
+      this.$reset();
+    },
+
+    async projectInfo(project_id: string) {
+      if (
+        this.projects?.[project_id]?.timestamp &&
+        checkTimestampDifference(this.projects[project_id].timestamp, 3600)
+      ) {
+        return;
+      }
+
+      try {
+        const queryParams = <Project_Request>{ project_id: project_id };
+        const res = await api().GET(`/v1/projects`, queryParams);
+        if (res.data) {
+          const servers = this.projects[project_id] || {};
+
+          this.projects = {
+            ...this.projects,
+            [project_id]: {
+              info: { ...res.data.result },
+              servers: servers || {},
+              timestamp: Date.now()
+            }
+          };
+        }
+      } catch (err) {
+        console.error("Unexpected error:", err);
+      }
+    },
+
+    async serverNameByID(project_id: string, server_id: string) {
+      if (
+        this.base?.[project_id]?.[server_id]?.name !== undefined &&
+        checkTimestampDifference(this.base[project_id][server_id].timestamp, 3600)
+      ) {
+        return;
+      }
+
+      try {
+        const queryParams = <ServerNameByID_Request>{
+          //user_id
+          project_id: project_id,
+          server_id: server_id
+        };
+
+        const res = await api(false).GET(`/v1/servers/name`, queryParams);
+        if (res.data) {
+          const project = this.projects[project_id] || {};
+          const servers = project.servers || {};
+          const info = project.info || {};
+
+          this.projects = {
+            ...this.projects,
+            [project_id]: {
+              info: { ...info },
+              servers: {
+                ...servers,
+                [server_id]: {
+                  name: res.data.result.server_name,
+                  timestamp: new Date().getTime()
+                }
+              },
+              timestamp: project.timestamp
+            }
+          };
+        }
+      } catch (err) {
+        console.error("Unexpected error:", err);
+      }
+    },
+
+    async updateServerNameByID(project_id: string, server_id: string, new_name: string) {
+      this.base[project_id][server_id] = {
+        name: new_name,
+        timestamp: new Date().getTime()
+      };
+    }
+  }
+});
diff --git a/src/store/modules/server.ts b/src/store/modules/server.ts
deleted file mode 100644
index da322d7..0000000
--- a/src/store/modules/server.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { defineStore } from "pinia";
-import { api } from "@/api";
-import { ServerNameByID_Request } from "@proto/server";
-import { checkTimestampDifference } from "@/utils";
-
-interface ServerState {
-  [key: string]: {
-    [key: string]: {
-      name: string;
-      timestamp: number;
-    };
-  };
-}
-
-export const useServerStore = defineStore("server", {
-  state: () => ({
-    base: <ServerState>{}
-  }),
-
-  getters: {
-    getServerNameByID:
-      (state) =>
-      (project_id: string, server_id: string): string => {
-        return state.base?.[project_id]?.[server_id]?.name ?? undefined;
-      }
-  },
-
-  actions: {
-    resetStore() {
-      this.$reset();
-    },
-
-    async serverNameByID(project_id: string, server_id: string) {
-      if (
-        this.base?.[project_id]?.[server_id]?.name !== undefined &&
-        checkTimestampDifference(this.base[project_id][server_id].timestamp)
-      ) {
-        return;
-      }
-
-      try {
-        const queryParams = <ServerNameByID_Request>{
-          //user_id
-          project_id: project_id,
-          server_id: server_id
-        };
-
-        const res = await api(false).GET(`/v1/servers/name`, queryParams);
-        if (res.data) {
-          this.base = {
-            ...this.base,
-            [project_id]: {
-              ...this.base[project_id],
-              [server_id]: {
-                name: res.data.result.server_name,
-                timestamp: new Date().getTime()
-              }
-            }
-          };
-        }
-      } catch (err) {
-        console.error("Unexpected error:", err);
-      }
-    },
-
-    async updateServerNameByID(project_id: string, server_id: string, new_name: string) {
-      this.base[project_id][server_id] = {
-        name: new_name,
-        timestamp: new Date().getTime()
-      };
-    }
-  }
-});
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 1fef54f..1472ef2 100644
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -16,11 +16,11 @@ export function addHours(date: Date, hours: number): Date {
   return date;
 }
 
-export function checkTimestampDifference(timestamp: number): boolean {
+export function checkTimestampDifference(timestamp: number, lifeTimeSec: number): boolean {
   const currentTimestamp: number = new Date().getTime();
   const differenceInMilliseconds: number = currentTimestamp - timestamp;
 
-  if (differenceInMilliseconds > 3600000) {
+  if (differenceInMilliseconds > lifeTimeSec) {
     return false;
   }
   return true;