diff --git a/components/MainSection.vue b/components/MainSection.vue
index ea1b39f..45f2d6b 100644
--- a/components/MainSection.vue
+++ b/components/MainSection.vue
@@ -259,15 +259,18 @@
 // import ImageUploader from "vue-image-upload-resize";
 // import keyValueApi from "@apis/keyValueApi";
 // import { mapActions, mapGetters, mapMutations } from "vuex";
-import taskApi from "@apis/taskApi";
-import HttpService from "@services/httpService";
+import taskApi from "@task/apis/taskApi";
+// import HttpService from "@services/httpService";
 // import VuePersianDatetimePicker from "vue-persian-datetime-picker";
 import { p2e } from "@plugins/persianNumber";
-import { mapGetters, mapMutations } from "vuex";
+// import { mapGetters, mapMutations } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useAuthStore } from "~/stores/authStore";
 
 export default {
   beforeMount() {
-    this.httpService = new HttpService();
+    // this.httpService = new HttpService();
+    this.httpService = useNuxtApp()["$http"];
   },
   mounted() {
     this.setCurrentUserData();
@@ -293,6 +296,7 @@ export default {
 
   data() {
     return {
+      httpService: {},
       foundUsers: [],
       selectedUser: {
         id: undefined,
@@ -346,7 +350,7 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["currentUser", "taskSchemaGetter"]),
+    ...mapState(useAuthStore,["currentUser", "taskSchemaGetter"]),
   },
   methods: {
     setCurrentUserData() {
diff --git a/components/Navbar.vue b/components/Navbar.vue
index dbe7e9b..5d34a4b 100644
--- a/components/Navbar.vue
+++ b/components/Navbar.vue
@@ -23,9 +23,9 @@
           @click.prevent="toggleSidebarMenu()"
         >
           <span class="sr-only">باز کردن منوی کنار</span>
-          <svg class="s18" data-testid="sidebar-icon">
+          <!-- <svg class="s18" data-testid="sidebar-icon">
             <use href="@assets/common/img/icons.svg#sidebar"></use>
-          </svg>
+          </svg> -->
         </button>
       </div>
       <!-- <div  v-if="$route.name === 'taskTimes'" class="d-md-none dropdown-hamburger">
@@ -65,7 +65,9 @@
 </template>
 
 <script>
-import { mapGetters, mapMutations, mapActions } from "vuex";
+// import { mapGetters, mapMutations, mapActions } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useCommonStore } from "~/stores/commonStore";
 
 export default {
   beforeMount() {
@@ -87,7 +89,11 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(["getPanelStatus", "getRefreshForm", "isSidebarCollapsed"]),
+    ...mapState(useCommonStore, [
+      "getPanelStatus",
+      "getRefreshForm",
+      "isSidebarCollapsed",
+    ]),
     navTitle() {
       return process.env.VUE_APP_TITLE;
     },
@@ -110,10 +116,10 @@ export default {
     // ...mapActions(["setBodyClass"]),
   },
   components: {
-    Navbar: () =>
-      import(
-         "@dashboard/majles/components/Navbar"
-      ),
+    // Navbar: () =>
+    //   import(
+    //      "@dashboard/majles/components/Navbar"
+    //   ),
     //   MySystem: () =>
     //     import(
     //        "@dashboard/default/pages/MySystem"
diff --git a/components/RightSection.vue b/components/RightSection.vue
index be1a283..af5bd2c 100644
--- a/components/RightSection.vue
+++ b/components/RightSection.vue
@@ -175,17 +175,23 @@
 </template>
 
 <script>
-import taskApi from "@apis/taskApi";
-import { mapGetters } from "vuex";
-import HttpService from "@services/httpService";
+import taskApi from "@task/apis/taskApi";
+
+// import taskApi from "@apis/taskApi";
+// import { mapGetters } from "vuex";
+import { mapState, mapActions } from "pinia";
+import { useSearchStore } from "@search/stores/searchStore";
+import { useAuthStore } from "~/stores/authStore";
+// import HttpService from "@services/httpService";
 import VuePersianDatetimePicker from "vue-persian-datetime-picker";
 import { p2e } from "@plugins/persianNumber";
-import thiqatRoutes from "../../../routes/thiqatRoutes";
+// import thiqatRoutes from "../../../routes/thiqatRoutes";
 
 export default {
   // mixins: [dragDropMoveMixin],
   beforeMount() {
-    this.httpService = new HttpService(this.taskMicroServiceName);
+    // this.httpService = new HttpService(this.taskMicroServiceName);
+    this.httpService = useNuxtApp()["$http"];
 
     this.activeUserId = this.currentUser.user_id;
     // event fired from MainSection.vue.
@@ -231,8 +237,9 @@ export default {
     //   "getPanelStatus",
     //   "sidebarListStatusGetter",
     // ]),
-    ...mapGetters("list", ["listGetter"]),
-    ...mapGetters(["currentUser"]),
+    // ...mapGetters("list", ["listGetter"]),
+    ...mapState(useSearchStore, ["listGetter"]),
+    ...mapState(useAuthStore,["currentUser"]),
     taskMicroServiceName() {
       return process.env.VUE_APP_TASK;
     },
diff --git a/components/SwitchComponent.vue b/components/SwitchComponent.vue
new file mode 100644
index 0000000..9020647
--- /dev/null
+++ b/components/SwitchComponent.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="form-group" :key="$attrs.name">
+    <div class="d-flex switch-main">
+      <!-- <div class="custom-control custom-switch">
+        <input
+          type="checkbox"
+          @change="updateMode"
+          :id="$attrs.name"
+          :name="$attrs.name"
+          v-model="textValue"
+          :true-value="true"
+          :false-value="false"
+          class="custom-control-input"
+        />
+
+        <label class="custom-control-label" :for="$attrs.name">{{
+          $t(text1)
+        }}</label>
+      </div> -->
+      <div class="form-check form-switch">
+        <input
+          class="form-check-input"
+          type="checkbox"
+          @change="updateMode"
+          :id="$attrs.name"
+          :name="$attrs.name"
+          v-model="textValue"
+          :true-value="true"
+          :false-value="false"
+        />
+        <label class="form-check-label" :for="$attrs.name">{{
+          $t(text1)
+        }}</label>
+      </div>
+      <label class="mb-0 me-2 text-2" :for="$attrs.name">{{ $t(text2) }}</label>
+    </div>
+  </div>
+</template>
+
+<script>
+// import formBuilderMixin from "@mixins/formBuilderMixin";
+
+/**
+ * @vue-prop {string} [texts2 = Statistics] - متنی که برای نمایش به عنوان "ChartList" استفاده می‌شود.
+ * @vue-prop {string} [texts1 = Normal] - متنی که برای نمایش به عنوان "Chart" استفاده می‌شود.
+ *
+ * @vue-data {boolean} [textValue = true] - حالت انتخاب شده ی سوئیچ در حالت true فعال و در حالت false غیر فعال می باشد
+
+ * @vue-data {String} [text1 = ""] - متن اول که در برچسب اول نمایش داده می‌شود.
+ * @vue-data {String} [text2 = ""] - متن دوم که در برچسب دوم نمایش داده می‌شود.
+ */
+export default {
+  // mixins: [formBuilderMixin],
+  // props: ["texts1", "texts2"],
+  props: {
+    texts2: {
+      default: "Statistics",
+    },
+    texts1: {
+      default: "Normal",
+    },
+    value: {
+      default: true,
+    },
+  },
+  data() {
+    return {
+      textValue: true,
+      text1: "Chart",
+      text2: "ChartList",
+    };
+  },
+  mounted() {
+    this.textValue = this.value;
+    this.updateText();
+  },
+  methods: {
+    /**
+     * متن‌های پراپ‌ها را به متغیرهای اختصاص می‌دهد.
+     * اگر texts1 تعریف شده باشد، مقادیر text1 و text2 را به ترتیب با texts1 و texts2 جایگزین می‌کند.
+     */
+    updateText() {
+      if (this.texts1 !== undefined) {
+        this.text1 = this.texts1;
+        this.text2 = this.texts2;
+      }
+    },
+    /**
+     * رویداد تغییر وضعیت چک‌باکس را مدیریت می‌کند.
+     * مقدار جدید textValue را از طریق رویداد "change-mode" به والد کامپوننت ارسال می‌کند.
+     */
+    updateMode() {
+      this.$emit("change-mode", this.textValue);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.custom-control-label {
+  white-space: nowrap;
+  &::before {
+    border-color: var(--primary-color) !important ;
+    // background-color: var(--primary-color)!important;
+  }
+}
+.entity-text-switch {
+  .switch-main {
+    justify-content: end;
+    margin-left: 3em;
+  }
+  .custom-control-input {
+    width: 5em;
+    z-index: 99;
+  }
+}
+.custom-control {
+  .custom-control-input {
+    &:checked ~ .custom-control-label::before {
+      background-color: var(--primary-color);
+    }
+  }
+}
+.task-admin-switch {
+  &.form-group {
+    margin-bottom: 0 !important;
+    margin-top: 1em;
+    margin-right: 1em;
+  }
+  .custom-control-label {
+    &::before {
+      border-color: #fff;
+      background-color: rgb(128, 128, 128);
+    }
+    &::after {
+      background-color: #fff;
+    }
+  }
+}
+.compare-switch {
+  .custom-control-label {
+    &::before {
+      border-color: #fff;
+      background-color: rgb(189, 189, 189);
+    }
+    &::after {
+      background-color: #fff;
+    }
+  }
+}
+.text-2 {
+  white-space: nowrap;
+}
+.form-switch {
+  white-space: nowrap;
+}
+/* .form-control {
+  height: auto !important;
+} */
+/* 
+.checkbox-4 {
+  width: 100px;
+  appearance: none;
+  height: 40px;
+  border-radius: 100px;
+  cursor: pointer;
+  background: #ffffff;
+  position: relative;
+  background: #e0e5ec;
+  box-shadow: 4px 4px 6px 0 rgba(255, 255, 255, 0.3),
+    -4px -4px 6px 0 rgba(116, 125, 136, 0.2),
+    inset -4px -4px 6px 0 rgba(255, 255, 255, 0.2),
+    inset 4px 4px 6px 0 rgba(0, 0, 0, 0.2);
+  transition: all 0.5s;
+}
+.checkbox-4::after {
+  content: "";
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  left: 8px;
+  top: 5px;
+  border-radius: 100%;
+  background-color: #ffffff;
+  box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
+    7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
+  transition: all 0.5s;
+}
+.checkbox-4:checked::after {
+  left: 65px;
+}
+.checkbox-4-pink:checked {
+  background: #fb2175;
+}
+.checkbox-4-danger:checked {
+  background: var(--danger);
+}
+.checkbox-4-success:checked {
+  background: var(--success);
+}
+.checkbox-4-info:checked {
+  background: var(--info);
+}
+.checkbox-4-dark:checked {
+  background: #1a1a1a;
+}
+.checkbox-4-magic:checked {
+  background: var(--magic);
+} */
+</style>
diff --git a/components/TaskUserReport.vue b/components/TaskUserReport.vue
index 450565a..2b00572 100644
--- a/components/TaskUserReport.vue
+++ b/components/TaskUserReport.vue
@@ -195,16 +195,24 @@
 </template>
 
 <script>
-import { mapGetters, mapActions } from "vuex";
-import HttpService from "@services/httpService";
+// import { mapGetters, mapActions } from "vuex";
+
+// import HttpService from "@services/httpService";
 import menu from "@task/json/menu.json";
-import adminApi from "@apis/adminApi";
-import taskApi from "@apis/taskApi";
+import adminApi from "~/apis/adminApi";
+import { mapState, mapActions } from "pinia";
+
+// import taskApi from "@apis/taskApi";
+import taskApi from "@task/apis/taskApi";
+import { useCommonStore } from "~/stores/commonStore";
+
 import { p2e } from "@plugins/persianNumber";
 
 export default {
   beforeMount() {
-    this.httpService = new HttpService(this.taskMicroServiceName);
+    // this.httpService = new HttpService(this.taskMicroServiceName);
+    this.httpService = useNuxtApp()["$http"];
+
   },
   mounted() {
     this.checkPermisionBeforGetList();
@@ -240,7 +248,7 @@ export default {
       mainList: [],
       menu: menu,
       firstTimeSearching: false,
-      httpService: undefined,
+      httpService: {},
       tableActions: [
         {
           showOutside: true,
@@ -387,7 +395,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(["checkPermissions"]),
+    ...mapActions(useCommonStore,["checkPermissions"]),
 
     checkPermisionBeforGetList() {
       if (this.fetchingData) return;
@@ -817,14 +825,14 @@ export default {
     },
   },
   components: {
-    UsersSearch: () => import("@admin/components/UsersSearch"),
+    UsersSearch: () => import("@components/admin/components/UsersSearch"),
     TeamForm: () => import("@task/components/TeamForm"),
     SortingTasksAdmin: () => import("@task/components/SortingTasksAdmin"),
     SortingByDayTasksAdmin: () =>
       import("@task/components/SortingByDayTasksAdmin"),
     PieDonut: () => import("@components/charts/PieDonut.vue"),
 
-    SwitchComponent: () => import("@components/SwitchComponent.vue"),
+    SwitchComponent: () => import("@task/components/SwitchComponent.vue"),
   },
 };
 </script>
diff --git a/pages/TaskReport.vue b/pages/TaskReport.vue
index 3ef2d30..c3a749b 100644
--- a/pages/TaskReport.vue
+++ b/pages/TaskReport.vue
@@ -96,12 +96,12 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(useEntityStore, ["activeTabGetter"]),
+    ...mapState(useEntityStore, ["activeTabGetter"]),
     // ...mapGetters(["isSidebarCollapsed"]),
     ...mapState(useCommonStore, ["isSidebarCollapsed"]),
   },
   methods: {
-    ...mapMutations(useEntityStore, ["activeTabSetter"]),
+    ...mapActions(useEntityStore, ["activeTabSetter"]),
     setActiveTab(tab) {
       this.activeTabSetter(tab);
       if (tab.key == "group") {
diff --git a/pages/TaskTeams.vue b/pages/TaskTeams.vue
index c248e40..599a9d2 100644
--- a/pages/TaskTeams.vue
+++ b/pages/TaskTeams.vue
@@ -172,6 +172,7 @@
 // import HttpService from "@services/httpService";
 import { useCommonStore } from "~/stores/commonStore";
 import { usePermitStore } from "~/stores/permitStore";
+import { mapState, mapActions } from "pinia";
 
 
 import menu from "@task/json/menu.json";
@@ -268,9 +269,9 @@ export default {
     };
   },
   computed: {
-    ...mapGetters(useCommonStore,["isSidebarCollapsed"]),
+    ...mapState(useCommonStore,["isSidebarCollapsed"]),
 
-    ...mapGetters(usePermitStore, ["projectGetter"]),
+    // ...mapGetters("permit", ["projectGetter"]),
   },
   methods: {
     ...mapActions(useCommonStore,["checkPermissions"]),