diff --git a/src/api/05_command/api.command.ts b/src/api/05_command/api.command.ts
index 6d174539..b332aefb 100644
--- a/src/api/05_command/api.command.ts
+++ b/src/api/05_command/api.command.ts
@@ -1,7 +1,17 @@
 import env from "../index";
 const order = `${env.API_URI}/org`;
-
+const commandSys = `${env.API_URI}/org/commandSys`;
+const commandSalary = `${env.API_URI}/org/commandSalary`;
 export default {
   commandType: `${order}/commandType`,
-  commandSysList: `${order}/commandSys/list`,
+  commandSysList: `${commandSys}/list`,
+  commandSalary,
+  commandSalaryDetail: (
+    page: number,
+    pageSize: number,
+    isActive: boolean,
+    commandSysId: string
+  ) =>
+    `${commandSalary}/admin?page=${page}&pageSize=${pageSize}&isActive=${isActive}&commandSysId=${commandSysId}`,
+    commandSalaryById:(id:string)=>`${commandSalary}/${id}`
 };
diff --git a/src/modules/05_command/interface/index/Main.ts b/src/modules/05_command/interface/index/Main.ts
index 6a801da2..72ba65cb 100644
--- a/src/modules/05_command/interface/index/Main.ts
+++ b/src/modules/05_command/interface/index/Main.ts
@@ -7,6 +7,16 @@ interface DateOption {
   id: string;
 }
 
+interface CommandSysType {
+  id: string;
+  createdAt: Date | null;
+  lastUpdatedAt: Date | null;
+  createdFullName: string;
+  lastUpdateFullName: string;
+  sysName: string;
+  sysDescription: string;
+}
+
 interface ActiveOptions {
   value: boolean;
   label: string;
@@ -22,9 +32,9 @@ interface ListOrder {
 }
 
 interface ListTemplateSalary {
-  id: number | null;
+  id: string;
   name: string;
-  status?: boolean;
+  isActive?: boolean;
 }
 
 interface Tabs {
@@ -38,4 +48,5 @@ export type {
   ListOrder,
   Tabs,
   ListTemplateSalary,
+  CommandSysType
 };
diff --git a/src/modules/05_command/views/salaryLists.vue b/src/modules/05_command/views/salaryLists.vue
index 3ce0a08e..3b9f0326 100644
--- a/src/modules/05_command/views/salaryLists.vue
+++ b/src/modules/05_command/views/salaryLists.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, watch } from "vue";
 import { useQuasar, type QTableProps } from "quasar";
 
 import http from "@/plugins/http";
@@ -9,12 +9,13 @@ import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/modules/05_command/stores/main";
 
 import type {
-  ActiveOptions,
+  CommandSysType,
   ListTemplateSalary,
-  DateOption,
+  ActiveOptions,
 } from "@/modules/05_command/interface/index/Main";
 
 import Header from "@/components/DialogHeader.vue";
+import { options } from "@fullcalendar/core/preact";
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
@@ -28,20 +29,39 @@ const {
   messageError,
 } = mixin;
 
-const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
-const listOrder = ref<DateOption[]>([]);
-const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
+const total = ref<number>(0);
+const totalList = ref<number>(1);
+const pagination = ref({
+  sortBy: "createdAt",
+  descending: true,
+  page: 1,
+  rowsPerPage: 10,
+});
 
+const filter = ref<string>(""); // ตัวแปร ฟิลเตอร์
+const listOrder = ref<CommandSysType[]>([]);
+const activeOrderId = ref<string>(""); // ตัวแปรเก็บ id เพื่อเอาไป = class
+const isActive = ref<boolean>(true); // สถานะการใช้งาน
+const isActiveOption = ref<ActiveOptions[]>([
+  {
+    value: true,
+    label: "ใช้งาน",
+  },
+  {
+    value: false,
+    label: "ไม่ได้ใช้งาน",
+  },
+]);
 const dataForm = reactive<ListTemplateSalary>({
-  id: null,
+  id: '',
   name: "",
-  status: false,
+  isActive: false,
 });
 const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
 const dialogForm = ref<boolean>(false); // model คำสั่ง
 
 const rows = ref<ListTemplateSalary[]>([]);
-const visibleColumns = ref<String[]>(["no", "name", "status"]);
+const visibleColumns = ref<String[]>(["no", "name", "isActive"]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "no",
@@ -55,7 +75,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "name",
     align: "left",
-    label: "ชื่อ",
+    label: "ข้อความ Template สำหรับลงในตำแหน่ง/เงินเดือน",
     sortable: true,
     field: "name",
     headerStyle: "font-size: 14px",
@@ -64,11 +84,11 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "status",
+    name: "isActive",
     align: "center",
     label: "สถานะการใช้งาน",
     sortable: false,
-    field: "status",
+    field: "isActive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
@@ -86,7 +106,7 @@ function onDialogAdd() {
 function onDialogEdit(data: ListTemplateSalary) {
   dataForm.id = data.id;
   dataForm.name = data.name;
-  dataForm.status = data.status;
+  dataForm.isActive = data.isActive;
 
   isEdit.value = true;
   dialogForm.value = true;
@@ -98,21 +118,27 @@ function onDialogEdit(data: ListTemplateSalary) {
  */
 function onDelete(id: string) {
   dialogRemove($q, () => {
-    // http
-    //   .delete(config.API.)
-    //   .then((res) => {})
-    //   .catch((e) => {
-    //     messageError($q, e);
-    //   })
-    //   .finally(() => {});
+    showLoader();
+    http
+      .delete(config.API.commandSalaryById(id))
+      .then(async (res) => {
+        success($q, "ลบข้อมูลเสร็จสิ้น");
+        await fetchSalaryList();
+        hideLoader();
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
   });
 }
 
 /** ปิด dialog */
 function closeDialog() {
-  dataForm.id = null;
+  dataForm.id = "";
   dataForm.name = "";
-  dataForm.status = false;
+  dataForm.isActive = false;
 
   isEdit.value = false;
   dialogForm.value = false;
@@ -120,13 +146,33 @@ function closeDialog() {
 
 /** บันทึกข้อมูล dialog */
 function onSubmit() {
-  dialogConfirm($q, () => {});
+  dialogConfirm($q, () => {
+    const url = isEdit.value
+      ? config.API.commandSalaryById(dataForm.id)
+      : config.API.commandSalary;
+    showLoader();
+    http[isEdit.value ? "put" : "post"](url, {
+      name: dataForm.name,
+      commandSysId: activeOrderId.value,
+      isActive: dataForm.isActive,
+    })
+      .then(async (res) => {
+        closeDialog();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        await fetchSalaryList();
+        hideLoader();
+      })
+      .catch((e) => {
+        messageError($q, e);
+        hideLoader();
+      })
+      .finally(() => {});
+  });
 }
 
 /** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
-function selectInbox(data: DateOption) {
+function selectInbox(data: CommandSysType) {
   activeOrderId.value = data.id;
-
   fetchSalaryList();
 }
 
@@ -135,96 +181,62 @@ function selectInbox(data: DateOption) {
  */
 async function fetchSalaryList() {
   showLoader();
-  setTimeout(() => {
-    rows.value = [
-      {
-        id: 1,
-        name: "เลื่อนเงินเดือน",
-        status: true,
-      },
-      {
-        id: 2,
-        name: "เลื่อนเงินเดือน (ดีเด่น)",
-        status: false,
-      },
-      {
-        id: 3,
-        name: "เลื่อนเงินเดือน (เพิ่มเติม)",
-        status: false,
-      },
-
-      {
-        id: 4,
-        name: "ปรับเงินเดือน",
-        status: true,
-      },
-
-      {
-        id: 5,
-        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
-        status: true,
-      },
-      {
-        id: 6,
-        name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
-        status: true,
-      },
-      {
-        id: 7,
-        name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
-        status: true,
-      },
-      {
-        id: 8,
-        name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
-        status: true,
-      },
-      {
-        id: 9,
-        name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
-        status: true,
-      },
-      {
-        id: 10,
-        name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
-        status: true,
-      },
-      {
-        id: 11,
-        name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
-        status: true,
-      },
-    ];
-    hideLoader();
-  }, 1000);
-  // showLoader();
-  // await http
-  //   .get(config.API.commandType)
-  //   .then(async (res) => {
-  //     lists.value = res.data.result.map((item: any) => {
-  //       return {
-  //         id: item.id,
-  //         name: item.name,
-  //         status: true,
-  //       };
-  //     });
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  await http
+    .get(
+      config.API.commandSalaryDetail(
+        pagination.value.page,
+        pagination.value.rowsPerPage,
+        isActive.value,
+        activeOrderId.value
+      )
+    )
+    .then(async (res) => {
+      totalList.value = Math.ceil(
+        res.data.result.total / pagination.value.rowsPerPage
+      );
+      total.value = res.data.result.total;
+      rows.value = res.data.result.commandSalarys;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
 }
 
+/** ดึงข้อมูล list */
+async function getMainData() {
+  showLoader();
+  await http
+    .get(config.API.commandSysList)
+    .then(async (res) => {
+      const data = await res.data.result;
+      listOrder.value = data;
+      hideLoader();
+    })
+    .catch((e) => {
+      messageError($q, e);
+      hideLoader();
+    })
+    .finally(() => {});
+}
+
+function updatePagination(newPagination: any) {
+  pagination.value.page = 1;
+  pagination.value.rowsPerPage = newPagination.rowsPerPage;
+}
+
+watch(
+  () => pagination.value.rowsPerPage,
+  async () => {
+    await fetchSalaryList();
+  }
+);
+
 /** เริ่มเมื่อโหลดหน้านี้*/
 onMounted(() => {
-  const data = [
-    { id: "1", name: "บรรจุ แต่งตั้ง" },
-    { id: "2", name: "เงินเดือน" },
-    { id: "3", name: "ลงโทษวินัย" },
-  ];
-  listOrder.value = data;
+  getMainData();
 });
 </script>
 
@@ -253,7 +265,7 @@ onMounted(() => {
               >
                 <q-item-section>
                   <q-item-label>
-                    {{ item.name }}
+                    {{ item.sysName }}
                   </q-item-label>
                 </q-item-section>
               </q-item>
@@ -269,6 +281,21 @@ onMounted(() => {
           <div class="row q-pa-sm q-col-gutter-sm">
             <div class="col-12">
               <div class="row q-gutter-sm">
+                <div class="col-3">
+                  <q-select
+                    outlined
+                    dense
+                    v-model="isActive"
+                    class="inputgreen"
+                    label="สถานะการใช้งาน"
+                    :options="isActiveOption"
+                    option-label="label"
+                    option-value="value"
+                    emit-value
+                    map-options
+                    @update:model-value="fetchSalaryList"
+                  ></q-select>
+                </div>
                 <q-btn
                   flat
                   dense
@@ -323,8 +350,25 @@ onMounted(() => {
                 bordered
                 :paging="true"
                 dense
+                :rows-per-page-options="[1, 25, 50, 100]"
+                @update:pagination="updatePagination"
                 :visible-columns="visibleColumns"
               >
+                <template v-slot:pagination="scope">
+                  ทั้งหมด {{ total }} รายการ
+                  <q-pagination
+                    v-model="pagination.page"
+                    active-color="primary"
+                    color="dark"
+                    :max="Number(totalList)"
+                    size="sm"
+                    boundary-links
+                    direction-links
+                    :max-pages="5"
+                    @update:model-value="fetchSalaryList"
+                  ></q-pagination>
+                </template>
+
                 <template v-slot:header="props">
                   <q-tr :props="props">
                     <q-th auto-width></q-th>
@@ -366,16 +410,17 @@ onMounted(() => {
                       :props="props"
                     >
                       <div v-if="col.name == 'no'">
-                        {{ props.rowIndex + 1 }}
+                        {{
+                          (pagination.page - 1) * pagination.rowsPerPage +
+                          props.rowIndex +
+                          1
+                        }}
                       </div>
-                      <div v-else-if="col.name == 'status'">
+                      <div v-else-if="col.name == 'isActive'">
                         <q-icon
-                          :color="props.row.status ? 'green' : 'orange'"
-                          :name="
-                            props.row.status
-                              ? 'mdi-check-circle'
-                              : 'mdi-minus-circle'
-                          "
+                          size="sm"
+                          :color="props.row.isActive ? 'teal' : 'orange'"
+                          :name="props.row.isActive ? 'mdi-check' : 'mdi-close'"
                         />
                       </div>
                       <div v-else>
@@ -411,7 +456,9 @@ onMounted(() => {
     <q-card class="col-12" style="min-width: 30%">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <Header
-          :tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"
+          :tittle="`${
+            isEdit ? 'แก้ไข' : 'เพิ่ม'
+          } Template สำหรับลงในตำแหน่ง/เงินเดือน`"
           :close="closeDialog"
         />
         <q-separator />
@@ -433,7 +480,7 @@ onMounted(() => {
               <div class="row items-center justify-between border_custom">
                 <p class="q-ma-none">สถานะการใช้งาน</p>
                 <label :class="`toggle-control`">
-                  <input type="checkbox" v-model="dataForm.status" />
+                  <input type="checkbox" v-model="dataForm.isActive" />
                   <span class="control"></span>
                 </label>
               </div>