diff --git a/src/modules/05_placement/components/probation/MainProbation.vue b/src/modules/05_placement/components/probation/MainProbation.vue
index ff6633ca4..f28af5a48 100644
--- a/src/modules/05_placement/components/probation/MainProbation.vue
+++ b/src/modules/05_placement/components/probation/MainProbation.vue
@@ -1,87 +1,96 @@
 <template>
-    <div class="toptitle text-dark col-12 row items-center">รายการผู้ทดลองปฏิบัติหน้าที่ราชการ</div>
-		<q-card flat bordered class="col-12 q-mt-sm q-pa-md">
-			<div class="row q-col-gutter-sm">
-				<div class="row col-12 q-col-gutter-sm">
-					<div>
-						<q-btn @click="clickAdd()" size="12px" flat round color="add" icon="mdi-plus">
-							<q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
-						</q-btn>
-					</div>
-					<q-space />
+  <div class="toptitle text-dark col-12 row items-center">
+    รายการผู้ทดลองปฏิบัติหน้าที่ราชการ
+  </div>
+  <q-card flat bordered class="col-12 q-mt-sm q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="row col-12 q-col-gutter-sm">
+        <div>
+          <q-btn
+            @click="modal = true"
+            size="12px"
+            flat
+            round
+            color="add"
+            icon="mdi-plus"
+          >
+            <q-tooltip>เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ</q-tooltip>
+          </q-btn>
+        </div>
+        <q-space />
 
-					<q-input
-						class="col-xs-12 col-sm-3 col-md-2"
-						standout
-						dense
-						v-model="filterKeyword"
-						ref="filterRef"
-						outlined
-						debounce="300"
-						placeholder="ค้นหา"
-					>
-						<template v-slot:append>
-							<q-icon v-if="filterKeyword == ''" name="search" />
-							<q-icon
-								v-if="filterKeyword !== ''"
-								name="clear"
-								class="cursor-pointer"
-								@click="resetFilter"
-							/>
-						</template>
-					</q-input>
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </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"
-						options-cover
-						style="min-width: 150px"
-						class="col-xs-12 col-sm-3 col-md-2"
-					/>
-				</div>
-				<div class="col-12">
-					<q-table
-						ref="table"
-						:columns="columns"
-						:rows="rows"
-						:filter="filterKeyword"
-						row-key="Order"
-						flat
-						bordered
-						:paging="true"
-						dense
-						class="custom-header-table"
-						v-bind="attrs"
-						:visible-columns="visibleColumns"
-						:pagination-label="paginationLabel"
-						v-model:pagination="pagination"
-					>
-						<template v-slot:header="props">
-							<q-tr :props="props">
-								<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" class="cursor-pointer" @click="router.push(`/probation/detail/${props.rowIndex + 1}`)">
-								<q-td
-									v-for="col in props.cols"
-									:key="col.name"
-									:props="props"
-								>
-									<div v-if="col.name == 'no'">
-										{{ props.rowIndex + 1 }}
-									</div>
-									<!-- <div v-else-if="col.name == 'status'">
+        <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"
+          options-cover
+          style="min-width: 150px"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <div class="col-12">
+        <q-table
+          ref="table"
+          :columns="columns"
+          :rows="rows"
+          :filter="filterKeyword"
+          row-key="Order"
+          flat
+          bordered
+          :paging="true"
+          dense
+          class="custom-header-table"
+          v-bind="attrs"
+          :visible-columns="visibleColumns"
+          :pagination-label="paginationLabel"
+          v-model:pagination="pagination"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <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"
+              class="cursor-pointer"
+              @click="router.push(`/probation/detail/${props.rowIndex + 1}`)"
+            >
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+                <!-- <div v-else-if="col.name == 'status'">
 										<q-icon size="20px" v-if="props.row.status == 'อยู่ระหว่างการทดลองงาน'" name="mdi-timer-sand" color="deep-orange">
 											<q-tooltip>อยู่ระหว่างการทดลองงาน</q-tooltip>
 										</q-icon>
@@ -92,136 +101,151 @@
 											<q-tooltip>ผ่านการทดลองงาน</q-tooltip>
 										</q-icon>
 									</div> -->
-									<div v-else>
-										{{ col.value }}
-									</div>
-								</q-td>
-							</q-tr>
-						</template>
-						<template v-slot:pagination="scope">
-							<q-pagination
-								v-model="pagination.page"
-								active-color="primary"
-								color="dark"
-								:max="scope.pagesNumber"
-								:max-pages="5"
-								size="sm"
-								boundary-links
-								direction-links
-							></q-pagination>
-						</template>
-					</q-table>
-				</div>
-			</div>
-    </q-card>
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+          <template v-slot:pagination="scope">
+            <q-pagination
+              v-model="pagination.page"
+              active-color="primary"
+              color="dark"
+              :max="scope.pagesNumber"
+              :max-pages="5"
+              size="sm"
+              boundary-links
+              direction-links
+            ></q-pagination>
+          </template>
+        </q-table>
+      </div>
+    </div>
+  </q-card>
 
-		<q-dialog v-model="modal" persistent>
-			<q-card style="width: 900px; max-width: 80vw;">
-				<q-form ref="myForm">
-					<DialogHeader tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ " :close="clickClose" />
-					<q-separator />
-					<q-card-section class="q-pa-md q-col-gutter-sm">
-						<q-input
-							class="col-12"
-							standout
-							dense
-							v-model="filterKeyword2"
-							ref="filterRef2"
-							outlined
-							debounce="300"
-							placeholder="ค้นหา"
-						>
-							<template v-slot:append>
-								<q-icon v-if="filterKeyword2 == ''" name="search" />
-								<q-icon
-									v-if="filterKeyword2 !== ''"
-									name="clear"
-									class="cursor-pointer"
-									@click="resetFilter2"
-								/>
-							</template>
-						</q-input>
-						<div class="col-12">
-							<q-table
-								ref="table2"
-								:columns="columns2"
-								:rows="rows2"
-								:filter="filterKeyword2"
-								row-key="Order"
-								flat
-								bordered
-								:paging="true"
-								dense
-								class="custom-header-table"
-								v-bind="attrs"
-								:visible-columns="visibleColumns2"
-								:pagination-label="paginationLabel"
-								v-model:pagination="pagination"
-							>
-								<template v-slot:header="props">
-									<q-tr :props="props">
-										<q-th v-for="col in props.cols" :key="col.name" :props="props">
-											<span class="text-weight-medium">{{ col.label }}</span>
-										</q-th>
-										<q-th auto-width />
-									</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 v-if="col.name == 'no'">
-												{{ props.rowIndex + 1 }}
-											</div>
-											<div v-else>
-												{{ col.value }}
-											</div>
-										</q-td>
-										<q-td auto-width>
-											<q-btn
-												dense
-												class="q-px-md"
-												outline
-												color="primary"
-												v-close-popup
-												label="เพิ่ม"
-											>
-											</q-btn>
-										</q-td>
-									</q-tr>
-								</template>
-								<template v-slot:pagination="scope">
-									<q-pagination
-										v-model="pagination.page"
-										active-color="primary"
-										color="dark"
-										:max="scope.pagesNumber"
-										:max-pages="5"
-										size="sm"
-										boundary-links
-										direction-links
-									></q-pagination>
-								</template>
-							</q-table>
-						</div>
-					</q-card-section>        
-				</q-form>
-			</q-card>
-  	</q-dialog>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="width: 900px; max-width: 80vw">
+      <q-form ref="myForm">
+        <DialogHeader
+          tittle="เพิ่มผู้ทดลองปฏิบัติหน้าที่ราชการ "
+          :close="clickClose"
+        />
+        <q-separator />
+        <q-card-section class="q-pa-md q-col-gutter-sm">
+          <q-input
+            class="col-12"
+            standout
+            dense
+            v-model="filterKeyword2"
+            ref="filterRef2"
+            outlined
+            debounce="300"
+            placeholder="ค้นหา"
+          >
+            <template v-slot:append>
+              <q-icon v-if="filterKeyword2 == ''" name="search" />
+              <q-icon
+                v-if="filterKeyword2 !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="resetFilter2"
+              />
+            </template>
+          </q-input>
+          <div class="col-12">
+            <q-table
+              ref="table2"
+              :columns="columns2"
+              :rows="rows2"
+              :filter="filterKeyword2"
+              row-key="Order"
+              flat
+              bordered
+              :paging="true"
+              dense
+              class="custom-header-table"
+              v-bind="attrs"
+              :pagination-label="paginationLabel"
+              v-model:pagination="pagination"
+            >
+              <template v-slot:header="props">
+                <q-tr :props="props">
+                  <q-th
+                    v-for="col in props.cols"
+                    :key="col.name"
+                    :props="props"
+                  >
+                    <span class="text-weight-medium">{{ col.label }}</span>
+                  </q-th>
+                  <q-th auto-width />
+                </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 v-if="col.name == 'no'">
+                      {{ props.rowIndex + 1 }}
+                    </div>
+                    <div v-else>
+                      {{ col.value }}
+                    </div>
+                  </q-td>
+                  <q-td auto-width>
+                    <q-btn
+                      dense
+                      class="q-px-md"
+                      outline
+                      color="primary"
+                      label="เพิ่ม"
+                      @click="clickAdd(props.row.id)"
+                    >
+                    </q-btn>
+                  </q-td>
+                </q-tr>
+              </template>
+              <template v-slot:pagination="scope">
+                <q-pagination
+                  v-model="pagination.page"
+                  active-color="primary"
+                  color="dark"
+                  :max="scope.pagesNumber"
+                  :max-pages="5"
+                  size="sm"
+                  boundary-links
+                  direction-links
+                ></q-pagination>
+              </template>
+            </q-table>
+          </div>
+        </q-card-section>
+      </q-form>
+    </q-card>
+  </q-dialog>
 </template>
 
 <script setup lang="ts">
-import { ref, useAttrs } from "vue";
+import { ref, useAttrs, onMounted, watch } from "vue";
 import type { QTableProps } from "quasar";
-import type { FormMainProbation, FormMainProbation2 } from "@/modules/05_placement/interface/request/Main";
+import type {
+  FormMainProbation,
+  FormMainProbation2,
+} from "@/modules/05_placement/interface/request/Main";
 import DialogHeader from "@/modules/04_registry/components/DialogHeader.vue";
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
 import router from "@/router";
 import { useQuasar } from "quasar";
 
 const $q = useQuasar(); //ใช้ noti quasar
+const mixin = useCounterMixin();
+const { messageError, success, showLoader, hideLoader } = mixin;
+
 const modal = ref<boolean>(false);
 const pagination = ref({
   sortBy: "desc",
@@ -233,7 +257,7 @@ const pagination = ref({
 const visibleColumns = ref<string[]>([
   "no",
   "name",
-	"position",
+  "position",
   "level",
   "institution",
   "time",
@@ -261,7 +285,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -270,7 +294,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -279,7 +303,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "institution",
     align: "left",
     label: "สังกัด",
@@ -288,7 +312,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "time",
     align: "center",
     label: "ครั้งที่ทดลองงาน",
@@ -297,7 +321,7 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "orderNum",
     align: "center",
     label: "เลขที่คําสั่งบรรจุแต่งตั้ง",
@@ -314,69 +338,61 @@ const columns = ref<QTableProps["columns"]>([
     field: "status",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows = ref<FormMainProbation[]>([
-	{
-		no:"1",
-		name: "นายสมคิด ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"2",
-		name: "นายเกียรติศักดิ์ บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"3",
-		name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "อยู่ระหว่างการทดลองงาน",
-		orderNum: "11/2566",
-	},
-	{
-		no:"4",
-		name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ไม่ผ่านการทดลอง",
-		orderNum: "11/2566",
-	},
-	{
-		no:"5",
-		name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-		institution: "กลุ่มงานช่วยนักบริหาร",
-		time: "1",
-		status: "ผ่านการทดลองงาน",
-		orderNum: "11/2566",
-	}
-]);
-
-const visibleColumns2 = ref<string[]>([
-  "no",
-  "name",
-	"position",
-  "level",
-  "institution"
+  {
+    no: "1",
+    name: "นายสมคิด ยอดใจ ",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "2",
+    name: "นายเกียรติศักดิ์ บัณฑิต",
+    position: "นักวิชาการพัสดุ",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "3",
+    name: "นางสาวกัณฐิมา กาฬสินธุ์",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "อยู่ระหว่างการทดลองงาน",
+    orderNum: "11/2566",
+  },
+  {
+    no: "4",
+    name: "นางสาวเมขลา กระจ่างมนตรี",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ไม่ผ่านการทดลอง",
+    orderNum: "11/2566",
+  },
+  {
+    no: "5",
+    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+    position: "นักจัดการงานทั่วไป",
+    level: "ปฏิบัติการ",
+    institution: "กลุ่มงานช่วยนักบริหาร",
+    time: "1",
+    status: "ผ่านการทดลองงาน",
+    orderNum: "11/2566",
+  },
 ]);
 
 // หัวตาราง2
@@ -388,18 +404,18 @@ const columns2 = ref<QTableProps["columns"]>([
     sortable: true,
     field: "no",
     headerStyle: "font-size: 14px",
-    style: "font-size: 14px"
+    style: "font-size: 14px",
   },
   {
-    name: "name",
+    name: "fullname",
     align: "left",
     label: "ชื่อ-สกุล",
     sortable: true,
-    field: "name",
+    field: "fullname",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "position",
     align: "left",
     label: "ตำแหน่งในสายงาน",
@@ -408,7 +424,7 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
+  {
     name: "level",
     align: "left",
     label: "ระดับ",
@@ -417,56 +433,104 @@ const columns2 = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-	{
-    name: "institution",
+  {
+    name: "organizationOrganization",
     align: "left",
     label: "สังกัด",
     sortable: true,
-    field: "institution",
+    field: "organizationOrganization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-  }
+  },
 ]);
 
 // ข้อมูลตาราง (จำลอง)
 const rows2 = ref<FormMainProbation2[]>([
-  {
-		no:"1",
-    name: "นายใจดี ยอดใจ ",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"2",
-    name: "นายจักกริน บัณฑิต",
-		position: "นักวิชาการพัสดุ",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
-  },
-	{
-		no:"3",
-    name: "นางสาวกัณฐิมา กาฬสินธุ์",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"4",
-    name: "นางสาวเมขลา กระจ่างมนตรี",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  },
-	{
-		no:"5",
-    name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
-		position: "นักจัดการงานทั่วไป",
-		level: "ปฏิบัติการ",
-  	institution: "กลุ่มงานช่วยนักบริหาร",
-  }
+  //   {
+  //     no: "1",
+  //     name: "นายใจดี ยอดใจ ",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "2",
+  //     name: "นายจักกริน บัณฑิต",
+  //     position: "นักวิชาการพัสดุ",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานโครงสร้างและอัตรากำลัง ๒",
+  //   },
+  //   {
+  //     no: "3",
+  //     name: "นางสาวกัณฐิมา กาฬสินธุ์",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "4",
+  //     name: "นางสาวเมขลา กระจ่างมนตรี",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
+  //   {
+  //     no: "5",
+  //     name: "นางสาวฐิติรัตน์ พงษ์ศิริ",
+  //     position: "นักจัดการงานทั่วไป",
+  //     level: "ปฏิบัติการ",
+  //     institution: "กลุ่มงานช่วยนักบริหาร",
+  //   },
 ]);
 
+onMounted(async () => {});
+
+watch(modal, () => {
+  if (modal.value === true) {
+    fecthOrganiz();
+  }
+});
+
+const fecthOrganiz = async () => {
+  showLoader();
+  await http
+    .get(config.API.profileOrganizRoot)
+    .then((res) => {
+      console.log(res);
+      let id = res.data.result[0].id;
+      if (id !== "") {
+        findlist(id);
+      }
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+};
+
+const findlist = async (id: string) => {
+  let data = [
+    { criteriaType: "is_retire", criteriaValue: "false" },
+    { criteriaType: "is_probation", criteriaValue: "true" },
+  ];
+  await http
+    .post(config.API.profileSearchNewOcIdType(id, "all"), {
+      criterias: data,
+    })
+    .then((res) => {
+      console.log("res:", res);
+      rows2.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        fullname: e.fullname,
+        position: e.position,
+        level: e.positionEmployeeLevel,
+        organizationOrganization: e.oc,
+      }));
+    });
+};
+
 const clickDelete = (id: string) => {
   $q.dialog({
     title: "ยืนยันการลบข้อมูล",
@@ -476,17 +540,29 @@ const clickDelete = (id: string) => {
       color: "negative",
     },
     persistent: true,
+  })
+    .onOk(async () => {})
+    .onCancel(() => {})
+    .onDismiss(() => {});
+};
+
+const clickAdd = (id: string) => {
+  $q.dialog({
+    title: "ยืนยันการเพิ่มข้อมูล",
+    message: "ต้องการเพิ่มข้อมูลนี้ใช่หรือไม่?",
+    cancel: {
+      flat: true,
+      color: "negative",
+    },
+    persistent: true,
   })
     .onOk(async () => {
+      console.log("เพิ่ม:", id);
     })
     .onCancel(() => {})
     .onDismiss(() => {});
 };
 
-
-const clickAdd = () => {
-	modal.value = true
-};
 const clickClose = async () => {
   modal.value = false;
 };
@@ -513,7 +589,6 @@ const paginationLabel = (start: string, end: string, total: string) => {
   if (paging.value == true) return " " + start + "-" + end + " ใน " + total;
   else return start + "-" + end + " ใน " + total;
 };
-
 </script>
 
 <style lang="scss" scope>
@@ -563,4 +638,4 @@ const paginationLabel = (start: string, end: string, total: string) => {
     top: 0;
   }
 }
-</style>
\ No newline at end of file
+</style>