diff --git a/src/api/14_KPI/api.KPI.ts b/src/api/14_KPI/api.KPI.ts
index c3bab1be3..4121a0153 100644
--- a/src/api/14_KPI/api.KPI.ts
+++ b/src/api/14_KPI/api.KPI.ts
@@ -92,4 +92,7 @@ export default {
   achievementDev: `${KpiUser}/achievement/development/admin`,
   achievementDevByid: (id: string) =>
     `${KpiUser}/achievement/development/admin/detail/${id}`,
+
+  indicatorSummary:`${kpiPlan}/summary/indicator`
+  
 };
diff --git a/src/modules/01_masterdata/views/Assignment.vue b/src/modules/01_masterdata/views/Assignment.vue
index 6db294258..abd2ab0c7 100644
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.vue
@@ -64,6 +64,29 @@ const formFilter = reactive<FormFilterAssignment>({
 const totalList = ref<number>(0); //จำนวนข้อมูลรายการ
 const maxPage = ref<number>(1);
 
+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 fetchList() {
   showLoader();
   formFilter.year = formFilter.year ? formFilter.year.toString() : null;
@@ -122,7 +145,26 @@ watch(
   }
 );
 
+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();
   fetchList();
 });
 </script>
@@ -132,6 +174,33 @@ onMounted(() => {
     รายการงานอื่นๆ ที่ได้รับมอบหมาย
   </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>
     <div class="row q-col-gutter-sm q-pl-sm">
       <q-toolbar style="padding: 0">
         <div class="row q-gutter-sm">
diff --git a/src/modules/01_masterdata/views/indicatorByPlan.vue b/src/modules/01_masterdata/views/indicatorByPlan.vue
index 15f11904e..d4d8d8c20 100644
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@@ -49,6 +49,28 @@ 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: "รอบเมษายน" },
@@ -195,7 +217,26 @@ 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>
@@ -267,6 +308,29 @@ 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>
         <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 38de4c1e5..4fcda8201 100644
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.vue
@@ -69,6 +69,29 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
+const indicatorTotal = ref<any[]>([
+  {
+    value: "kpiPlan",
+    label: "ตัวชี้วัดตามแผน",
+    color: "edit",
+  },
+  {
+    value: "kpiRole",
+    label: "ตัวชี้วัดตามตำแหน่ง",
+    color: "primary",
+  },
+  {
+    value: "kpiSpecial",
+    label: "ตัวชี้วัดงานอื่นๆ ที่ได้รับมอบหมาย",
+    color: "blue",
+  },
+  {
+    value: "total",
+    label: "ทั้งหมด",
+    color: "red",
+  },
+]);
+
 /** Option  รอบการประเมิน*/
 const roundOp = ref<DataOption[]>([
   { id: "", name: "ทั้งหมด" },
@@ -220,7 +243,26 @@ 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(async () => {
+  await getTotal();
   await getOptions();
   await fetchList();
 });
@@ -231,7 +273,35 @@ 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>
     <div class="row q-gutter-sm no-wrap q-mb-sm">
+      
       <q-select
         dense
         v-model="formFilter.position"