fixed bug

2024-06-24 18:26:50 +07:00 · 2024-06-24 18:25:17 +07:00 · 2024-06-24 18:16:19 +07:00 · 2024-06-24 18:03:10 +07:00 · 2024-06-24 17:37:56 +07:00 · 2024-06-24 11:40:15 +07:00
19 changed files with 1587 additions and 448 deletions
--- a/.gitea/workflows/frontend.yaml
+++ b/.gitea/workflows/frontend.yaml
@@ -24,4 +24,13 @@ jobs:
          target: app
          build-args: |
            VUE_APP_API_URL=/api
+      - name: update server
+        uses: https://github.com/appleboy/ssh-action@v1.0.3
+        with:
+          host: 46.102.174.196
+          username: root
+          key: ${{ secrets.SORVOR_KEY }}
+          port: 22
+          script: "docker compose pull && docker compose up -d"
+          command_timeout: 3h
      - run: echo "🍏 This job's status is ${{ job.status }}."
--- a/2
+++ b/2
@@ -8,7 +8,7 @@ WORKDIR /app
 FROM base AS prod-deps
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --prod --frozen-lockfile
 FROM base AS build
-RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
+RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile --shamefully-hoist
 ARG VUE_APP_API_URL
 RUN pnpm run build
 
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
        "thai-id-validator": "^1.1.3",
        "vue": "^3.2.13",
        "vue-router": "^4.3.0",
+        "vue-sweetalert2": "^5.0.10",
        "vuetify": "^3.0.0-beta.0",
        "vuex": "^4.0.0",
        "webfontloader": "^1.0.0"
@@ -12995,6 +12996,14 @@
        "node": ">= 10"
      }
    },
+    "node_modules/sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==",
+      "funding": {
+        "url": "https://sweetalert2.github.io/#donations"
+      }
+    },
    "node_modules/symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -13817,6 +13826,17 @@
      "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
      "dev": true
    },
+    "node_modules/vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "dependencies": {
+        "sweetalert2": "11.4.4"
+      },
+      "peerDependencies": {
+        "vue": "*"
+      }
+    },
    "node_modules/vue-template-es2015-compiler": {
      "version": "1.9.1",
      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
@@ -24924,6 +24944,11 @@
        }
      }
    },
+    "sweetalert2": {
+      "version": "11.4.4",
+      "resolved": "https://registry.npmjs.org/sweetalert2/-/sweetalert2-11.4.4.tgz",
+      "integrity": "sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w=="
+    },
    "symbol-tree": {
      "version": "3.2.4",
      "resolved": "https://registry.npmmirror.com/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -25565,6 +25590,14 @@
        }
      }
    },
+    "vue-sweetalert2": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/vue-sweetalert2/-/vue-sweetalert2-5.0.10.tgz",
+      "integrity": "sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==",
+      "requires": {
+        "sweetalert2": "11.4.4"
+      }
+    },
    "vue-template-es2015-compiler": {
      "version": "1.9.1",
      "resolved": "https://registry.npmmirror.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz",
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
    "thai-id-validator": "^1.1.3",
    "vue": "^3.2.13",
    "vue-router": "^4.3.0",
+    "vue-sweetalert2": "^5.0.10",
    "vuetify": "^3.0.0-beta.0",
    "vuex": "^4.0.0",
    "webfontloader": "^1.0.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -32,6 +32,9 @@ dependencies:
  vue-router:
    specifier: ^4.3.0
    version: 4.3.2(vue@3.4.23)
+  vue-sweetalert2:
+    specifier: ^5.0.10
+    version: 5.0.10(vue@3.4.23)
  vuetify:
    specifier: ^3.0.0-beta.0
    version: 3.5.16(vue@3.4.23)(webpack-plugin-vuetify@2.0.1)
@@ -7097,6 +7100,10 @@ packages:
      stable: 0.1.8
    dev: true

+  /sweetalert2@11.4.4:
+    resolution: {integrity: sha512-9yYWQuRT1v9JNI/paPTSYV+68MHwe9C+HQ/I2jtfaFzoJgYRftWXOs4JqmDSjT7m2m4r8ebMMn8LcxD1Wq9B/w==}
+    dev: false
+
  /symbol-tree@3.2.4:
    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
    dev: true
@@ -7568,6 +7575,15 @@ packages:
      loader-utils: 1.4.2
    dev: true

+  /vue-sweetalert2@5.0.10(vue@3.4.23):
+    resolution: {integrity: sha512-6T8z69YM8z5WYRDwKyPgBBB+1Rk7KZ56xrabyEJ3UPrGtdDaZ1UYoDwITiWLgVSYeCESiVByR4mGvn/YovphCQ==}
+    peerDependencies:
+      vue: '*'
+    dependencies:
+      sweetalert2: 11.4.4
+      vue: 3.4.23
+    dev: false
+
  /vue-template-es2015-compiler@1.9.1:
    resolution: {integrity: sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==}
    dev: true
--- a/src/components/HeaderHome.vue
+++ b/src/components/HeaderHome.vue
@@ -9,9 +9,14 @@
              src="../assets/logo-title.png"
              width="600"
              @click="$router.push('/')"
+              class="logo-home"
            ></v-img>
          </v-col>
-          <v-col align-self="center" align="center">
+          <v-col align-self="center" align="center" v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              ">
            <div style="width: 90%">
              สว. ระบบใหม่ <b>“แบ่งกลุ่มอาชีพ”</b> และ
              <b>“เลือกกันเอง”</b>
@@ -201,6 +206,13 @@ export default {
  padding: 7px 10px;
 }
@media only screen and (min-width: 0px) and (max-width: 700px) {
+  #app > div > div > main > div:nth-child(2) > div > div:nth-child(1) > div.text-normal.mb-5 > div > div > div.v-col-sm-12.v-col-md.v-col-auto > div{
+    height: 171px !important;
+  }
+  .logo-home{
+    height: 300px !important;
+    width: auto;
+  }
  .bg-curve {
    height: 450px;
    position: relative;
--- a/src/components/MainVote.vue
+++ b/src/components/MainVote.vue
@@ -3,12 +3,12 @@
    <Header />
    <Section2Green />
    <!-- <Section3Base /> -->
-    <Section4White/>
-    <Section5Green/>
-    <Section6Base/>
-    <Section7GreenTab/>
-    <Section8Base/>
-    <FooterPage/>
+    <Section4White />
+    <Section5Green />
+    <Section6Base />
+    <Section7GreenTab />
+    <Section8Base />
+    <FooterPage />
  </div>
 </template>
 <script>
@@ -25,7 +25,8 @@ import Section8Base from "./Section8Base.vue";
 import FooterPage from "./FooterPage.vue";
 export default {
  computed: {
-    ...mapGetters(["getUsername"]),},
+    ...mapGetters(["getUsername"]),
+  },
  components: {
    Header,
    Section2Green,
@@ -35,9 +36,7 @@ export default {
    Section6Base,
    Section7GreenTab,
    Section8Base,
-    FooterPage
-
-
+    FooterPage,
  },
  mounted() {
    // if(this.getUsername){
@@ -56,15 +55,19 @@ export default {
    //     });
    //     this.$store.commit("setCheckLogin", true);
    // }
-
-     
  },
 };
 </script>
-<style >
+<style>
 .bg-main {
  background: #f6ebd5;
  min-height: 100vh;
-  height:auto;
+  height: auto;
+  overflow-x: hidden;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .bg-main {
+    overflow-x: hidden;
+  }
 }
 </style>
--- a/src/components/Section2Green.vue
+++ b/src/components/Section2Green.vue
@@ -1,19 +1,22 @@
 <template>
-  <div style="position: relative" class="text-normal bg-curve my-auto" >
+  <div style="position: relative" class="text-normal bg-curve my-auto">
    <div
-     style="width: 90%"
-      class="text-center text-white py-10  mx-auto my-auto"
+      style="width: 90%"
+      class="text-center text-white py-10 mx-auto my-auto"
      v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "
    >
-    <div class="text-subtitle mx-10 text-center  box-order mx-auto my-5 d-none"  style="color:#ffffff;">
-              ขั้นตอนที่
-              <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
-            </div>
-      <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div>
+      <div
+        class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none"
+        style="color: #ffffff"
+      >
+        ขั้นตอนที่
+        <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
+      </div>
+      <!-- <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div> -->
      <div class="mb-8">
-        ลงทะเบียนแสดงตัวตน แสดงความคิดเห็น สมัคร สว.
+        ลงทะเบียนแสดงตัวตน / ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.
      </div>

      <v-btn
@@ -28,16 +31,17 @@
          :aspect-ratio="1"
          src="../assets/Group 23.png"
          width="80"
-          style="position: absolute; bottom: -40px; right: 0"
+          style="position: absolute; bottom: -40px; left: 0"
        ></v-img>
        <span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
      </v-btn>
    </div>
-    <div class="text-center text-white py-10 pb-20 mx-auto" v-if="getUsername"  style="width: 90%">
-      <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
-      <div class="mb-8">
-        ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
-        ที่ตัวเองเป็นผู้แสดงตน
+    <div class="text-center text-white pb-20 mx-auto" style="width: 90%">
+      <div v-if="getUsername" class="mt-10">
+        <div class="text-title my-3">ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.</div>
+        <div class="mb-8">
+          ค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/อำเภอ ที่ตัวเองเป็นผู้แสดงตน
+        </div>
      </div>
      <v-btn
        elevated
@@ -73,7 +77,7 @@ export default {
  height: auto;
  background-position: center bottom;
  background-color: white;
-  background-size: cover; 
+  background-size: cover;
  /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
 .bg-green-black {
--- a/src/components/edit/FormSteperEdit.vue
+++ b/src/components/edit/FormSteperEdit.vue
@@ -52,7 +52,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                      </span>
                    </div>
                    <v-text-field
@@ -67,7 +67,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                      </span>
                    </div>
                    <v-text-field
@@ -80,10 +80,12 @@
                      class="my-2"
                      readonly
                    ></v-text-field>
+                    <span class="text-medium-emphasis ml-2" style="font-size: 15px">
+                         หมายเลขผู้สมัคร สามารถแก้ไขได้ในภายหลัง
+                      </span>
                    <v-text-field
                      label="หมายเลขผู้สมัคร"
                      variant="solo"
-                      :rules="rules.required"
                      v-model="payload.registerno"
                      type="number"
                      hide-spin-buttons
@@ -169,7 +171,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>

@@ -283,7 +285,7 @@
                    class="float-left"
                    size="large"
                    variant="tonal"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >
                  <!-- <v-spacer></v-spacer> -->

@@ -297,7 +299,7 @@
                    size="large"
                    variant="tonal"
                    class="float-right"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -408,7 +410,7 @@
                        variant="tonal"
                        size="large"
                        class="float-left"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -418,7 +420,7 @@
                        variant="tonal"
                        class="float-right"
                        size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                      >
                    </div>
                    <!-- {{ checkOpt1 }} -->
@@ -561,7 +563,7 @@
                      class="float-left"
                      size="large"
                      variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                    >
                  </div>
                </v-card>
@@ -585,7 +587,7 @@ import { mapGetters } from "vuex";

 // client.info.getAllGroups.query({}).then(console.log);
 export default {
-  components: { },
+  components: {},
  watch: {
    image(val) {
      console.log(val);
@@ -952,8 +954,16 @@ export default {
        this.$store.commit("setUsername", data.firstName);
        this.$store.commit("setImg", data.image);
        this.load = false;
-        alert("บันทึกข้อมูลสำเร็จ");
-        this.$router.push("/");
+        this.$swal
+          .fire({
+            title: "บันทึกข้อมูลสำเร็จ",
+            icon: "success",
+            timer: 3000,
+            showConfirmButton: false,
+          })
+          .then(() => {
+            this.$router.push("/");
+          });
      });
    },

@@ -971,17 +981,17 @@ export default {
        method: "POST",
        body: formData,
      }).then(() => {
-        client.user.confirmChangeImage.mutate().then(() => {
-          this.getUserAfterEdit();
-        }).catch((error) => {
-
-          console.log('error.message',error.message);
-          alert(
-              "บันทึกรูปภาพไม่สำเร็จ!"
-            );
-          this.getUserAfterEdit();
-          // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
-          
+        client.user.confirmChangeImage
+          .mutate()
+          .then(() => {
+            this.getUserAfterEdit();
+          })
+          .catch((error) => {
+            this.load = false;
+            console.log("error.message", error.message);
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
+            this.getUserAfterEdit();
+            // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
          });
        // alert("บันทึกข้อมูลสำเร็จ");
      });
@@ -1037,7 +1047,21 @@ export default {
          // }
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -1051,7 +1075,21 @@ export default {
          this.$router.push("/");
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -1068,7 +1106,21 @@ export default {
          this.$store.commit("setImg", data.image);
        })
        .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้");
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
--- a/src/components/form/FormSteper.vue
+++ b/src/components/form/FormSteper.vue
@@ -53,7 +53,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
                      <span class="ml-2 text-red-accent-4">
-                        * ใช้เป็น username
+                        * ชื่อผู้ใช้งาน (username)
                      </span>
                    </div>
                    <v-text-field
@@ -69,7 +69,7 @@
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
                      <span class="text-red-accent-4 ml-2">
-                        * ใช้เป็น password
+                        * รหัสผ่าน (password)
                      </span>
                    </div>
                    <v-text-field
@@ -81,10 +81,12 @@
                      hide-spin-buttons
                      class="my-2"
                    ></v-text-field>
+                    <span class="text-medium-emphasis ml-2" style="font-size: 15px">
+                         หมายเลขผู้สมัคร สามารถแก้ไขได้ในภายหลัง
+                      </span>
                    <v-text-field
                      label="หมายเลขผู้สมัคร"
-                      variant="solo"
-                      :rules="rules.required"
+                      variant="solo"         
                      v-model="payload.registerno"
                      type="number"
                      hide-spin-buttons
@@ -169,7 +171,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -281,7 +283,7 @@
                    variant="tonal"
                    class="float-left"
                    size="large"
-                    >ก่อนหน้า</v-btn
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >

                  <v-btn
@@ -294,7 +296,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>
                <!-- <v-stepper-actions
@@ -386,7 +388,7 @@
                        class="float-left"
                        size="large"
                        variant="tonal"
-                        >ก่อนหน้า</v-btn
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -396,7 +398,7 @@
                        variant="tonal"
                        class="float-right"
                        size="large"
-                        >ถัดไป</v-btn
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                      >
                    </div>
                    <!-- {{ checkOpt1 }} -->
@@ -541,7 +543,7 @@
                      class="float-left"
                      size="large"
                      variant="tonal"
-                      >ก่อนหน้า</v-btn
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                    >
                  </div>
                </v-card>
@@ -955,15 +957,26 @@ export default {
          if (this.file) {
            this.uploadImage();
          } else {
-            alert(
-              "บันทึกรูปภาพไม่สำเร็จ!"
-            );
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
            this.getUser();
-           
          }
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: error.message,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -974,10 +987,33 @@ export default {
          this.load = false;
          this.$store.commit("setCheckLogin", false);
          localStorage.setItem("token", data.token);
-          this.$router.push("/");
+          this.$swal
+            .fire({
+              title: "บันทึกข้อมูลสำเร็จ",
+              icon: "success",
+              timer: 3000,
+              showConfirmButton: false,
+            })
+            .then(() => {
+              this.$router.push("/");
+            });
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          this.load = false;
+          console.log("eeee" +  error.message);
+          if ( error.message == "Unable to create new user") {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: "บัญชีผู้ใช้งานซ้ำ",
+              icon: "error",
+            });
+          } else {
+            this.$swal.fire({
+              title: "บันทึกข้อมูลไม่สำเร็จ",
+              text: error,
+              icon: "error",
+            });
+          }
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -990,9 +1026,10 @@ export default {
          localStorage.setItem("img", data.image);
          this.$store.commit("setUsername", data.firstName);
          this.$store.commit("setImg", data.image);
-          alert(
-            "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
-          );
+
+          // alert(
+          //   "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+          // );

          this.login({ cid: data.cid, phone: data.phone });
        })
--- a/src/components/search/CardUser
+++ b/src/components/search/CardUser
@@ -0,0 +1,438 @@
+<template>
+  <div class="pa-lg-8 pa-md-8 pa-sm-3">
+    <div
+      style="
+        background-color: #f6b0e5;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        border-radius: 20px;
+      "
+      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
+    >
+      <!-- {{ dataProfile }} -->
+      <v-row class="page-search">
+        <v-col
+          v-for="(item, i) in dataProfile"
+          :key="i"
+          cols="12"
+          md="12"
+          lg="6"
+        >
+          <v-card
+            elevation="7"
+            class="text-sub2 mx-auto py-3 card-user"
+            maxWidth="900"
+            rounded="xl"
+          >
+            <v-card-item>
+              <v-row align="left" style="min-height: 450px">
+                <v-col cols="12" md="5" class="text-center my-auto">
+                  <!-- {{ item.image }} -->
+                  <v-img
+                    v-if="item && item.image"
+                    :src="item.image"
+                    cover
+                    rounded="xl"
+                    class="mx-auto img-display"
+                  >
+                  </v-img
+                  >
+                     <v-icon
+                      v-else
+                            icon="mdi-account"
+                            size="180"
+                            color="#635d56"
+                            class="mx-auto my-auto"
+                          ></v-icon>
+                 
+                </v-col>
+                <v-col cols="12" md="" class="mx-auto">
+                  <v-row>
+                    <v-col>
+                      <div class="box-group">
+                        <div class="t-md">กลุ่มที่</div>
+                        <div
+                          class="font-weight-bold"
+                          style="font-size: xxx-large"
+                        >
+                          {{ item.group.id }}
+                        </div>
+                      </div>
+                    </v-col>
+                    <v-col>
+                      <div class="box-group">
+                        <div class="t-md">หมายเลขผู้สมัคร</div>
+                        <div style="font-size: xxx-large">
+                          <div class="font-weight-bold" v-if="item.registerno">
+                            {{ item.registerno }}
+                          </div>
+                          <div class="font-weight-bold" v-else> - </div>
+                        </div>
+                      </div></v-col
+                    >
+                  </v-row>
+                  <div
+                    class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
+                    v-if="item.zone"
+                  >
+                    <div class="font-weight-bold px-3">
+                      {{ item.zone.province.name }} |
+                      <span class="font-weight-medium">{{
+                        item.zone.name
+                      }}</span>
+                    </div>
+                  </div>
+                  <div class="font-weight-bold text-normal my-2 text-md-left">
+                    <div style="font-size: xx-large">
+                      <span> {{ item.firstName }}</span>
+                      <span class="ml-3">
+                        {{ item.lastName }}
+                      </span>
+                    </div>
+
+                    <div class="mx-auto text-md-left text-sub2 mb-2">
+                      {{ item.group.name }}
+                    </div>
+
+                    <div class="text-sub2 text-left mt-5 text-medium-emphasis">
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold"> อายุ :</span>
+
+                        {{ item.age }} ปี
+                      </div>
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold">อาชีพ :</span>
+                        {{ item.job }}
+                      </div>
+                      <div class="font-weight-medium">
+                        <span class="font-weight-bold">การศึกษา :</span>
+                        {{ item.education }}
+                      </div>
+                    </div>
+                  </div>
+                </v-col>
+              </v-row>
+
+              <v-row> </v-row>
+              <div class="text-left text-small mt-3 d-none">
+                <div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
+                <v-divider class="my-1"></v-divider>
+
+                <div class="mt-2 d-flex justify">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="0px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"
+                    ></path></svg
+                  ><span v-if="item.facebook"> {{ item.facebook }}</span
+                  ><span v-else> - </span>
+                </div>
+                <div class="mt-2 d-flex justify">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="-5px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"
+                    ></path></svg
+                  ><span v-if="item.twitter"> {{ item.twitter }}</span
+                  ><span v-else> - </span>
+                </div>
+
+                <div class="mt-2 d-flex justify">
+                  <!-- <i class="far fa-tiktok"></i> -->
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    x="0px"
+                    y="0px"
+                    width="23"
+                    height="23"
+                    viewBox="0 0 50 50"
+                    class="mr-2"
+                  >
+                    <path
+                      d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"
+                    ></path></svg
+                  ><span v-if="item.tiktok"> {{ item.tiktok }}</span
+                  ><span v-else> - </span>
+                </div>
+              </div>
+            </v-card-item>
+          </v-card></v-col
+        >
+      </v-row>
+      <!-- {{ dataProfile.length }}
+      <div v-if="dataProfile.length == 0">ไม่พบข้อมูล</div> -->
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dataProfile: {
+      type: Array,
+    },
+  },
+  data() {
+    return {
+      profile: [
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: {
+            fb: "Sornram jadee",
+            x: "Sornram jadee",
+            email: "sornram.j@gmail.com",
+          },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group:
+            "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพ",
+          district: "บางเขน",
+          phone: "08952402xx",
+          age: "42",
+          edit: "บางเขน",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+        {
+          name: "ศรราม",
+          lastname: "ใจดี",
+          province: "กรุงเทพมหานคร",
+          district: "บางเขนบางเขน",
+          phone: "08952402xx",
+          age: "42",
+          education: "ปริญญาโท ด้านเศรษฐศาสตร์",
+          group: "กลุ่มการศึกษา",
+          occupation:
+            "อดีตเคยทำงานด้านการจัดทำข้อเสนอเชิงนโยบายเศรษฐกิจมหภาคต่อกระทรวงการคลังและรัฐบาล...",
+          email: "sornram.j@gmail.com",
+          social: { fb: "Sornram jadee", x: "Sornram jadee" },
+          opinion: {
+            agree: [
+              "แก้ไข มาตรา 112",
+              "แก้ไขรัฐธรรมนูญ 2560",
+              "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
+              "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
+            ],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+          },
+        },
+      ],
+    };
+  },
+};
+</script>
+<style>
+.img-display {
+  height: 450px;
+}
+.box-group {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+  min-width: 100%;
+  padding: 10px 2px;
+  height: 100%;
+}
+.line-r-g {
+  padding-left: 5px;
+  border-color: #ffcd68;
+  border-right: 0.2px solid #ffcd68;
+}
+.line-g {
+  border: 1px solid #ffcd68;
+  display: inline-flex;
+}
+.card-user {
+  height: 100%;
+  /* height: 370px; */
+}
+.more {
+  width: 95%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+}
+.box-province {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+}
+@media only screen and (min-width: 0px) and (max-width: 1000px) {
+  .img-display {
+    height: 400px !important;
+    width: auto;
+  }
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .page-search {
+    padding: 20px 0px;
+  }
+
+  .card-user {
+    max-height: auto !important;
+    height: auto !important;
+  }
+  .line-g {
+    display: inline-flex;
+  }
+  .box-province {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+  }
+  .img-display {
+    height: 300px !important;
+  }
+}
+</style>
+<style scoped>
+@media only screen and (min-width: 900px) and (max-width: 1290px) {
+  .t-md {
+    font-size: 18px;
+  }
+}
+</style>
--- a/src/components/search/CardUser.vue
+++ b/src/components/search/CardUser.vue
@@ -12,11 +12,9 @@
      <!-- {{ dataProfile }} -->
      <v-row class="page-search">
        <v-col
-          v-for="(item, i) in dataProfile"
-          :key="i"
          cols="12"
          md="12"
-          lg="6"
+          lg="12"
        >
          <v-card
            elevation="7"
@@ -25,147 +23,21 @@
            rounded="xl"
          >
            <v-card-item>
-              <v-row align="left" style="min-height: 450px">
-                <v-col cols="12" md="5" class="text-center my-auto">
-                  <!-- {{ item.image }} -->
-                  <v-img
-                    v-if="item && item.image"
-                    :src="item.image"
-                    cover
-                    rounded="xl"
-                    class="mx-auto img-display"
-                  >
-                  </v-img
-                  ><v-avatar
-                    color="#635d56"
-                    size="180"
-                    class="mx-auto my-auto"
-                    v-else
-                  ></v-avatar>
-                </v-col>
-                <v-col cols="12" md="" class="mx-auto">
-                  <v-row>
-                    <v-col>
-                      <div class="box-group">
-                        <div>กลุ่มที่</div>
-                        <div
-                          class="font-weight-bold"
-                          style="font-size: xxx-large"
-                        >
-                          {{ item.group.id }}
-                        </div>
-                      </div>
-                    </v-col>
-                    <v-col>
-                      <div class="box-group">
-                        <div>หมายเลขผู้สมัคร</div>
-                        <div style="font-size: xxx-large">
-                          <div class="font-weight-bold" v-if="item.registerno">
-                            {{ item.registerno }}
-                          </div>
-                          <div class="font-weight-bold" v-else>2352</div>
-                        </div>
-                      </div></v-col
-                    >
-                  </v-row>
-                  <div
-                    class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4"
-                    v-if="item.zone"
-                  >
-                    <div class="font-weight-bold px-3">
-                      {{ item.zone.province.name }} |
-                      <span class="font-weight-medium">{{
-                        item.zone.name
-                      }}</span>
-                    </div>
-                  </div>
-                  <div class="font-weight-bold text-normal my-2 text-md-left">
-                    <div style="font-size: xx-large">
+              <div class=" text-left text-normal font-weight-bold" style="color:#e23972;">กลุ่มที่ {{ groupData.id  }}</div>
+              <div class="mb-4 text-left text-small font-weight-medium">{{ groupData.name  }}</div>
+              <div class="text-left px-md-10 px-5 px-lg-10">
+              <div v-for="(item, i) in dataProfile" :key="i" >
+                  <div class="font-weight-medium  my-2  text-normal">
+                    <div style="font-size:20px">
                      <span> {{ item.firstName }}</span>
                      <span class="ml-3">
                        {{ item.lastName }}
                      </span>
-                    </div>
-
-                    <div class="mx-auto text-md-left text-sub2 mb-2">
-                      {{ item.group.name }}
-                    </div>
-
-                    <div class="text-sub2 text-left mt-5 text-medium-emphasis">
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold"> อายุ :</span>
-
-                        {{ item.age }} ปี
-                      </div>
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold">อาชีพ :</span>
-                        {{ item.job }}
-                      </div>
-                      <div class="font-weight-medium">
-                        <span class="font-weight-bold">การศึกษา :</span>
-                        {{ item.education }}
-                      </div>
+                      <!-- <span style="color:#e23972;font-size: large"> ( กลุ่มที่ {{ item.group.id }} )</span> -->
                    </div>
                  </div>
-                </v-col>
-              </v-row>
-
-              <v-row> </v-row>
-              <div class="text-left text-small mt-3 d-none">
-                <div class="text-small font-weight-bold">ช่องทางติดต่อ</div>
-                <v-divider class="my-1"></v-divider>
-
-                <div class="mt-2 d-flex justify">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="0px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M41,4H9C6.24,4,4,6.24,4,9v32c0,2.76,2.24,5,5,5h32c2.76,0,5-2.24,5-5V9C46,6.24,43.76,4,41,4z M37,19h-2c-2.14,0-3,0.5-3,2 v3h5l-1,5h-4v15h-5V29h-4v-5h4v-3c0-4,2-7,6-7c2.9,0,4,1,4,1V19z"
-                    ></path></svg
-                  ><span v-if="item.facebook"> {{ item.facebook }}</span
-                  ><span v-else> - </span>
-                </div>
-                <div class="mt-2 d-flex justify">
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="-5px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M 11 4 C 7.134 4 4 7.134 4 11 L 4 39 C 4 42.866 7.134 46 11 46 L 39 46 C 42.866 46 46 42.866 46 39 L 46 11 C 46 7.134 42.866 4 39 4 L 11 4 z M 13.085938 13 L 21.023438 13 L 26.660156 21.009766 L 33.5 13 L 36 13 L 27.789062 22.613281 L 37.914062 37 L 29.978516 37 L 23.4375 27.707031 L 15.5 37 L 13 37 L 22.308594 26.103516 L 13.085938 13 z M 16.914062 15 L 31.021484 35 L 34.085938 35 L 19.978516 15 L 16.914062 15 z"
-                    ></path></svg
-                  ><span v-if="item.twitter"> {{ item.twitter }}</span
-                  ><span v-else> - </span>
-                </div>
-
-                <div class="mt-2 d-flex justify">
-                  <!-- <i class="far fa-tiktok"></i> -->
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    x="0px"
-                    y="0px"
-                    width="23"
-                    height="23"
-                    viewBox="0 0 50 50"
-                    class="mr-2"
-                  >
-                    <path
-                      d="M41,4H9C6.243,4,4,6.243,4,9v32c0,2.757,2.243,5,5,5h32c2.757,0,5-2.243,5-5V9C46,6.243,43.757,4,41,4z M37.006,22.323 c-0.227,0.021-0.457,0.035-0.69,0.035c-2.623,0-4.928-1.349-6.269-3.388c0,5.349,0,11.435,0,11.537c0,4.709-3.818,8.527-8.527,8.527 s-8.527-3.818-8.527-8.527s3.818-8.527,8.527-8.527c0.178,0,0.352,0.016,0.527,0.027v4.202c-0.175-0.021-0.347-0.053-0.527-0.053 c-2.404,0-4.352,1.948-4.352,4.352s1.948,4.352,4.352,4.352s4.527-1.894,4.527-4.298c0-0.095,0.042-19.594,0.042-19.594h4.016 c0.378,3.591,3.277,6.425,6.901,6.685V22.323z"
-                    ></path></svg
-                  ><span v-if="item.tiktok"> {{ item.tiktok }}</span
-                  ><span v-else> - </span>
-                </div>
              </div>
+            </div>
            </v-card-item>
          </v-card></v-col
        >
@@ -181,6 +53,9 @@ export default {
    dataProfile: {
      type: Array,
    },
+    groupData:{
+      type:Object
+    }
  },
  data() {
    return {
@@ -426,3 +301,10 @@ export default {
  }
 }
 </style>
+<style scoped>
+@media only screen and (min-width: 900px) and (max-width: 1290px) {
+  .t-md {
+    font-size: 18px;
+  }
+}
+</style>
--- a/src/components/search/CardUserGroup
+++ b/src/components/search/CardUserGroup
@@ -0,0 +1,464 @@
+<template>
+  <div class="pa-lg-8 pa-md-8 pa-sm-3 page-m-card" v-if="!check || cardCount">
+    <!-- {{ check }}{{ show }} -->
+    <!-- {{ result }} -->
+    <div
+      style="
+        background-color: #a8d18d;
+        box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
+          rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
+        border-radius: 20px;
+      "
+      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
+    >
+      <div class="text-subtitle text-left mb-md-3">
+        <v-row align="center">
+          <v-col cols="auto" class="pa-0 pl-2 pt-2">
+            <v-avatar color="#f5e010" class="text-normal" size="50"
+              >{{ group.id }}
+            </v-avatar></v-col
+          >
+          <v-col> {{ group.name }}</v-col>
+        </v-row>
+      </div>
+      <!-- {{ result }} -->
+      <!-- {{ chunkedResults }} -->
+      <v-container>
+        <v-carousel
+          v-model="model"
+          height="auto"
+          style="max-width: 900px"
+          class="mx-auto"
+        >
+          <v-carousel-item
+            v-for="(chunk, i) in chunkedResults"
+            :value="i"
+            :key="i"
+          >
+            <v-row class="page-search">
+              <v-col :key="i" cols="12" md="12" lg="12">
+                <div class="text-sub2 mx-auto card-user" maxWidth="1000">
+                  <v-overlay
+                    class="align-center justify-center"
+                    scrim="#2a2a2adb"
+                    contained
+                    v-model="overlay"
+                  >
+                    <div
+                      class=""
+                      style="
+                        padding: 20px;
+                        border-radius: 10px;
+                        color: white;
+                        font-size: 25px;
+                      "
+                    >
+                      ไม่พบข้อมูลผู้สมัคร
+                    </div>
+                  </v-overlay>
+                  <div
+                    style="
+                      background: white;
+                      border-radius: 10px;
+                      min-height: 180px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      flex-direction: column;
+                      text-align: center;
+                    "
+                    class="py-5"
+                  >
+                    <div v-for="(item, j) in chunk" :key="j" cols="12" md="4">
+                      <div class="font-weight-bold my-2">
+                        <div
+                          class="mx-auto txt-subtitle my-auto"
+                          style="margin: auto"
+                          v-if="item.firstName"
+                        >
+                          <span>{{ item.firstName }}</span>
+                          <span class="ml-3">{{ item.lastName }}</span>
+                        </div>
+                        <div v-else>-</div>
+                      </div>
+                    </div>
+                    <!-- <div class="font-weight-bold my-2 text-md-left">
+                      <div
+                        class="mt-3 mb-2"
+                        style="font-size: xx-large"
+                        v-if="item.firstName"
+                      >
+                        <span> {{ item.firstName }}</span>
+                        <span class="ml-3">
+                          {{ item.lastName }}
+                        </span>
+                      </div>
+                      <div v-else>-</div>
+                    </div> -->
+                  </div>
+                </div></v-col
+              >
+            </v-row>
+          </v-carousel-item>
+        </v-carousel>
+
+        <!-- <div class="text-subtitle my-10" v-else>ไม่พบผู้สมัคร</div> -->
+      </v-container>
+    </div>
+  </div>
+</template>
+<script>
+import { client } from "@/utils/trpc";
+export default {
+  props: {
+    check: {
+      type: Boolean,
+    },
+    dataProfile: {
+      type: Array,
+    },
+    group: {
+      type: Object,
+    },
+    province: {
+      type: Object,
+    },
+    district: {
+      type: Object,
+    },
+  },
+  computed: {
+    chunkedResults() {
+      const chunkSize = 3;
+      let chunks = [];
+      for (let i = 0; i < this.result.length; i += chunkSize) {
+        chunks.push(this.result.slice(i, i + chunkSize));
+      }
+      return chunks;
+    },
+  },
+  data() {
+    return {
+      overlay: false,
+      cardCount: 0,
+      allg: "",
+      checkdata: "",
+      show: false,
+      load: false,
+      result: [],
+      page: 1,
+      districtItems: [],
+      provinceItems: [],
+      items: [],
+      offset: 0,
+      count: 0,
+      model: 0,
+      colors: ["primary", "secondary", "yellow darken-2", "red", "orange"],
+    };
+  },
+  mounted() {
+    this.$emit("valueSent", true);
+    // this.load2 = true;
+    let data = {};
+    if (this.province) {
+      data.province = this.province;
+    }
+    // if (this.district) {
+    //   data.zone = this.district;
+    // }
+    if (this.group) {
+      data.group = this.group.id;
+    }
+    data.limit = 30;
+    if (data) {
+       client.user.getAllUser
+        .query(data)
+        .then((rs) => {
+          this.cardCount = rs.length;
+          if (rs.length) {
+            // rs.map((x)=>x.show=true)
+            this.show = true;
+            this.result = rs;
+          } else {
+            this.overlay = true;
+            this.show = false;
+            this.result = [
+              {
+                show: false,
+                id: 56,
+                firstName: "",
+                lastName: "",
+                title: "",
+                cid: "1767250304480",
+                age: " -",
+                job: " -",
+                education: " -",
+                vision: null,
+                reason: null,
+                group: {
+                  id: this.group.id,
+                  name: " -",
+                },
+                zone: {
+                  id: " -",
+                  name: this.district.name,
+                  province: {
+                    id: "",
+                    name: this.province.name,
+                  },
+                },
+              },
+            ];
+          }
+          console.log(rs);
+          this.load = false;
+          if (rs.length == 0) {
+            this.show = true;
+          }
+          this.$emit("valueSent", false);
+          // this.load2 = false;
+          // this.districtItems = rs;
+        })
+        .catch((error) => {
+          this.load = false;
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+
+      // let param = { input: JSON.stringify({ 0: data }) };
+      // var axios = require("axios");
+
+      // const config = {
+      //   method: "get",
+      //   url: "http://localhost:3000/api/user.getAllUser",
+      //   params: param,
+      //   headers: {},
+      // };
+
+      // axios(config)
+      //   .then((response) => {
+      //     const rs = response.data.result.data;
+      //     this.cardCount = rs.length;
+      //     if (rs.length) {
+      //       this.show = true;
+      //       this.result = rs;
+      //     } else {
+      //       this.overlay = true;
+      //       this.show = false;
+      //       this.result = [
+      //         {
+      //           show: false,
+      //           id: 56,
+      //           firstName: "",
+      //           lastName: "",
+      //           title: "",
+      //           cid: "1767250304480",
+      //           age: " -",
+      //           job: " -",
+      //           education: " -",
+      //           vision: null,
+      //           reason: null,
+      //           group: {
+      //             id: this.group.id,
+      //             name: " -",
+      //           },
+      //           zone: {
+      //             id: " -",
+      //             name: this.district.name,
+      //             province: {
+      //               id: "",
+      //               name: this.province.name,
+      //             },
+      //           },
+      //         },
+      //       ];
+      //     }
+      //     console.log(rs);
+      //     this.load = false;
+      //     if (rs.length == 0) {
+      //       this.show = true;
+      //     }
+      //     this.$emit("valueSent", false);
+      //   })
+      //   .catch((error) => {
+      //     this.load = false;
+      //     console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+      //   });
+    }
+  },
+};
+</script>
+<style>
+.v-overlay__scrim {
+  opacity: 0.7;
+}
+.overay-box {
+  position: absolute;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #f1f1f1;
+  width: 100%;
+  transition: 0.5s ease;
+  opacity: 0;
+  color: white;
+  font-size: 20px;
+  padding: 20px;
+  text-align: center;
+  z-index: 99999;
+}
+.text-medium-emphasis {
+  color: #3b3737c4;
+}
+div.v-window__container
+  > div.v-window__controls
+  > button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
+  background-color: #3d763d8c;
+  color: white;
+}
+.v-carousel__controls {
+  margin-top: 40px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  background-color: #3d763d8c;
+  height: 23px;
+}
+.img-display-g {
+  height: 450px;
+}
+.box-group {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  width: fit-content;
+  min-width: 100%;
+  padding: 10px 2px;
+  height: 100%;
+}
+.line-r-g {
+  padding-left: 5px;
+  border-color: #ffcd68;
+  border-right: 0.2px solid #ffcd68;
+}
+.line-g {
+  border: 1px solid #ffcd68;
+  display: inline-flex;
+}
+.card-user {
+  position: relative;
+  /* height: 500px; */
+}
+.more {
+  width: 95%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: auto;
+}
+.box-province {
+  border-radius: 5px;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
+  /* width: fit-content; */
+}
+
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  div.v-window__container
+    > div.v-window-item.v-window-item--active.v-carousel-item
+    > div
+    > div.v-responsive__content
+    > div
+    > div
+    > div {
+    padding: 0 !important;
+  }
+  div.v-col-md.v-col-12.mx-auto > div.font-weight-bold.my-2.text-md-left {
+    margin-top: 0px !important;
+    margin-bottom: 0px !important;
+  }
+  .v-carousel__controls {
+    height: 23px;
+  }
+  div.mx-auto.text-md-left.text-sub2.my-1 {
+    margin: 0 !important;
+  }
+  div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
+    margin-top: 0px !important;
+    line-height: 24px;
+  }
+  div.v-window__container
+    > div.v-window-item.v-window-item--active.v-carousel-item
+    > div
+    > div.v-responsive__content
+    > div
+    > div
+    > div
+    > div.v-card-item
+    > div
+    > div
+    > div.v-col-md.v-col-12.mx-auto
+    > div.font-weight-bold.my-2.text-md-left
+    > div.mt-3.mb-2 {
+    margin-top: 0px !important;
+    line-height: 38px;
+  }
+  div.v-card-item
+    > div
+    > div
+    > div.v-col-md.v-col-12.mx-auto
+    > div.v-row
+    > .v-col {
+    padding: 2px !important;
+  }
+  .box-group {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+    /* width: fit-content; */
+    /* min-width: 90%; */
+    padding: 5px 0px;
+    height: 85px;
+    line-height: 37px;
+  }
+  .page-m-card {
+    margin: 20px 7px;
+  }
+  .page-search {
+    padding: 20px 0px;
+  }
+
+  .card-user {
+    max-height: auto !important;
+    height: auto !important;
+  }
+  .line-g {
+    display: inline-flex;
+  }
+  .box-province {
+    border-radius: 5px;
+    background-color: #ffcd68;
+    border-radius: 10px;
+    width: -webkit-fill-available;
+  }
+  .img-display-g {
+    height: 300px !important;
+  }
+  div.py-2.text-sub2.box-province.mx-auto.mx-md-1.my-4.mobile-box2 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+}
+</style>
+<style scoped>
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .text-subtitle {
+    font-size: 19px;
+    font-weight: 600;
+  }
+  .v-container {
+    width: 100%;
+    padding: 0px;
+  }
+}
+</style>
--- a/src/components/search/CardUserGroup.vue
+++ b/src/components/search/CardUserGroup.vue
@@ -13,15 +13,16 @@
    >
      <div class="text-subtitle text-left mb-md-3">
        <v-row align="center">
-          <v-col cols="auto" class="pa-0 pl-2 pt-2"> <v-avatar color="#3d763d" class="text-normal" size="50"
-          >{{ group.id }}
-        </v-avatar></v-col>
-          <v-col  >    {{ group.name }}</v-col>
+          <v-col cols="auto" class="pa-0 pl-2 pt-2">
+            <v-avatar color="#f5e010" class="text-normal" size="50"
+              >{{ group.id }}
+            </v-avatar></v-col
+          >
+          <v-col> {{ group.name }}</v-col>
        </v-row>
-        
-     
      </div>
      <!-- {{ result }} -->
+      <!-- {{ chunkedResults }} -->
      <v-container>
        <v-carousel
          v-model="model"
@@ -29,14 +30,14 @@
          style="max-width: 900px"
          class="mx-auto"
        >
-          <v-carousel-item v-for="(item, i) in result" :value="i" :key="i">
+          <v-carousel-item
+            v-for="(chunk, i) in chunkedResults"
+            :value="i"
+            :key="i"
+          >
            <v-row class="page-search">
              <v-col :key="i" cols="12" md="12" lg="12">
-                <v-card
-                  class="text-sub2 mx-auto py-3 card-user"
-                  maxWidth="1000"
-                  rounded="xl"
-                >
+                <div class="text-sub2 mx-auto card-user" maxWidth="1000">
                  <v-overlay
                    class="align-center justify-center"
                    scrim="#2a2a2adb"
@@ -55,140 +56,48 @@
                      ไม่พบข้อมูลผู้สมัคร
                    </div>
                  </v-overlay>
-                  <v-card-item>
-                    <v-row
-                      align="left"
-                      style="min-height: 450px"
-                      class="mobile-col"
-                    >
-                      <v-col cols="12" md="5" class="text-cente my-auto">
-                        <!-- {{ item.image }} -->
-                        <v-img
-                          v-if="item && item.image"
-                          :src="item.image"
-                          cover
-                          rounded="xl"
-                          class="mx-auto img-display-g"
-                        >
-                        </v-img>
-                        <div v-else>
-                          <v-icon
-                            icon="mdi-account"
-                            size="180"
-                            color="#635d56"
-                            class="mx-auto my-auto"
-                          ></v-icon>
-                        </div>
-                      </v-col>
-                      <v-col cols="12" md="" class="mx-auto">
-                        <v-row>
-                          <v-col>
-                            <div class="box-group">
-                              <div>กลุ่มที่</div>
-                              <div
-                                class="font-weight-bold"
-                                style="font-size: xxx-large"
-                                v-if="item.group && item.group.id"
-                              >
-                                {{ item.group.id }}
-                              </div>
-                              <div v-else>-</div>
-                            </div>
-                          </v-col>
-                          <v-col>
-                            <div class="box-group">
-                              <div>หมายเลขผู้สมัคร</div>
-                              <div style="font-size: xxx-large">
-                                <div
-                                  class="font-weight-bold"
-                                  v-if="item.registerno"
-                                >
-                                  {{ item.registerno }}
-                                </div>
-                                <div class="font-weight-bold" v-else>-</div>
-                              </div>
-                            </div></v-col
-                          >
-                          <v-col cols="12" md="" class="d-none">
-                            <div class="box-group">
-                              <div
-                                v-if="item.zone.province"
-                                class="font-weight-bold px-3 my-auto"
-                              >
-                                {{ item.zone.province.name }}
-                                <hr />
-                                <span class="font-weight-medium">{{
-                                  item.zone.name
-                                }}</span>
-                              </div>
-                              <div v-else>-</div>
-                            </div>
-                          </v-col>
-                        </v-row>
+                  <div
+                    style="
+                      background: white;
+                      border-radius: 10px;
+                      min-height: 180px;
+                      display: flex;
+                      justify-content: center;
+                      align-items: center;
+                      flex-direction: column;
+                      text-align: center;
+                    "
+                    class="py-5"
+                  >
+                    <div v-for="(item, j) in chunk" :key="j" cols="12" md="4">
+                      <div class="font-weight-bold my-2">
                        <div
-                          class="py-2 text-sub2 box-province mx-auto mx-md-1 my-4 mobile-box2"
-                          v-if="item.zone.province"
+                          class="mx-auto txt-subtitle my-auto"
+                          style="margin: auto"
+                          v-if="item.firstName"
                        >
-                          <div class="font-weight-bold px-3">
-                            {{ item.zone.province.name }} |
-                            <span class="font-weight-medium">{{
-                              item.zone.name
-                            }}</span>
-                          </div>
+                          <span>{{ item.firstName }}</span>
+                          <span class="ml-3">{{ item.lastName }}</span>
                        </div>
                        <div v-else>-</div>
-                        <div class="font-weight-bold my-2 text-md-left">
-                          <div
-                            class="mt-3 mb-2"
-                            style="font-size: xx-large"
-                            v-if="item.firstName"
-                          >
-                            <span> {{ item.firstName }}</span>
-                            <span class="ml-3">
-                              {{ item.lastName }}
-                            </span>
-                          </div>
-                          <div v-else>-</div>
-                          <!-- <div
-                          v-if="item.group.name"
-                            class="mx-auto text-md-left text-sub2 my-1 more w-100 d-none"
-                          >
-                            {{ item.group.name }}
-                          </div>
-                          <div v-else > - </div> -->
-                          <div
-                            class="text-sub2 text-left mt-5 text-medium-emphasis"
-                          >
-                            <div class="font-weight-medium">
-                              <span class="font-weight-bold"> อายุ :</span>
-
-                              <span v-if="item.age">{{ item.age }}</span>
-                              <span v-else> - </span> ปี
-                            </div>
-
-                            <div
-                              class="font-weight-medium text-medium-emphasis"
-                            >
-                              <span class="font-weight-bold">อาชีพ :</span>
-                              <span v-if="item.job"> {{ item.job }}</span>
-                              <span v-else> - </span>
-                            </div>
-                            <div
-                              class="font-weight-medium text-medium-emphasis"
-                            >
-                              <span class="font-weight-bold">การศึกษา :</span>
-                              <span v-if="item.education">
-                                {{ item.education }}</span
-                              >
-                              <span v-else> - </span>
-                            </div>
-                            <br />
-                          </div>
-                        </div>
-                      </v-col>
-                    </v-row>
-                  </v-card-item> </v-card
-              ></v-col>
+                      </div>
+                    </div>
+                    <!-- <div class="font-weight-bold my-2 text-md-left">
+                      <div
+                        class="mt-3 mb-2"
+                        style="font-size: xx-large"
+                        v-if="item.firstName"
+                      >
+                        <span> {{ item.firstName }}</span>
+                        <span class="ml-3">
+                          {{ item.lastName }}
+                        </span>
+                      </div>
+                      <div v-else>-</div>
+                    </div> -->
+                  </div>
+                </div></v-col
+              >
            </v-row>
          </v-carousel-item>
        </v-carousel>
@@ -218,6 +127,16 @@ export default {
      type: Object,
    },
  },
+  computed: {
+    chunkedResults() {
+      const chunkSize = 10;
+      let chunks = [];
+      for (let i = 0; i < this.result.length; i += chunkSize) {
+        chunks.push(this.result.slice(i, i + chunkSize));
+      }
+      return chunks;
+    },
+  },
  data() {
    return {
      overlay: false,
@@ -238,18 +157,21 @@ export default {
    };
  },
  mounted() {
+    this.$emit("valueSent", true);
+    // this.load2 = true;
    let data = {};
-    if (this.province && this.province.id) {
-      data.province = this.province.id;
-    }
-    if (this.district) {
-      data.zone = this.district.id;
-    }
+    // if (this.province) {
+    //   data.province = this.province;
+    // }
+    // if (this.district) {
+    //   data.zone = this.district;
+    // }
    if (this.group) {
      data.group = this.group.id;
    }
+    data.limit = 100;
    if (data) {
-      client.user.getAllUser
+       client.user.getAllUser
        .query(data)
        .then((rs) => {
          this.cardCount = rs.length;
@@ -293,20 +215,85 @@ export default {
          if (rs.length == 0) {
            this.show = true;
          }
-
+          this.$emit("valueSent", false);
+          // this.load2 = false;
          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;
-
-          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
+
+      // let param = { input: JSON.stringify({ 0: data }) };
+      // var axios = require("axios");
+
+      // const config = {
+      //   method: "get",
+      //   url: "http://localhost:3000/api/user.getAllUser",
+      //   params: param,
+      //   headers: {},
+      // };
+
+      // axios(config)
+      //   .then((response) => {
+      //     const rs = response.data.result.data;
+      //     this.cardCount = rs.length;
+      //     if (rs.length) {
+      //       this.show = true;
+      //       this.result = rs;
+      //     } else {
+      //       this.overlay = true;
+      //       this.show = false;
+      //       this.result = [
+      //         {
+      //           show: false,
+      //           id: 56,
+      //           firstName: "",
+      //           lastName: "",
+      //           title: "",
+      //           cid: "1767250304480",
+      //           age: " -",
+      //           job: " -",
+      //           education: " -",
+      //           vision: null,
+      //           reason: null,
+      //           group: {
+      //             id: this.group.id,
+      //             name: " -",
+      //           },
+      //           zone: {
+      //             id: " -",
+      //             name: this.district.name,
+      //             province: {
+      //               id: "",
+      //               name: this.province.name,
+      //             },
+      //           },
+      //         },
+      //       ];
+      //     }
+      //     console.log(rs);
+      //     this.load = false;
+      //     if (rs.length == 0) {
+      //       this.show = true;
+      //     }
+      //     this.$emit("valueSent", false);
+      //   })
+      //   .catch((error) => {
+      //     this.load = false;
+      //     console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+      //   });
    }
  },
 };
 </script>
 <style>
+.v-carousel__controls__item.v-btn.v-btn--icon.v-btn--active {
+  background-color: #f5de1056;
+}
+.v-carousel__controls__item.v-btn.v-btn--icon.v-btn--active .mdi{
+   color: #ffb700; /* Colour for active one */
+}
 .v-overlay__scrim {
  opacity: 0.7;
 }
@@ -330,13 +317,15 @@ export default {
 div.v-window__container
  > div.v-window__controls
  > button.v-btn.v-btn--elevated.v-btn--icon.v-theme--light.v-btn--density-default.v-btn--size-default.v-btn--variant-elevated {
-  background-color: #00000078;
+  background-color: #3d763d8c;
  color: white;
 }
 .v-carousel__controls {
-  border-bottom-right-radius: 24px;
-  border-bottom-left-radius: 24px;
-  background-color: #00000078;
+  margin-top: 40px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  background-color: #3d763d8c;
+  height: 23px;
 }
 .img-display-g {
  height: 450px;
@@ -378,7 +367,12 @@ div.v-window__container
  width: -webkit-fill-available;
  /* width: fit-content; */
 }
+
@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .v-carousel__controls .v-btn--icon.v-btn--density-default {
+    width: 25px;
+    height:25px;
+}
  div.v-window__container
    > div.v-window-item.v-window-item--active.v-carousel-item
    > div
@@ -393,14 +387,14 @@ div.v-window__container
    margin-bottom: 0px !important;
  }
  .v-carousel__controls {
-    height: 35px;
+    height: 23px;
  }
  div.mx-auto.text-md-left.text-sub2.my-1 {
    margin: 0 !important;
  }
  div.font-weight-bold.my-2.text-md-left > div.text-sub2.text-left.mt-5 {
    margin-top: 0px !important;
-    line-height: 21px;
+    line-height: 24px;
  }
  div.v-window__container
    > div.v-window-item.v-window-item--active.v-carousel-item
@@ -432,7 +426,7 @@ div.v-window__container
    border-radius: 10px;
    width: -webkit-fill-available;
    /* width: fit-content; */
-    min-width: 100%;
+    /* min-width: 90%; */
    padding: 5px 0px;
    height: 85px;
    line-height: 37px;
--- a/src/components/search/SearchMain.vue
+++ b/src/components/search/SearchMain.vue
@@ -17,10 +17,9 @@
      </div>
      <v-container>
        <!-- {{ checkdata }} -->
-        <v-row>
+        <v-row class="d-none" v-if="fasle">
          <v-col cols="12" md="4">
            <v-text-field
-              v-if="province"
              label="จังหวัด"
              variant="solo"
              v-model="province"
@@ -44,7 +43,6 @@
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
-              v-if="province"
              label="อำเภอ / เขต"
              variant="solo"
              v-model="district"
@@ -67,7 +65,6 @@
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
-              v-if="province"
              label="กลุ่มอาชีพ"
              variant="solo"
              v-model="group"
@@ -94,6 +91,108 @@
            </v-autocomplete> -->
          </v-col>
        </v-row>
+        <v-row>
+          <v-col cols="12" md="4" class="d-none">
+            <!-- <v-text-field
+              label="จังหวัด"
+              variant="solo"
+              v-model="province"
+
+            ></v-text-field> -->
+
+            <v-autocomplete
+              clearable
+              label="จังหวัด"
+              :items="provinceItems"
+              variant="solo"
+              item-title="name"
+              item-value="id"
+              v-model="province"
+              placeholder="จังหวัด"
+              @update:modelValue="filterData"
+              hide-details
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="12" md="4" class="d-none">
+            <!-- <v-text-field
+              label="อำเภอ / เขต"
+              variant="solo"
+              v-model="district"
+          
+   
+            ></v-text-field> -->
+            <v-autocomplete
+              clearable
+              label="อำเภอ / เขต"
+              :items="districtItems"
+              variant="solo"
+              item-title="name"
+              v-model="district"
+              item-value="id"
+              placeholder="อำเภอ / เขต"
+              hide-details
+              :disabled="province == null"
+            ></v-autocomplete>
+          </v-col>
+          <v-col cols="12" md="6">
+            <!-- <v-text-field
+              label="กลุ่มอาชีพ"
+              variant="solo"
+              v-model="group"
+            ></v-text-field> -->
+
+            <v-autocomplete
+              v-model="group"
+              clearable
+              label="กลุ่มอาชีพ"
+              :items="items"
+              variant="solo"
+              :item-title="(item) => item.id + ' ' + item.name"
+              return-object
+              placeholder="กลุ่มอาชีพ"
+              hide-details
+              @update:modelValue="filterName"
+            >
+              <template v-slot:item="{ props, item }">
+                <v-list-item
+                  v-bind="props"
+                  :title="item.raw.id + ' ' + item.raw.name"
+                ></v-list-item>
+              </template>
+            </v-autocomplete>
+          </v-col>
+          <v-col cols="12" md="6">
+            <!-- <v-text-field
+              label="กลุ่มอาชีพ"
+              variant="solo"
+              v-model="group"
+            ></v-text-field> -->
+            <!-- {{ nameUser }} -->
+            <v-autocomplete
+              clearable
+              label="รายชื่อ"
+              :items="nameUserItems"
+              variant="solo"
+              :item-title="(item) => item.firstName + ' ' + item.lastName"
+              item-value="id"
+              placeholder="รายชื่อ"
+              :loading="loadname"
+              hide-details
+              v-model="nameUser"
+              :disabled="nameUserItems.length == 0 || group == null"
+            >
+              <!-- <template v-slot:selection="{ item }">
+                {{ item.firstName }} {{ item.lastName }}
+              </template> -->
+              <template v-slot:item="{ props, item }">
+                <v-list-item
+                  v-bind="props"
+                  :title="item.raw.firstName + ' ' + item.raw.lastName"
+                ></v-list-item>
+              </template>
+            </v-autocomplete>
+          </v-col>
+        </v-row>
        <v-btn
          color="#e23972"
          class="mt-8"
@@ -103,7 +202,8 @@
            searchUserApi(0, '');
            showGroup = false;
          "
-          :loading="load"
+          :disabled="group == null"
+          :loading="load || load2"
          width="300"
          height="52px"
        >
@@ -116,16 +216,19 @@
          elevated
          size="large"
          width="300"
-          @click="showGroup = true"
-          :loading="load"
+          @click="clickShowGroup"
+          :loading="load || load2"
          height="52px"
+          stack
+          :disabled=" group == null"
        >
-          <span class="text-sub">ค้นหาทุกกลุ่มอาชีพ</span>
+          <div class="text-sub">ค้นหาต่างกลุ่มอาชีพ</div>
+
+          <!-- <div class="txt-small">(ยกเว้นอาชีพตนเอง)</div> -->
        </v-btn>
      </v-container>
      <div v-if="!showGroup">
-        <CardUser :dataProfile="result" v-if="result.length" class="mt-2" />
-
+        <CardUser :dataProfile="result" :groupData="searchGroup" v-if="result.length" class="mt-2" />
        <div
          v-if="result.length == 0 && this.show"
          class="my-10 text-sub2 txt-black"
@@ -138,9 +241,9 @@
            elevation="3"
            v-if="count > 1"
            v-model="page"
-            :length="Math.ceil(count / 2)"
+            :length="Math.ceil(count / 10)"
            rounded="circle"
-            @update:model-value="searchUser((this.page - 1) * 2)"
+            @update:model-value="searchUser((this.page - 1) * 10)"
            next-icon="mdi-menu-right"
            prev-icon="mdi-menu-left"
          ></v-pagination>
@@ -148,26 +251,32 @@
      </div>
      <!-- <v-container class="my-0 py-0"> -->
      <div>
-        <!-- v-if="showGroup" -->
+        <v-progress-linear
+          v-if="showGroup && load2"
+          class="px-7 mt-5"
+          style="width: 90%"
+          color="green"
+          :indeterminate="load2"
+        ></v-progress-linear>
        <v-checkbox
-        v-if="showGroup"
+          v-if="showGroup"
          v-model="checkbox1"
          label="ดูเฉพาะกลุ่มอาชีพที่มีข้อมูล"
          size="large"
          class="px-7 mt-5 check-card text-subtitle"
          color="#3d763d"
          hide-details
-          
        ></v-checkbox>
      </div>
-    <!-- </v-container>  -->
-      <div v-for="(group, i) in apiGroup" :key="i">
+      <!-- </v-container>  -->
+
+      <div v-for="(groupx, i) in apiGroup" :key="groupxKey + '-' + i">
        <CardUserGroup
          :check="checkbox1"
-          :group="group"
+          :group="groupx"
          :province="province"
-          :district="district"
          v-if="showGroup"
+          @value-sent="handleValueSent"
        />
      </div>
    </div>
@@ -179,14 +288,23 @@
 import CardUser from "./CardUser.vue";
 import CardUserGroup from "./CardUserGroup.vue";
 import { client } from "@/utils/trpc";
+import { mapGetters } from "vuex";

 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
  components: {
    CardUser,
    CardUserGroup,
  },
  data() {
    return {
+      groupxKey: 0,
+      loadname: false,
+      nameUser: null,
+      nameUserItems: [],
+      load2: false,
      checkbox1: true,
      showGroup: false,
      apiGroup: [],
@@ -204,54 +322,102 @@ export default {
      group: null,
      offset: 0,
      count: 0,
+      searchGroup:null,
+      resultdata:[]
    };
  },
  methods: {
-    searchUser(offset) {
+    clickShowGroup() {
+      // this.showGroup = false;
+      this.groupxKey += 1;
+      this.showGroup = true;
+    },
+    filterName() {
+      // console.log("grop", this.group);
+      this.nameUser = null;
+      this.getUserItems(0);
+      let filteredGroup = [...this.items].filter((x) => x.id !== this.group.id);
+      this.apiGroup = filteredGroup;
+    },
+    handleValueSent(value) {
+      this.load2 = value;
+      console.log("Received value from child:", value);
+      // ทำงานกับค่าที่ได้รับ
+    },
+    getUserItems(offset) {
      this.show = false;
-      this.load = true;
+      this.loadname = true;
      if (offset == 0) {
        this.page = 1;
      }
      let data = {
        offset: offset,
-        limit: 2,
      };
-      if (this.province) {
-        data.province = this.province.id;
-        // data.province = this.province;
-      }
-      if (this.group) {
-        if (this.allg !== "all") {
-          data.group = this.group.id;
-        }
-      }
-      if (this.district) {
-        data.zone = this.district.id;
+    
+      if (this.group && this.group.id) {
+        data.group = this.group.id;
      }

-      // console.log(data);
      client.user.getAllUser
        .query(data)
        .then((rs) => {
-          this.result = rs;
+          this.nameUserItems = rs;
          console.log(rs);
-          this.load = false;
-          if (rs.length == 0) {
-            this.show = true;
-          }
-
-          // this.districtItems = rs;
+          this.loadname = false;
        })
        .catch((error) => {
-          this.load = false;
-
-          alert("ไม่สามารถโหลดข้อมูลได้");
+          this.loadname = false;
+          alert("ไม่สามารถโหลดข้อมูลรายชื่อได้ได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
-    searchUserApi(offset, checkg) {
+    searchUser() {
+      this.show = false;
+      // this.load = true;
+   // ตัวอย่างการดึงข้อมูลจาก API หรือแหล่งข้อมูลอื่น ๆ ตามหน้าปัจจุบันที่เลือก
+   const startIndex = (this.page - 1) * 10;
+      const endIndex = startIndex + 10;
+      // ในตัวอย่างนี้ จะใช้ items ของ this.items เป็นตัวอย่าง โดยใช้ฟังก์ชัน slice หรือการดึงข้อมูลจากแหล่งข้อมูล
+      if(this.count>0){
+     this.result = [...this.resultdata].slice(startIndex, endIndex);      }
+
+      // if (offset == 0) {
+      //   this.page = 1;
+      // }
+      // let data = {
+      //   offset: offset,
+      //   limit: 90,
+      // };
+   
+      // if (this.group) {
+      //   if (this.allg !== "all") {
+      //     data.group = this.group.id;
+      //   }
+      // }
+    
+      // if (this.nameUser) {
+      //   data.userId = this.nameUser;
+      // }
+
+      // client.user.getAllUser
+      //   .query(data)
+      //   .then((rs) => {
+      //     this.result = rs;
+      //     console.log(rs);
+      //     this.load = false;
+      //     if (rs.length == 0) {
+      //       this.show = true;
+      //     }
+      //   })
+      //   .catch((error) => {
+      //     this.load = false;
+      //     alert("ไม่สามารถโหลดข้อมูลได้");
+      //     console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+      //   });
+    },
+    searchUserApi(offset,checkg) {
      this.allg = checkg;
+      this.searchGroup = this.group
      this.show = false;
      this.load = true;
      if (offset == 0) {
@@ -259,52 +425,65 @@ export default {
      }
      // this.offset = (this.page - 1) * 10;
      let data = {
-        offset: offset,
-        limit: 2,
+        limit: 90,
      };
-      if (this.province) {
-        data.province = this.province.id;
-        // data.province = this.province;
-      }
+      // if (this.province) {
+      //   data.province = this.province;
+      //   // data.province = this.province;
+      // }

      if (this.group) {
        if (checkg !== "all") {
          data.group = this.group.id;
        }
      }
-      if (this.district) {
-        data.zone = this.district.id;
+      // if (this.district) {
+      //   data.zone = this.district;
+      // }
+
+      if (this.nameUser) {
+        data.userId = this.nameUser;
      }

-      // console.log(data);
-      client.user.getAllUserCount
-        .query(data)
-        .then((rs) => {
-          this.count = rs;
-        })
-        .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้");
-          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
-        });
+    

+
+        client.user.getAllUserCount
+          .query(data)
+          .then((rs) => {
+            this.count = rs;
+          })
+          .catch((error) => {
+            this.count=0
+            alert("ไม่สามารถโหลดข้อมูลได้");
+            console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+          });
+    
+      const startIndex = (this.page - 1) * 10;
+      const endIndex = startIndex + 10;
      client.user.getAllUser
        .query(data)
        .then((rs) => {
-          this.result = rs;
+          this.resultdata = rs;
          console.log(rs);
          this.load = false;
          if (rs.length == 0) {
            this.show = true;
+           
+          }else{
+            this.result = [...rs].slice(startIndex, endIndex);   
          }

-          // this.districtItems = rs;
        })
        .catch((error) => {
          this.load = false;
-
          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
+       
+      // ในตัวอย่างนี้ จะใช้ items ของ this.items เป็นตัวอย่าง โดยใช้ฟังก์ชัน slice หรือการดึงข้อมูลจากแหล่งข้อมูล
+      
+
    },
    filterData() {
      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
@@ -358,7 +537,9 @@ export default {
      .query({})
      .then((data) => {
        this.provinceItems = data;
-        this.getUser(data);
+        // if (this.getUsername) {
+        //   this.getUser(data);
+        // }
      })
      .catch((error) => {
        // alert("ไม่สามารถโหลดข้อมูลได้");
@@ -368,6 +549,13 @@ export default {
 };
 </script>
 <style>
+  .v-pagination__item--is-active 
+  .v-btn{
+    background-color: #f4c03f!important;
+  }
+.v-input__control {
+  background: white;
+}
 .check-card .v-selection-control {
  align-items: center !important;
  font-size: 25px;
--- a/src/config.js
+++ b/src/config.js
@@ -1,3 +1,5 @@
 export const CONFIG = {
  api_url: process.env.VUE_APP_API_URL || "http://localhost:3000",
+  // api_url: "https://info67.org/api/",
+  // api_url: "http://178.128.18.156:3000",
 };
--- a/src/main.js
+++ b/src/main.js
@@ -4,6 +4,10 @@ import store from "./store";
 import vuetify from "./plugins/vuetify";
 import { loadFonts } from "./plugins/webfontloader";
 import router from './router' 
+
+import VueSweetalert2 from 'vue-sweetalert2';
+import 'sweetalert2/dist/sweetalert2.min.css';
+
 loadFonts();

-createApp(App).use(store).use(vuetify).use(router).mount("#app");
+createApp(App).use(store).use(vuetify).use(VueSweetalert2).use(router).mount("#app");
--- a/src/views/RegisterForm.vue
+++ b/src/views/RegisterForm.vue
@@ -3,14 +3,14 @@
    <FormMain v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "/>
-      <div
+      <!-- <div
      v-if="
-        getUsername"
+        getUsername&&getCheckLogin"
      class="text-sub text-center py-10"
    >
      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
      ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
-    </div>
+    </div> -->
  </div>
 </template>
 <script>
--- a/src/views/SearchUser.vue
+++ b/src/views/SearchUser.vue
@@ -1,7 +1,7 @@
 <template>
  <div>
-    <FormMain v-if="getUsername" />
-    <div
+    <FormMain  />
+    <!-- <div
      v-if="
        getUsername == '' || getUsername == null || getUsername == undefined
      "
@@ -9,7 +9,7 @@
    >
      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
-    </div>
+    </div> -->
  </div>
 </template>
 <script>
Author	SHA1	Message	Date
Jarinya	d1c37c5037	fixed bug All checks were successful frontend-action / build-image (push) Successful in 2m28s Details	2024-06-24 18:26:50 +07:00
Jarinya	7c0628ef92	fixed bug Some checks failed frontend-action / build-image (push) Failing after 38s Details	2024-06-24 18:25:17 +07:00
Jarinya	b90647d0c1	fixed bug All checks were successful frontend-action / build-image (push) Successful in 2m4s Details	2024-06-24 18:16:19 +07:00
Jarinya	535aa73ad1	update pagination All checks were successful frontend-action / build-image (push) Successful in 2m34s Details	2024-06-24 18:03:10 +07:00
Jarinya	aa9ee8b67d	แก้ pagination Some checks failed frontend-action / build-image (push) Failing after 1m37s Details	2024-06-24 17:37:56 +07:00
Jarinya	283d208791	ปิดเงื่อนไขส่ง param All checks were successful frontend-action / build-image (push) Successful in 2m10s Details	2024-06-24 11:40:15 +07:00
Jarinya	b1ade3d39a	update ปรับสีปุ่ม All checks were successful frontend-action / build-image (push) Successful in 3m0s Details	2024-06-21 20:00:32 +07:00
Jarinya	3f3081c93a	ปรับ style All checks were successful frontend-action / build-image (push) Successful in 4m5s Details	2024-06-20 14:42:36 +07:00
Jarinya	04ca68adaf	update d-none province All checks were successful frontend-action / build-image (push) Successful in 12m6s Details	2024-06-20 14:04:53 +07:00
Jarinya	4fb3078d58	update d-none district All checks were successful frontend-action / build-image (push) Successful in 7m8s Details	2024-06-13 16:14:03 +07:00
Jarinya Jusing	401fb76f14	update filter group All checks were successful frontend-action / build-image (push) Successful in 3m47s Details	2024-06-07 13:12:30 +07:00
Jarinya Jusing	12461d2c7a	update search function All checks were successful frontend-action / build-image (push) Successful in 2m50s Details	2024-06-07 01:11:30 +07:00
Thanu Poptiphueng	eac75b5c03	increase timeout All checks were successful frontend-action / build-image (push) Successful in 15m10s Details	2024-05-20 20:40:49 +07:00
Jarinya	c9bb1e1fed	update rule registerno Some checks failed frontend-action / build-image (push) Failing after 11m7s Details	2024-05-20 19:38:28 +07:00
Thanu Poptiphueng	7530e8055d	fix key type All checks were successful frontend-action / build-image (push) Successful in 9m0s Details	2024-05-18 10:04:50 +07:00
Thanu Poptiphueng	8d987e86b0	added action to update server Some checks failed frontend-action / build-image (push) Failing after 54s Details	2024-05-18 09:54:27 +07:00
Jarinya Jusing	0eb8e42086	limit api search user + add loadding All checks were successful frontend-action / build-image (push) Successful in 45s Details	2024-05-18 01:13:03 +07:00
Thanu Poptiphueng	1477cfbd28	shamefully hoist for sweetalert All checks were successful frontend-action / build-image (push) Successful in 45s Details	2024-05-17 23:07:18 +07:00
Thanu Poptiphueng	3fc4110df0	update lockfile Some checks failed frontend-action / build-image (push) Failing after 31s Details	2024-05-17 22:58:52 +07:00
Jarinya	f03efc7278	คำผิด Some checks failed frontend-action / build-image (push) Failing after 10s Details	2024-05-17 20:18:38 +07:00
Jarinya	ba0ed54e12	ปรับ UI mobile Some checks failed frontend-action / build-image (push) Failing after 13s Details	2024-05-17 20:16:57 +07:00