From cab4420aca36e1e10ccf88efc1e12d8a837006c6 Mon Sep 17 00:00:00 2001
From: oat <oatkub402@gmail.com>
Date: Fri, 2 Feb 2024 13:15:14 +0700
Subject: [PATCH] =?UTF-8?q?UI=20=E0=B8=82=E0=B9=89=E0=B8=AD=E0=B8=A1?=
 =?UTF-8?q?=E0=B8=B9=E0=B8=A5=E0=B8=9A=E0=B8=B8=E0=B8=84=E0=B8=84=E0=B8=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/personal/01ListPrefix.vue      | 397 ++++++++++++++++-
 .../components/personal/02ListRank.vue        | 408 +++++++++++++++++-
 .../components/personal/03ListBloodGroup.vue  | 397 ++++++++++++++++-
 .../components/personal/04ListGender.vue      | 397 ++++++++++++++++-
 .../components/personal/05ListReligion.vue    | 397 ++++++++++++++++-
 .../personal/06ListRelationship.vue           | 405 ++++++++++++++++-
 .../01_metadataNew/stores/personalStore.ts    |  25 ++
 7 files changed, 2414 insertions(+), 12 deletions(-)
 create mode 100644 src/modules/01_metadataNew/stores/personalStore.ts

diff --git a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
index dd89f390e..ba01b3bed 100644
--- a/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
+++ b/src/modules/01_metadataNew/components/personal/01ListPrefix.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "prefix",
+    align: "left",
+    label: "คำนำหน้าชื่อ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const prefix = ref<string>("");
+const prefixRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "prefix",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "ว่าที่ร้อยตรี",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      name: "นางสาว",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      name: "นาย",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  prefixRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (prefix.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        prefix.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-    คำนำหน้าชื่อ
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="prefixRef"
+            outlined
+            v-model="prefix"
+            label="คำนำหน้าชื่อ"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกคำนำหน้าชื่อ']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/personal/02ListRank.vue b/src/modules/01_metadataNew/components/personal/02ListRank.vue
index c033171b7..610d59cef 100644
--- a/src/modules/01_metadataNew/components/personal/02ListRank.vue
+++ b/src/modules/01_metadataNew/components/personal/02ListRank.vue
@@ -1,3 +1,407 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { usePersonalDataStore } from "@/modules/01_metadataNew/stores/personalStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = usePersonalDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const rank = ref<string>("");
+const rankRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "rank",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      rank: "ยศ1",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      rank: "ยศ2",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      rank: "ยศ3",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
+    {
+      id: "4",
+      rank: "ยศ4",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+    {
+      id: "5",
+      rank: "ยศ5",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  rankRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (rank.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        closeDialog();
+        rank.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-    ยศ
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="rankRef"
+            outlined
+            v-model="rank"
+            label="ยศ"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุุณากรอกยศ']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
index 06e1e95ca..fa57a5735 100644
--- a/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
+++ b/src/modules/01_metadataNew/components/personal/03ListBloodGroup.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "bloodGroup",
+    align: "left",
+    label: "กลุ่มเลือด",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const bloodGroup = ref<string>("");
+const bloodGroupRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "bloodGroup",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "A",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      name: "AB",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      name: "O",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  bloodGroupRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (bloodGroup.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        bloodGroup.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-    กลุ่มเลือด
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="bloodGroupRef"
+            outlined
+            v-model="bloodGroup"
+            label="กลุ่มเลือด"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกกลุ่มเลือด']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/personal/04ListGender.vue b/src/modules/01_metadataNew/components/personal/04ListGender.vue
index fe540f2ec..ded75420b 100644
--- a/src/modules/01_metadataNew/components/personal/04ListGender.vue
+++ b/src/modules/01_metadataNew/components/personal/04ListGender.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "gender",
+    align: "left",
+    label: "เพศ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const gender = ref<string>("");
+const genderRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "gender",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "ชาย",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      name: "หญิง",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      name: "เพศทางเลือก",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  genderRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (gender.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        gender.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-   เพศ 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="genderRef"
+            outlined
+            v-model="gender"
+            label="เพศ"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกเพศ']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/personal/05ListReligion.vue b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
index a71807508..d0a3d1e64 100644
--- a/src/modules/01_metadataNew/components/personal/05ListReligion.vue
+++ b/src/modules/01_metadataNew/components/personal/05ListReligion.vue
@@ -1,3 +1,396 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "religion",
+    align: "left",
+    label: "ศาสนา",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const religion = ref<string>("");
+const religionRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "religion",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "พุทธศาสนา",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: true,
+    },
+    {
+      id: "2",
+      name: "คริสต์ศาสนา",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: false,
+    },
+    {
+      id: "3",
+      name: "อิสลาม",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: false,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  religionRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (religion.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        religion.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-   ศาสนา 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="religionRef"
+            outlined
+            v-model="religion"
+            label="ศาสนา"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกศาสนา']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
index 9a64c12af..f0052b4b3 100644
--- a/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
+++ b/src/modules/01_metadataNew/components/personal/06ListRelationship.vue
@@ -1,3 +1,404 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import type { QTableProps } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import { useRouter } from "vue-router";
+import { useInsigniaDataStore } from "@/modules/01_metadataNew/stores/InsigniaStore";
+import dialogHeader from "@/components/DialogHeader.vue";
+import { useQuasar } from "quasar";
+
+const store = useInsigniaDataStore();
+const router = useRouter();
+const mixin = useCounterMixin();
+const { dialogRemove, dialogConfirm } = mixin;
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "relationship",
+    align: "left",
+    label: "สถานภาพ",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "createdAt",
+    align: "left",
+    label: "วันที่สร้าง",
+    sortable: true,
+    field: "createdAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "lastUpdateFullName",
+    align: "left",
+    label: "ผู้ดำเนินการ",
+    sortable: true,
+    field: "lastUpdateFullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "isActive",
+    align: "left",
+    label: "สถานะ",
+    sortable: true,
+    field: "isActive",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+]);
+
+const $q = useQuasar();
+
+const filterKeyword = ref<string>("");
+const dialog = ref<boolean>(false);
+const isActive = ref<boolean>(false);
+const relationship = ref<string>("");
+const relationshipRef = ref<any>(null);
+const dialogStatus = ref<string>("");
+const visibleColumns = ref<string[]>([
+  "relationship",
+  "createdAt",
+  "lastUpdatedAt",
+  "lastUpdateFullName",
+  "isActive",
+]);
+
+function fetchData() {
+  const data = [
+    {
+      id: "1",
+      name: "สมรส",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "สาวิตรี ศรีสมัย",
+      isActive: false,
+    },
+    {
+      id: "2",
+      name: "เคยสมรสแต่ไม่ทราบสถานภาพสมรส",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "System Administrator",
+      isActive: true,
+    },
+    {
+      id: "3",
+      name: "แยกกันอยู่",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
+    {
+      id: "4",
+      name: "โสด",
+      createdAt: new Date(),
+      lastUpdatedAt: new Date(),
+      lastUpdateFullName: "คณะกรรมการ ตรวจรับ",
+      isActive: true,
+    },
+  ];
+  store.fetchData(data);
+}
+
+onMounted(async () => {
+  fetchData();
+});
+
+function closeDialog() {
+  dialog.value = false;
+}
+
+function validateForm() {
+  relationshipRef.value.validate();
+  onSubmit();
+}
+
+async function onSubmit() {
+  if (relationship.value.length > 0) {
+    dialogConfirm(
+      $q,
+      async () => {
+        console.log("สำเร็จ");
+        closeDialog();
+        relationship.value = "";
+        isActive.value = false;
+      },
+      "ยืนยันการบันทึกข้อมูล",
+      "ต้องการยืนยันการบันทึกข้อมูลนี้หรือไม่ ?"
+    );
+  }
+}
+</script>
+
 <template>
-   สถานภาพ 
-</template>
\ No newline at end of file
+  <q-toolbar style="padding: 0">
+    <q-btn
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click.stop="
+        () => {
+          dialogStatus = 'create';
+          dialog = true;
+        }
+      "
+    >
+      <q-tooltip> เพิ่มข้อมูล </q-tooltip>
+    </q-btn>
+    <q-space />
+    <div class="row q-gutter-sm">
+      <q-input outlined dense v-model="filterKeyword" label="ค้นหา"></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"
+      />
+    </div>
+  </q-toolbar>
+
+  <d-table
+    ref="table"
+    :columns="columns"
+    :rows="store.row"
+    :filter="filterKeyword"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table"
+    :visible-columns="visibleColumns"
+  >
+    <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"
+        @click.stop="onclickDetail(props.row.id)"
+      >
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div v-if="col.name == 'isActive'">
+            <q-icon
+              v-if="col.value == false"
+              name="mdi-close"
+              color="red"
+              class="text-h5"
+            />
+            <q-icon v-else name="mdi-check" color="positive" class="text-h5" />
+          </div>
+          <div v-else>
+            {{ col.value }}
+          </div>
+        </q-td>
+        <q-td auto-width>
+          <q-btn
+            color="grey"
+            flat
+            dense
+            round
+            size="14px"
+            icon="more_vert"
+            @click.stop
+          >
+            <q-menu>
+              <q-list dense>
+                <q-item
+                  v-close-popup
+                  clickable
+                  @click.stop="
+                    () => {
+                      dialogStatus = 'edit';
+                      dialog = true;
+                    }
+                  "
+                >
+                  <q-item-section>
+                    <div class="row items-center white">
+                      <q-icon name="o_edit" color="positive" />
+                      <span class="q-ml-sm">แก้ไข</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+                <q-item clickable>
+                  <q-item-section
+                    @click="dialogRemove($q, async () => {})"
+                    v-close-popup
+                  >
+                    <div class="row items-center white">
+                      <q-icon name="mdi-trash-can-outline" color="negative" />
+                      <span class="q-ml-sm">ลบ</span>
+                    </div>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+          </q-btn>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+
+  <q-dialog v-model="dialog" class="dialog" persistent>
+    <q-card style="min-width: 350px" class="bg-grey-11">
+      <form @submit.prevent="validateForm">
+        <q-card-section class="flex justify-between" style="padding: 0">
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
+        </q-card-section>
+
+        <q-separator color="grey-4" />
+        <q-card-section class="q-pa-none">
+          <q-input
+            ref="relationshipRef"
+            outlined
+            v-model="relationship"
+            label="สถานภาพ"
+            dense
+            lazy-rules
+            borderless
+            class="col-12 bg-white q-ma-md"
+            :rules="[(val) => val.length > 0 || 'กรุณากรอกสถานภาพ']"
+            hide-bottom-space
+          />
+          <div
+            class="col q-ma-md q-pa-sm bg-white border_custom text-weight-medium"
+          >
+            <div class="row items-center q-my-sm justify-between">
+              <p class="q-ma-none">สถานะการใช้งาน</p>
+              <label class="toggle-control">
+                <input type="checkbox" dense v-model="isActive" />
+                <span class="control"></span>
+              </label>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right">
+          <q-btn
+            id="onSubmit"
+            type="submit"
+            dense
+            unelevated
+            label="บันทึก"
+            color="public"
+            class="q-px-md"
+          >
+            <q-tooltip>บันทึกข้อมูล</q-tooltip>
+          </q-btn>
+        </q-card-actions>
+      </form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+.border_custom {
+  border-radius: 6px !important;
+  border: 1px solid #e1e1e1;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+
+// These are our computed variables
+// change at your own risk.
+$toggle-radius: $toggle-height / 2;
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>
diff --git a/src/modules/01_metadataNew/stores/personalStore.ts b/src/modules/01_metadataNew/stores/personalStore.ts
new file mode 100644
index 000000000..43aef4bdc
--- /dev/null
+++ b/src/modules/01_metadataNew/stores/personalStore.ts
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type {
+  DataResponse,
+  DataRow,
+} from "../interface/response/insignia/Insignia";
+import { useCounterMixin } from "@/stores/mixin";
+
+const { date2Thai } = useCounterMixin();
+
+export const usePersonalDataStore = defineStore("PersonalData", () => {
+  const row = ref<DataRow[]>([]);
+  function fetchData(data: DataResponse[]) {
+    const list = data.map((e) => ({
+      ...e,
+      createdAt: e.createdAt ? date2Thai(e.createdAt) : "",
+      lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "",
+    }));
+    row.value = list;
+  }
+  return {
+    fetchData,
+    row,
+  };
+});