diff --git a/src/modules/01_masterdata/components/Indicators/Summary.vue b/src/modules/01_masterdata/components/Indicators/Summary.vue
new file mode 100644
index 000000000..856abde1b
--- /dev/null
+++ b/src/modules/01_masterdata/components/Indicators/Summary.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useCounterMixin } from "@/stores/mixin";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const { showLoader, hideLoader, dialogRemove, success, messageError } =
+  useCounterMixin();
+const indicatorTotal = ref<any[]>([
+  {
+    value: "kpiPlan",
+    label: "ตัวชี้วัดตามแผน",
+    color: "edit",
+  },
+  {
+    value: "kpiRole",
+    label: "ตัวชี้วัดตามตำแหน่ง",
+    color: "primary",
+  },
+  {
+    value: "kpiSpecial",
+    label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
+    color: "blue",
+  },
+  {
+    value: "total",
+    label: "ทั้งหมด",
+    color: "red",
+  },
+]);
+
+function getTotal() {
+  http
+    .post(config.API.indicatorSummary)
+    .then((res) => {
+      const data = res.data.result;
+      indicatorTotal.value = indicatorTotal.value.map((indicator) => {
+        return {
+          ...indicator,
+          total: data[indicator.value],
+        };
+      });
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {});
+}
+onMounted(() => {
+  getTotal();
+});
+</script>
+<template>
+  <q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
+    <div class="row q-col-gutter-sm">
+      <div
+        v-for="i in indicatorTotal"
+        class="col-12 col-sm-6 col-md-6 col-lg-3"
+      >
+        <div
+          class="bg-white rounded-borders q-pa-sm"
+          style="border: 1px solid #ededed"
+        >
+          <div class="row items-center no-wrap">
+            {{ i.label }}
+            <q-space />
+            <q-badge :color="i.color" text-color="white" :label="i.total" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </q-card>
+</template>
diff --git a/src/modules/01_masterdata/views/Assignment.vue b/src/modules/01_masterdata/views/Assignment.vue
index abd2ab0c7..4a570c312 100644
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.vue
@@ -13,6 +13,7 @@ import type {
 } from "@/modules/01_masterdata/interface/index/Main";
 import type { FormFilterAssignment } from "@/modules/01_masterdata/interface/request/Main";
 import type { ResAssignment } from "@/modules/01_masterdata/interface/response/Main";
+import IndicatorTotal from "@/modules/01_masterdata/components/Indicators/Summary.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -176,29 +177,7 @@ onMounted(() => {
   <q-card flat bordered class="q-pa-md">
     <div class="row">
       <div class="col-12">
-        <q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
-          <div class="row q-col-gutter-sm">
-            <div
-              v-for="i in indicatorTotal"
-              class="col-12 col-sm-6 col-md-6 col-lg-3"
-            >
-              <div
-                class="bg-white rounded-borders q-pa-sm"
-                style="border: 1px solid #ededed"
-              >
-                <div class="row items-center no-wrap text-weight-medium">
-                  {{ i.label }}
-                  <q-space />
-                  <q-badge
-                    :color="i.color"
-                    text-color="white"
-                    :label="i.total"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
+        <IndicatorTotal />
       </div>
     </div>
     <div class="row q-col-gutter-sm q-pl-sm">
diff --git a/src/modules/01_masterdata/views/competency.vue b/src/modules/01_masterdata/views/competency.vue
index 5de236eda..8534ab629 100644
--- a/src/modules/01_masterdata/views/competency.vue
+++ b/src/modules/01_masterdata/views/competency.vue
@@ -103,7 +103,7 @@ onMounted(() => {
                 class="bg-white rounded-borders q-pa-sm"
                 style="border: 1px solid #ededed"
               >
-                <div class="row items-center no-wrap text-weight-medium">
+                <div class="row items-center no-wrap">
                   {{ i.label }}
                   <q-space />
                   <q-badge
diff --git a/src/modules/01_masterdata/views/indicatorByPlan.vue b/src/modules/01_masterdata/views/indicatorByPlan.vue
index d4d8d8c20..69cd271c1 100644
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@@ -8,6 +8,7 @@ import config from "@/app.config";
 
 import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
+import IndicatorTotal from "@/modules/01_masterdata/components/Indicators/Summary.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -49,28 +50,6 @@ const expanded = ref<any>([]);
 const filterMain = ref<string>("");
 const visibleColumns = ref<string[]>(["including", "includingName"]);
 
-const indicatorTotal = ref<any[]>([
-  {
-    value: "kpiPlan",
-    label: "ตัวชี้วัดตามแผน",
-    color: "edit",
-  },
-  {
-    value: "kpiRole",
-    label: "ตัวชี้วัดตามตำแหน่ง",
-    color: "primary",
-  },
-  {
-    value: "kpiSpecial",
-    label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
-    color: "blue",
-  },
-  {
-    value: "total",
-    label: "ทั้งหมด",
-    color: "red",
-  },
-]);
 const roundOp = ref<DataOption[]>([
   { id: "", name: "ทั้งหมด" },
   { id: "APR", name: "รอบเมษายน" },
@@ -217,26 +196,7 @@ function onClickHistory(id: string) {
     });
 }
 
-function getTotal() {
-  http
-    .post(config.API.indicatorSummary)
-    .then((res) => {
-      const data = res.data.result;
-      indicatorTotal.value = indicatorTotal.value.map((indicator) => {
-        return {
-          ...indicator,
-          total: data[indicator.value],
-        };
-      });
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {});
-}
-
 onMounted(() => {
-  getTotal();
   fetchActive();
 });
 </script>
@@ -308,29 +268,7 @@ onMounted(() => {
     </div>
     <div class="col-xs-12 col-sm-9 q-pa-md row">
       <div class="col-12">
-        <q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
-          <div class="row q-col-gutter-sm">
-            <div
-              v-for="i in indicatorTotal"
-              class="col-12 col-sm-6 col-md-6 col-lg-3"
-            >
-              <div
-                class="bg-white rounded-borders q-pa-sm"
-                style="border: 1px solid #ededed"
-              >
-                <div class="row items-center no-wrap text-weight-medium">
-                  {{ i.label }}
-                  <q-space />
-                  <q-badge
-                    :color="i.color"
-                    text-color="white"
-                    :label="i.total"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
+        <IndicatorTotal />
         <div class="row q-col-gutter-sm items-center q-mb-sm no-wrap">
           <datepicker
             menu-class-name="modalfix"
diff --git a/src/modules/01_masterdata/views/indicatorByRole.vue b/src/modules/01_masterdata/views/indicatorByRole.vue
index 4fcda8201..d844e9645 100644
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.vue
@@ -12,6 +12,7 @@ import type {
 } from "@/modules/01_masterdata/interface/index/Main";
 
 import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogHistory.vue";
+import IndicatorTotal from "@/modules/01_masterdata/components/Indicators/Summary.vue";
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
@@ -273,35 +274,10 @@ onMounted(async () => {
     รายการตัวชี้วัดตามตำแหน่ง
   </div>
   <q-card flat bordered class="q-pa-md">
-    <div class="row">
-      <div class="col-12">
-        <q-card bordered class="q-mb-sm q-pa-xs bg-grey-1">
-          <div class="row q-col-gutter-sm">
-            <div
-              v-for="i in indicatorTotal"
-              class="col-12 col-sm-6 col-md-6 col-lg-3"
-            >
-              <div
-                class="bg-white rounded-borders q-pa-sm"
-                style="border: 1px solid #ededed"
-              >
-                <div class="row items-center no-wrap text-weight-medium">
-                  {{ i.label }}
-                  <q-space />
-                  <q-badge
-                    :color="i.color"
-                    text-color="white"
-                    :label="i.total"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </q-card>
-      </div>
+    <div class="col-12">
+      <IndicatorTotal />
     </div>
     <div class="row q-gutter-sm no-wrap q-mb-sm">
-      
       <q-select
         dense
         v-model="formFilter.position"