diff --git a/src/modules/06_webservices/interface/index/Main.ts b/src/modules/06_webservices/interface/index/Main.ts
index 5a14904f..d58d76df 100644
--- a/src/modules/06_webservices/interface/index/Main.ts
+++ b/src/modules/06_webservices/interface/index/Main.ts
@@ -21,4 +21,14 @@ interface ListApi {
   value: string;
 }
 
-export type { ListWebServices, ListApi };
+interface ItemsDropdown {
+  labal: string;
+  val: string;
+}
+
+interface DataOption {
+  id: string;
+  name: string;
+}
+
+export type { ListWebServices, ListApi, DataOption, ItemsDropdown };
diff --git a/src/modules/06_webservices/view/listView.vue b/src/modules/06_webservices/view/listView.vue
new file mode 100644
index 00000000..457a6878
--- /dev/null
+++ b/src/modules/06_webservices/view/listView.vue
@@ -0,0 +1,273 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableProps } from "quasar";
+import type { ListWebServices } from "@/modules/06_webservices/interface/index/Main";
+import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+
+/** importComponents*/
+import DialogApiKey from "@/modules/06_webservices/components/DialogApiKey.vue"; //สร้าง API Key
+import DialogUsability from "@/modules/06_webservices/components/DialogUsability.vue"; //การใช้งาน
+
+/** use*/
+const $q = useQuasar();
+const {
+  dialogRemove,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = useCounterMixin();
+
+/** Table*/
+const rows = ref<ListWebServices[]>([]); //รายการ webservices
+const keyword = ref<string>(""); //คำค้นหา รายการ webservices
+const visibleColumns = ref<string[]>([
+  "name",
+  "apiNames",
+  "amount",
+  "createdAt",
+  "createdFullName",
+]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "ชื่อ-คำอธิบาย",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "apiNames",
+    align: "left",
+    label: "API ที่เข้าถึง",
+    sortable: true,
+    field: "apiNames",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val) {
+      return val
+        .map((e: ResApiName) => `<div class='q-mt-sm'>-${e.name}</div>`)
+        .join("");
+    },
+  },
+  {
+    name: "amount",
+    align: "left",
+    label: "สถิติ ",
+    sortable: true,
+    field: "amount",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    format(val) {
+      return date2Thai(val, false, true);
+    },
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
+  {
+    name: "createdFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "createdFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** API Key*/
+const modalApiKey = ref<boolean>(false); //popup สร้าง API Key
+
+/** usability*/
+const modalUsability = ref<boolean>(false); //popup การใช้งาน
+
+/** ฟังก์ชันเรียกข้อมูลรายการ Web services*/
+async function fetchListWebServices() {
+  showLoader();
+  await http
+    .get(config.API.apiKeyMain + "/list")
+    .then(async (res) => {
+      const data = await res.data.result;
+      rows.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+/**
+ * ฟังก์ชัน ลบข้อมูลรายการ Web services
+ * @param id รายการ Web services ที่ต้องการลบ
+ * เมื่อสำเร็จจะเรียกฟังก์ชัน 'fetchListWebServices' มาเรียกข้อมูลรายการ web servcice ใหม่
+ */
+function onDeleteData(id: string) {
+  dialogRemove($q, () => {
+    showLoader();
+    http
+      .delete(config.API.apiKeyMain + `/${id}`)
+      .then(async () => {
+        // เรียกข้อมูลรายการ web servcice ใหม่
+        await fetchListWebServices();
+        success($q, "ลบข้อมูลสำเร็จ");
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
+}
+
+/**  hook เมื่อเรียก Components จะเรียกฟังก์ชัน 'fetchListWebServices' เรียกข้อมูลรายการ webservices*/
+onMounted(() => {
+  fetchListWebServices();
+});
+</script>
+
+<template>
+  <div class="row items-center">
+    <!-- <div class="toptitle text-dark row items-center q-py-xs">
+      รายการ web services
+    </div> -->
+    <q-space />
+    <q-btn
+      flat
+      color="public"
+      label="วิธีการใช้งาน"
+      @click.pervent="modalUsability = true"
+    />
+  </div>
+
+  <!-- <q-card flast bordered class="q-pa-md"> -->
+    <!-- toolbar -->
+    <div class="items-center col-12 row q-col-gutter-sm">
+      <q-btn
+        class="q-ml-sm"
+        flat
+        round
+        dense
+        color="primary"
+        icon="add"
+        @click.pervent="modalApiKey = true"
+      >
+        <q-tooltip>สร้าง API Key </q-tooltip>
+      </q-btn>
+      <q-space />
+      <q-input
+        borderless
+        dense
+        outlined
+        clearable
+        v-model="keyword"
+        placeholder="ค้นหา"
+        @clear="keyword = ''"
+      >
+        <template v-slot:append v-if="keyword === ''">
+          <q-icon name="search" />
+        </template>
+      </q-input>
+      <q-select
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        style="min-width: 140px"
+      />
+    </div>
+
+    <!-- Table -->
+    <div class="col-12 q-pt-sm">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        :filter="keyword"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[10, 25, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th auto-width />
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props">
+            <q-td auto-width>
+              <q-btn
+                dense
+                flat
+                round
+                color="red"
+                @click="onDeleteData(props.row.id)"
+                icon="delete"
+              >
+                <q-tooltip>ลบข้อมูล</q-tooltip>
+              </q-btn></q-td
+            >
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <!-- <div v-if="col.name === 'apiNames'">
+                <q-list dense>
+                  <q-item v-for="(item, key) in col.value">
+                    <q-item-section>- {{ item.name }}</q-item-section>
+                  </q-item>
+                </q-list>
+              </div> -->
+              <div v-html="col.value ? col.value : '-'"></div>
+
+              <div>
+                <!-- {{ col.value ? col.value : "-" }} -->
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+      </d-table>
+    </div>
+  <!-- </q-card> -->
+
+  <!-- สร้าง API Key -->
+  <DialogApiKey
+    v-model:modal="modalApiKey"
+    :fetch-data="fetchListWebServices"
+  />
+
+  <!-- การใช้งาน -->
+  <DialogUsability v-model:modal="modalUsability" />
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_webservices/view/logView.vue b/src/modules/06_webservices/view/logView.vue
new file mode 100644
index 00000000..112450e7
--- /dev/null
+++ b/src/modules/06_webservices/view/logView.vue
@@ -0,0 +1,448 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref, watch } from "vue";
+import { useQuasar, type QTableProps } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type {
+  DataOption,
+  ItemsDropdown,
+} from "@/modules/06_webservices/interface/index/Main";
+import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
+
+/** use*/
+const $q = useQuasar();
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+
+const apiType = ref<string>("");
+const dataApiName = ref<DataOption[]>([
+  {
+    id: "",
+    name: "ทั้งหมด",
+  },
+]);
+const options = ref<DataOption[]>([]);
+
+const startDate = ref<string>(""); // วันเริ่มต้น
+const endDate = ref<string>(""); // วันสินสุด
+const startTime = ref<Date | null>(null); // เวลาเริ่มต้น
+const endTime = ref<Date | null>(null); //เวลาสินสุด
+
+//รายการค้นหา
+const valDropdown = ref<string>("");
+const labelDropdown = ref<string>("วันนี้");
+const itemsDropdown = ref<ItemsDropdown[]>([
+  {
+    labal: "วันนี้",
+    val: "today",
+  },
+  {
+    labal: "เมื่อวาน",
+    val: "yesterday",
+  },
+  {
+    labal: "ย้อนหลัง 24 ชั่วโมง",
+    val: "past24hours",
+  },
+  {
+    labal: "ย้อนหลัง 7 วัน",
+    val: "past7days",
+  },
+  {
+    labal: "ย้อนหลัง 30 วัน",
+    val: "past30days",
+  },
+  {
+    labal: "กำหนดเอง",
+    val: "customized",
+  },
+]);
+
+const rows = ref<any[]>([]);
+const visibleColumns = ref<String[]>(["name", "date", "request", "IP"]);
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "name",
+    align: "left",
+    label: "API Request",
+    sortable: false,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "date",
+    align: "left",
+    label: "วันที่ร้องขอ",
+    sortable: true,
+    field: "date",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format(val, row) {
+      return date2Thai(val, false, true);
+    },
+  },
+  {
+    name: "request",
+    align: "left",
+    label: " คน request",
+    sortable: false,
+    field: "request",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "IP",
+    align: "left",
+    label: " IP",
+    sortable: false,
+    field: "IP",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+
+/** ฟังก์ชันเรียกรายการข้อมูล API ที่เข้าถึงได้*/
+async function fetchListApiKeyName() {
+  showLoader();
+  await http
+    .get(config.API.apiKeyMain + "/name")
+    .then(async (res) => {
+      const data = (await res.data?.result) || [];
+      const optionData = data.map((e: ResApiName) => ({
+        id: e.id,
+        name: e.name,
+      }));
+      dataApiName.value.push(...optionData);
+      options.value = dataApiName.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchListLog() {
+  const data = [
+    {
+      name: "API ข้อมูลทะเบียนประวัติข้าราชการ",
+      date: new Date(),
+      request: "MISConnect",
+      IP: "192.168.1.xx",
+    },
+  ];
+
+  rows.value = data;
+}
+
+function onSelectType() {
+  fetchListLog();
+}
+
+/**
+ * function ค้นหาคำใน select
+ * @param val คำค้นหา
+ * @param update function
+ * @param type ประเภท select
+ */
+function filterSelector(val: string, update: Function) {
+  update(() => {
+    if (val === "") {
+      options.value = dataApiName.value;
+    } else {
+      const newVal = val.toLowerCase();
+      options.value = dataApiName.value.filter(
+        (v: DataOption) => v.name.toLowerCase().indexOf(newVal) > -1
+      );
+    }
+  });
+}
+
+/**
+ * เลือกประเภทการค้นหาข้อมูล
+ * @param labal ชื่อประเภทการค้นหาข้อมูล
+ * @param type ประเภทการค้นหาข้อมูล
+ * และค้นหาข้อมูลรายการ Logs ใหม่
+ */
+function onItemClick(labal: string, type: string) {
+  labelDropdown.value = labal;
+  valDropdown.value = type;
+  const setDateRange = (daysAgo: number = 0, endOfDay = false) => {
+    const date = new Date();
+    if (daysAgo) date.setDate(date.getDate() - daysAgo);
+    date.setHours(
+      endOfDay ? 23 : 0,
+      endOfDay ? 59 : 0,
+      endOfDay ? 59 : 0,
+      endOfDay ? 999 : 0
+    );
+    return date.toISOString();
+  };
+
+  if (type === "today") {
+    //วันนี้
+    startDate.value = setDateRange(0);
+    endDate.value = setDateRange(0, true);
+  } else if (type === "yesterday") {
+    //เมื่อวาน
+    startDate.value = setDateRange(1);
+    endDate.value = setDateRange(1, true);
+  } else if (type === "past24hours") {
+    // ย้อนหลัง 24 ชั่วโมง
+    const startDatePast24Hours = new Date();
+    startDatePast24Hours.setHours(startDatePast24Hours.getHours() - 24);
+    startDate.value = startDatePast24Hours.toISOString();
+
+    // ตั้งค่า endDate เป็นเวลาปัจจุบัน
+    endDate.value = new Date().toISOString();
+  } else if (["past7days", "past30days"].includes(type)) {
+    // ย้อนหลัง 7 วัน และ 30 วัน
+    const days = { past7days: 7, past30days: 30 }[type];
+    startDate.value = setDateRange(days);
+    endDate.value = new Date().toISOString();
+  }
+
+  type !== "customized" && selectedDate();
+}
+
+/**
+ * อัปเดทวันที่ต้องการค้นหาข้อมูลรายการ Logs
+ * และค้นหาข้อมูลรายการ Logs ใหม่
+ */
+function updateDate() {
+  if (startTime.value && endTime.value) {
+    startDate.value = startTime.value.toISOString();
+    endDate.value = endTime.value.toISOString();
+    selectedDate();
+  }
+}
+
+/** ฟังก์ชั่นดึงข้อมูลรายการ Logs ตามเงื่อนไข */
+function selectedDate() {
+  if (!startDate.value) {
+    const startDateToday = new Date();
+    startDateToday.setHours(0, 0, 0, 0);
+
+    // ตั้งค่า endDate เป็นเวลา 23:59:59 ของวันนี้
+    const endDateToday = new Date();
+    endDateToday.setHours(23, 59, 59, 999);
+
+    startDate.value = startDateToday.toISOString();
+    endDate.value = endDateToday.toISOString();
+  }
+}
+
+onMounted(async () => {
+  await fetchListLog();
+  await fetchListApiKeyName();
+});
+</script>
+
+<template>
+  <div class="row col-12 q-col-gutter-sm">
+    <div class="row col-12">
+      <q-btn-dropdown outline color="grey-5" class="full-height">
+        <template v-slot:label>
+          <div class="row items-center no-wrap">
+            <div class="text-black">{{ labelDropdown }}</div>
+          </div>
+        </template>
+        <q-list>
+          <q-item
+            dense
+            v-for="(item, index) in itemsDropdown"
+            clickable
+            v-close-popup
+            @click="onItemClick(item.labal, item.val)"
+          >
+            <q-item-section>
+              <q-item-label>{{ item.labal }}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+      </q-btn-dropdown>
+
+      <q-space />
+
+      <q-select
+        dense
+        style="min-width: 300px"
+        hide-bottom-space
+        outlined
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        v-model="apiType"
+        :options="options"
+        label="รายากร Web Services"
+        use-input
+        hide-selected
+        fill-input
+        :clearable="apiType !== ''"
+        @clear="apiType = ''"
+        @update:modelValue="onSelectType"
+        @filter="(inputValue: string,doneFn: Function) => filterSelector(inputValue, doneFn )"
+      >
+        <template v-slot:no-option>
+          <q-item>
+            <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+          </q-item>
+        </template>
+      </q-select>
+
+      <q-select
+        class="q-ml-sm"
+        v-model="visibleColumns"
+        multiple
+        outlined
+        dense
+        options-dense
+        :display-value="$q.lang.table.columns"
+        emit-value
+        map-options
+        :options="columns"
+        option-value="name"
+        style="min-width: 140px"
+      />
+    </div>
+
+    <div v-if="valDropdown === 'customized'" class="row col-12 q-col-gutter-sm">
+      <div class="col-2">
+        <datepicker
+          v-model="startTime"
+          :locale="'th'"
+          :max-date="endTime"
+          selectText="เลือก"
+          cancelText="ยกเลิก"
+          @update:modelValue="updateDate()"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="
+                startTime ? date2Thai(startTime, false, true) : null
+              "
+              :label="`${'วันเริ่มต้น'}`"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+
+          <template #action-preview="{ value }">
+            {{ date2Thai(value, false, true) }}
+          </template>
+        </datepicker>
+      </div>
+      <div class="col-2">
+        <datepicker
+          v-model="endTime"
+          :locale="'th'"
+          :enableTimePicker="true"
+          selectText="เลือก"
+          cancelText="ยกเลิก"
+          @update:modelValue="updateDate()"
+          :min-date="startTime"
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              dense
+              outlined
+              :model-value="endTime ? date2Thai(endTime, false, true) : null"
+              :label="`${'วันสิ้นสุด'}`"
+              hide-bottom-space
+            >
+              <template v-slot:prepend>
+                <q-icon
+                  name="event"
+                  class="cursor-pointer"
+                  style="color: var(--q-primary)"
+                >
+                </q-icon>
+              </template>
+            </q-input>
+          </template>
+          <template #action-preview="{ value }">
+            {{ date2Thai(value, false, true) }}
+          </template>
+        </datepicker>
+      </div>
+    </div>
+
+    <div class="col-12">
+      <d-table
+        ref="table"
+        :columns="columns"
+        :rows="rows"
+        row-key="id"
+        flat
+        bordered
+        :paging="true"
+        dense
+        :rows-per-page-options="[25, 50, 100]"
+        :visible-columns="visibleColumns"
+      >
+        <!-- @update:pagination="updatePagination" -->
+        <template v-slot:header="props">
+          <q-tr :props="props">
+            <q-th
+              v-for="col in props.cols"
+              :key="col.name"
+              :props="props"
+              style="color: #000000; font-weight: 500"
+            >
+              <span class="text-weight-medium">{{ col.label }}</span>
+            </q-th>
+          </q-tr>
+        </template>
+        <template v-slot:body="props">
+          <q-tr :props="props" class="cursor-pointer">
+            <q-td v-for="col in props.cols" :key="col.name" :props="props">
+              <div>
+                {{ col.value ?? "-" }}
+              </div>
+            </q-td>
+          </q-tr>
+        </template>
+
+        <!-- <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> -->
+      </d-table>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/06_webservices/view/main.vue b/src/modules/06_webservices/view/main.vue
index f692a166..8f7aadda 100644
--- a/src/modules/06_webservices/view/main.vue
+++ b/src/modules/06_webservices/view/main.vue
@@ -1,19 +1,12 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { useQuasar } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-/** importType*/
-import type { QTableProps } from "quasar";
-import type { ListWebServices } from "@/modules/06_webservices/interface/index/Main";
-import type { ResApiName } from "@/modules/06_webservices/interface/response/Main";
 
 /** importComponents*/
-import DialogApiKey from "@/modules/06_webservices/components/DialogApiKey.vue"; //สร้าง API Key
-import DialogUsability from "@/modules/06_webservices/components/DialogUsability.vue"; //การใช้งาน
+import ListView from "@/modules/06_webservices/view/listView.vue";
+import LogView from "@/modules/06_webservices/view/logView.vue";
 
 /** use*/
 const $q = useQuasar();
@@ -26,248 +19,36 @@ const {
   date2Thai,
 } = useCounterMixin();
 
-/** Table*/
-const rows = ref<ListWebServices[]>([]); //รายการ webservices
-const keyword = ref<string>(""); //คำค้นหา รายการ webservices
-const visibleColumns = ref<string[]>([
-  "name",
-  "apiNames",
-  "amount",
-  "createdAt",
-  "createdFullName",
-]);
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "name",
-    align: "left",
-    label: "ชื่อ-คำอธิบาย",
-    sortable: true,
-    field: "name",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "apiNames",
-    align: "left",
-    label: "API ที่เข้าถึง",
-    sortable: true,
-    field: "apiNames",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format(val) {
-      return val
-        .map((e: ResApiName) => `<div class='q-mt-sm'>-${e.name}</div>`)
-        .join("");
-    },
-  },
-  {
-    name: "amount",
-    align: "left",
-    label: "สถิติ ",
-    sortable: true,
-    field: "amount",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "createdAt",
-    align: "left",
-    label: "วันที่สร้าง",
-    sortable: true,
-    field: "createdAt",
-    format(val) {
-      return date2Thai(val, false, true);
-    },
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "createdFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "createdFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-]);
-
-/** API Key*/
-const modalApiKey = ref<boolean>(false); //popup สร้าง API Key
-
-/** usability*/
-const modalUsability = ref<boolean>(false); //popup การใช้งาน
-
-/** ฟังก์ชันเรียกข้อมูลรายการ Web services*/
-async function fetchListWebServices() {
-  showLoader();
-  await http
-    .get(config.API.apiKeyMain + "/list")
-    .then(async (res) => {
-      const data = await res.data.result;
-      rows.value = data;
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/**
- * ฟังก์ชัน ลบข้อมูลรายการ Web services
- * @param id รายการ Web services ที่ต้องการลบ
- * เมื่อสำเร็จจะเรียกฟังก์ชัน 'fetchListWebServices' มาเรียกข้อมูลรายการ web servcice ใหม่
- */
-function onDeleteData(id: string) {
-  dialogRemove($q, () => {
-    showLoader();
-    http
-      .delete(config.API.apiKeyMain + `/${id}`)
-      .then(async () => {
-        // เรียกข้อมูลรายการ web servcice ใหม่
-        await fetchListWebServices();
-        success($q, "ลบข้อมูลสำเร็จ");
-      })
-      .catch((err) => {
-        messageError($q, err);
-      })
-      .finally(() => {
-        hideLoader();
-      });
-  });
-}
-
-/**  hook เมื่อเรียก Components จะเรียกฟังก์ชัน 'fetchListWebServices' เรียกข้อมูลรายการ webservices*/
-onMounted(() => {
-  fetchListWebServices();
-});
+const tabs = ref<string>("log");
 </script>
 
 <template>
   <div class="row items-center">
     <div class="toptitle text-dark row items-center q-py-xs">
-      รายการ web services
+      จัดการ web services
     </div>
-    <q-space />
-    <q-btn
-      flat
-      color="public"
-      label="วิธีการใช้งาน"
-      @click.pervent="modalUsability = true"
-    />
   </div>
 
-  <q-card flast bordered class="q-pa-md">
-    <!-- toolbar -->
-    <div class="items-center col-12 row q-col-gutter-sm">
-      <q-btn
-        class="q-ml-sm"
-        flat
-        round
-        dense
-        color="primary"
-        icon="add"
-        @click.pervent="modalApiKey = true"
-      >
-        <q-tooltip>สร้าง API Key </q-tooltip>
-      </q-btn>
-      <q-space />
-      <q-input
-        borderless
-        dense
-        outlined
-        clearable
-        v-model="keyword"
-        placeholder="ค้นหา"
-        @clear="keyword = ''"
-      >
-        <template v-slot:append v-if="keyword === ''">
-          <q-icon name="search" />
-        </template>
-      </q-input>
-      <q-select
-        v-model="visibleColumns"
-        multiple
-        outlined
-        dense
-        options-dense
-        :display-value="$q.lang.table.columns"
-        emit-value
-        map-options
-        :options="columns"
-        option-value="name"
-        style="min-width: 140px"
-      />
-    </div>
+  <q-card flast bordered>
+    <q-tabs
+      v-model="tabs"
+      align="left"
+      bordered
+      dense
+      inline-label
+      indicator-color="primary"
+      active-color="primary bg-teal-1"
+    >
+      <q-tab name="list" label="รายการ web services" />
+      <q-tab name="log" label="ประวัติการใช้งาน" />
+    </q-tabs>
+    <q-separator />
 
-    <!-- Table -->
-    <div class="col-12 q-pt-sm">
-      <d-table
-        ref="table"
-        :columns="columns"
-        :rows="rows"
-        row-key="id"
-        :filter="keyword"
-        flat
-        bordered
-        :paging="true"
-        dense
-        :rows-per-page-options="[10, 25, 50, 100]"
-        :visible-columns="visibleColumns"
-      >
-        <template v-slot:header="props">
-          <q-tr :props="props">
-            <q-th auto-width />
-            <q-th v-for="col in props.cols" :key="col.name" :props="props">
-              <span class="text-weight-medium">{{ col.label }}</span>
-            </q-th>
-          </q-tr>
-        </template>
-        <template v-slot:body="props">
-          <q-tr :props="props">
-            <q-td auto-width>
-              <q-btn
-                dense
-                flat
-                round
-                color="red"
-                @click="onDeleteData(props.row.id)"
-                icon="delete"
-              >
-                <q-tooltip>ลบข้อมูล</q-tooltip>
-              </q-btn></q-td
-            >
-            <q-td v-for="col in props.cols" :key="col.name" :props="props">
-              <!-- <div v-if="col.name === 'apiNames'">
-                <q-list dense>
-                  <q-item v-for="(item, key) in col.value">
-                    <q-item-section>- {{ item.name }}</q-item-section>
-                  </q-item>
-                </q-list>
-              </div> -->
-              <div v-html="col.value ? col.value : '-'"></div>
-
-              <div>
-                <!-- {{ col.value ? col.value : "-" }} -->
-              </div>
-            </q-td>
-          </q-tr>
-        </template>
-      </d-table>
-    </div>
+    <q-tab-panels v-model="tabs" animated>
+      <q-tab-panel name="list"> <ListView /> </q-tab-panel>
+      <q-tab-panel name="log"> <LogView /> </q-tab-panel>
+    </q-tab-panels>
   </q-card>
-
-  <!-- สร้าง API Key -->
-  <DialogApiKey
-    v-model:modal="modalApiKey"
-    :fetch-data="fetchListWebServices"
-  />
-
-  <!-- การใช้งาน -->
-  <DialogUsability v-model:modal="modalUsability" />
 </template>
 
 <style scoped></style>