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
26 changed files with 2758 additions and 461 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
@@ -10,11 +10,14 @@
      "dependencies": {
        "@mdi/font": "5.9.55",
        "@trpc/client": "^10.45.2",
+        "compressorjs": "^1.2.1",
        "filereader": "^0.10.3",
+        "pica": "^9.0.1",
        "roboto-fontface": "*",
        "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"
@@ -3306,6 +3309,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "dev": true
    },
+    "node_modules/blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "node_modules/body-parser": {
      "version": "1.20.2",
      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.2.tgz",
@@ -3918,6 +3926,15 @@
      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
      "dev": true
    },
+    "node_modules/compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "dependencies": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "node_modules/concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -6403,6 +6420,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA=="
+    },
    "node_modules/gopd": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -6893,6 +6915,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
    "node_modules/is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -10372,6 +10405,15 @@
        "multicast-dns": "cli.js"
      }
    },
+    "node_modules/multimath": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/multimath/-/multimath-2.0.0.tgz",
+      "integrity": "sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==",
+      "dependencies": {
+        "glur": "^1.1.2",
+        "object-assign": "^4.1.1"
+      }
+    },
    "node_modules/mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -10618,7 +10660,6 @@
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -11012,6 +11053,17 @@
        "node": ">=8"
      }
    },
+    "node_modules/pica": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/pica/-/pica-9.0.1.tgz",
+      "integrity": "sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==",
+      "dependencies": {
+        "glur": "^1.1.2",
+        "multimath": "^2.0.0",
+        "object-assign": "^4.1.1",
+        "webworkify": "^1.5.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -12944,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",
@@ -13766,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",
@@ -14286,6 +14357,11 @@
        "node": ">=0.8.0"
      }
    },
+    "node_modules/webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
+      "integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
+    },
    "node_modules/whatwg-encoding": {
      "version": "1.0.5",
      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
@@ -17275,6 +17351,11 @@
      "integrity": "sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==",
      "dev": true
    },
+    "blueimp-canvas-to-blob": {
+      "version": "3.29.0",
+      "resolved": "https://registry.npmjs.org/blueimp-canvas-to-blob/-/blueimp-canvas-to-blob-3.29.0.tgz",
+      "integrity": "sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg=="
+    },
    "body-parser": {
      "version": "1.20.2",
      "resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.2.tgz",
@@ -17781,6 +17862,15 @@
        }
      }
    },
+    "compressorjs": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/compressorjs/-/compressorjs-1.2.1.tgz",
+      "integrity": "sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==",
+      "requires": {
+        "blueimp-canvas-to-blob": "^3.29.0",
+        "is-blob": "^2.1.0"
+      }
+    },
    "concat-map": {
      "version": "0.0.1",
      "resolved": "https://registry.npmmirror.com/concat-map/-/concat-map-0.0.1.tgz",
@@ -19710,6 +19800,11 @@
        "slash": "^3.0.0"
      }
    },
+    "glur": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
+      "integrity": "sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA=="
+    },
    "gopd": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.0.1.tgz",
@@ -20098,6 +20193,11 @@
        "binary-extensions": "^2.0.0"
      }
    },
+    "is-blob": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-blob/-/is-blob-2.1.0.tgz",
+      "integrity": "sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw=="
+    },
    "is-buffer": {
      "version": "1.1.6",
      "resolved": "https://registry.npmmirror.com/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -22854,6 +22954,15 @@
        "thunky": "^1.0.2"
      }
    },
+    "multimath": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/multimath/-/multimath-2.0.0.tgz",
+      "integrity": "sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==",
+      "requires": {
+        "glur": "^1.1.2",
+        "object-assign": "^4.1.1"
+      }
+    },
    "mz": {
      "version": "2.7.0",
      "resolved": "https://registry.npmmirror.com/mz/-/mz-2.7.0.tgz",
@@ -23052,8 +23161,7 @@
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
    },
    "object-inspect": {
      "version": "1.13.1",
@@ -23369,6 +23477,17 @@
      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
      "dev": true
    },
+    "pica": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/pica/-/pica-9.0.1.tgz",
+      "integrity": "sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==",
+      "requires": {
+        "glur": "^1.1.2",
+        "multimath": "^2.0.0",
+        "object-assign": "^4.1.1",
+        "webworkify": "^1.5.0"
+      }
+    },
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",
@@ -24825,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",
@@ -25466,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",
@@ -25852,6 +25984,11 @@
      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
      "dev": true
    },
+    "webworkify": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/webworkify/-/webworkify-1.5.0.tgz",
+      "integrity": "sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g=="
+    },
    "whatwg-encoding": {
      "version": "1.0.5",
      "resolved": "https://registry.npmmirror.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz",
--- a/package.json
+++ b/package.json
@@ -11,11 +11,14 @@
  "dependencies": {
    "@mdi/font": "5.9.55",
    "@trpc/client": "^10.45.2",
+    "compressorjs": "^1.2.1",
    "filereader": "^0.10.3",
+    "pica": "^9.0.1",
    "roboto-fontface": "*",
    "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
@@ -11,9 +11,15 @@ dependencies:
  '@trpc/client':
    specifier: ^10.45.2
    version: 10.45.2(@trpc/server@10.45.2)
+  compressorjs:
+    specifier: ^1.2.1
+    version: 1.2.1
  filereader:
    specifier: ^0.10.3
    version: 0.10.3
+  pica:
+    specifier: ^9.0.1
+    version: 9.0.1
  roboto-fontface:
    specifier: '*'
    version: 0.10.0
@@ -26,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)
@@ -2062,6 +2071,10 @@ packages:
    resolution: {integrity: sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==}
    dev: true

+  /blueimp-canvas-to-blob@3.29.0:
+    resolution: {integrity: sha512-0pcSSGxC0QxT+yVkivxIqW0Y4VlO2XSDPofBAqoJ1qJxgH9eiUDLv50Rixij2cDuEfx4M6DpD9UGZpRhT5Q8qg==}
+    dev: false
+
  /body-parser@1.20.2:
    resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==}
    engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16}
@@ -2431,6 +2444,13 @@ packages:
      - supports-color
    dev: true

+  /compressorjs@1.2.1:
+    resolution: {integrity: sha512-+geIjeRnPhQ+LLvvA7wxBQE5ddeLU7pJ3FsKFWirDw6veY3s9iLxAQEw7lXGHnhCJvBujEQWuNnGzZcvCvdkLQ==}
+    dependencies:
+      blueimp-canvas-to-blob: 3.29.0
+      is-blob: 2.1.0
+    dev: false
+
  /concat-map@0.0.1:
    resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==}
    dev: true
@@ -3894,6 +3914,10 @@ packages:
      slash: 3.0.0
    dev: true

+  /glur@1.1.2:
+    resolution: {integrity: sha512-l+8esYHTKOx2G/Aao4lEQ0bnHWg4fWtJbVoZZT9Knxi01pB8C80BR85nONLFwkkQoFRCmXY+BUcGZN3yZ2QsRA==}
+    dev: false
+
  /gopd@1.0.1:
    resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
    dependencies:
@@ -4220,6 +4244,11 @@ packages:
      binary-extensions: 2.3.0
    dev: true

+  /is-blob@2.1.0:
+    resolution: {integrity: sha512-SZ/fTft5eUhQM6oF/ZaASFDEdbFVe89Imltn9uZr03wdKMcWNVYSMjQPFtg05QuNkt5l5c135ElvXEQG0rk4tw==}
+    engines: {node: '>=6'}
+    dev: false
+
  /is-buffer@1.1.6:
    resolution: {integrity: sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==}
    dev: true
@@ -5449,6 +5478,13 @@ packages:
      thunky: 1.1.0
    dev: true

+  /multimath@2.0.0:
+    resolution: {integrity: sha512-toRx66cAMJ+Ccz7pMIg38xSIrtnbozk0dchXezwQDMgQmbGpfxjtv68H+L00iFL8hxDaVjrmwAFSb3I6bg8Q2g==}
+    dependencies:
+      glur: 1.1.2
+      object-assign: 4.1.1
+    dev: false
+
  /mz@2.7.0:
    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
    dependencies:
@@ -5583,7 +5619,6 @@ packages:
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /object-inspect@1.13.1:
    resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
@@ -5785,6 +5820,15 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /pica@9.0.1:
+    resolution: {integrity: sha512-v0U4vY6Z3ztz9b4jBIhCD3WYoecGXCQeCsYep+sXRefViL+mVVoTL+wqzdPeE+GpBFsRUtQZb6dltvAt2UkMtQ==}
+    dependencies:
+      glur: 1.1.2
+      multimath: 2.0.0
+      object-assign: 4.1.1
+      webworkify: 1.5.0
+    dev: false
+
  /picocolors@0.2.1:
    resolution: {integrity: sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==}
    dev: true
@@ -7056,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
@@ -7527,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
@@ -7821,6 +7878,10 @@ packages:
    engines: {node: '>=0.8.0'}
    dev: true

+  /webworkify@1.5.0:
+    resolution: {integrity: sha512-AMcUeyXAhbACL8S2hqqdqOLqvJ8ylmIbNwUIqQujRSouf4+eUFaXbG6F1Rbu+srlJMmxQWsiU7mOJi0nMBfM1g==}
+    dev: false
+
  /whatwg-encoding@1.0.5:
    resolution: {integrity: sha512-b5lim54JOPN9HtzvK9HFXvBma/rnfFeqsic0hSpjtDbVxR3dJKLc+KB4V6GgiGOvl7CY/KNh8rxSo9DKQrnUEw==}
    dependencies:
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,12 +13,19 @@
        ></span>

        <!-- {{ getUsernameFromLocalStorage }} -->
-        <span
-          ><v-btn
+        <span>
+          <v-btn
            variant="text"
-            href="/"
-            class="mr-3"
-          >  <v-icon icon="mdi-home-variant-outline" size="30"></v-icon></v-btn
+        class="px-1"
+            to="/check"
+           
+          >
+            <v-icon icon="mdi-file-document-outline " size="25"></v-icon>
+            ตรวจสอบสิทธิ์
+          </v-btn>
+          <v-btn variant="text" href="/"   class="px-1" >
+            <v-icon icon="mdi-home-variant-outline" size="30"></v-icon>
+            หน้าหลัก</v-btn
          >
          <!-- <v-btn variant="text" v-if="getUsername" to="/profile">
            <v-icon icon="mdi-account-outline"></v-icon>{{ getUsername }}</v-btn
@@ -26,29 +33,31 @@
          <!-- <v-btn variant="text" v-if="getUsername" @click="logout" class="mr-2"
            ><v-icon icon="mdi-logout"></v-icon> Logout
          </v-btn> -->
+
          <v-btn
            variant="text"
-            class="mr-2"
+           
            v-if="
              getUsername == '' ||
              getUsername == null ||
              getUsername == undefined
            "
            to="/login"
-            style="font-size: medium;"
+         
          >
-            <v-icon icon="mdi-login"  size="25"></v-icon> เข้าสู่ระบบ
+            <v-icon icon="mdi-login" size="25"></v-icon> เข้าสู่ระบบ
          </v-btn>
+
          <v-menu transition="slide-x-transition" v-if="getUsername">
            <template v-slot:activator="{ props }">
-              <v-btn elevated color="#F4C03F" v-bind="props" height="40">
+              <v-btn elevated color="#F4C03F"    v-bind="props" height="40" class="mt-2 px-2" >
                <!-- {{ getImg }} -->

                <v-avatar
                  color="#635d56"
-                  v-if="getImg&&img"
+                  v-if="getImg"
                  :image="getImg"
-                  size="30"
+                  size="35"
                >
                </v-avatar
                ><v-avatar size="40" v-else>
@@ -58,7 +67,9 @@
                    size="30"
                  ></v-icon>
                </v-avatar>
-                <span class="ml-3" style="font-size: medium;">{{ getUsername }}</span>
+                <span class="ml-2" style="font-size: medium">{{
+                  getUsername
+                }}</span>
              </v-btn></template
            >
            <v-list>
@@ -129,7 +140,7 @@ export default {
    if (this.getUsername == "") {
      this.$store.commit("setUsername", this.username);
    }
-    if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
+    if (this.getImg == "" || this.getImg == null || this.getImg == undefined) {
      this.$store.commit("setImg", this.img);
    }
  },
--- a/src/assets/logo-title-2.png
+++ b/src/assets/logo-title-2.png
--- 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>
@@ -19,7 +24,7 @@
            </div>

            <div class="text-center pa-4">
-              <v-btn
+              <!-- <v-btn
                @click="dialog = true"
                elevated
                color="#B2C573"
@@ -30,7 +35,7 @@
                width="470"
              >
                <span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
-              </v-btn>
+              </v-btn> -->

              <v-dialog v-model="dialog" width="100%">
                <v-card width="100%">
@@ -46,23 +51,11 @@
                </v-card>
              </v-dialog>
            </div>
-
-            <!-- <v-btn
-              elevated
-              color="#B2C573"
-              class="mt-4 text-normal"
-              style="color: #0f470f"
-              size="large"
-              height="80"
-              @click="checkPage"
-            >
-              <span class="text-normal">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
-            </v-btn> -->
          </v-col>
        </v-row>
      </div>
    </div>
-    <div style="position: relative" class="bg-curve" id="started">
+    <div style="position: relative" class="bg-curve d-none" id="started">
      <v-row
        style="height: 100%; width: 90%"
        align="center"
@@ -100,7 +93,9 @@
              height="85"
              to="/check"
            >
-              <span class="text-normal" style="white-space: break-spaces;"> ตรวจสอบคุณสมบัติการเป็น สว.</span>
+              <span class="text-normal" style="white-space: break-spaces">
+                ตรวจสอบคุณสมบัติการเป็น สว.</span
+              >
              <v-img
                :aspect-ratio="1"
                src="../assets/Group 9.png"
@@ -194,10 +189,12 @@ export default {
  transform: translate(-50%, -50%);
 }
 .bg-curve {
+  position: relative;
+  top: -59px;
  background-size: cover;
-  padding-top: 50px;
+  padding-top: 70px;
  background-image: url("/src/assets/Path\ 14.png");
-  height: 580px;
+  height: 450px;
  background-position: center top;
  /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
@@ -209,9 +206,17 @@ 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: 530px;
-  
-}
+    height: 450px;
+    position: relative;
+  top: -79px;
+  }
 }
 </style>
--- a/src/components/MainVote.vue
+++ b/src/components/MainVote.vue
@@ -2,19 +2,21 @@
  <div class="bg-main">
    <Header />
    <Section2Green />
-    <Section3Base />
-    <Section4White/>
-    <Section5Green/>
-    <Section6Base/>
-    <Section7GreenTab/>
-    <Section8Base/>
-    <FooterPage/>
+    <!-- <Section3Base /> -->
+    <Section4White />
+    <Section5Green />
+    <Section6Base />
+    <Section7GreenTab />
+    <Section8Base />
+    <FooterPage />
  </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
+// import { client } from "@/utils/trpc";
 import Header from "./HeaderHome.vue";
 import Section2Green from "./Section2Green.vue";
-import Section3Base from "./Section3Base.vue";
+// import Section3Base from "./Section3Base.vue";
 import Section4White from "./Section4White.vue";
 import Section5Green from "./Section5Green.vue";
 import Section6Base from "./Section6Base.vue";
@@ -22,25 +24,50 @@ import Section7GreenTab from "./Section7GreenTab.vue";
 import Section8Base from "./Section8Base.vue";
 import FooterPage from "./FooterPage.vue";
 export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
  components: {
    Header,
    Section2Green,
-    Section3Base,
+    // Section3Base,
    Section4White,
    Section5Green,
    Section6Base,
    Section7GreenTab,
    Section8Base,
-    FooterPage
-
-
+    FooterPage,
+  },
+  mounted() {
+    // if(this.getUsername){
+    //   client.user.getSelf
+    //     .mutate({})
+    //     .then((data) => {
+    //       console.log('data.image',data.image);
+    //       this.$store.commit("setUsername", data.firstName);
+    //       this.$store.commit("setImg", data.image);
+    //       localStorage.setItem("img",data.image);
+    //       localStorage.setItem("username", data.firstName);
+    //     })
+    //     .catch((error) => {
+    //       // alert("ไม่สามารถโหลดข้อมูลได้");
+    //       console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+    //     });
+    //     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="bg-green-curve text-normal " >
+  <div style="position: relative" class="text-normal bg-curve my-auto">
    <div
-     style="width: 90%"
-      class="text-center text-white py-10 pb-20 mx-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"  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>
+        <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/Section4White.vue
+++ b/src/components/Section4White.vue
@@ -1,7 +1,11 @@
 <template>
  <div style="position: relative" class="text-normal pb-10">
-    <div class="text-center txt-black py-5 ma-auto" style="width: 90%">
-      <div class="text-title my-3">หน้าที่ของ สว.</div>
+    <div class="text-center txt-black pb-5 ma-auto" style="width: 90%">
+      <div class=" mb-3 text-normal "><b>หมวดข้อมูลทั่วไป</b> <div class="text-sub3"> (สำหรับอ่าน)</div> </div> 
+      <v-divider class="my-5 w-50 mx-auto mb-9" color="#4a4444"></v-divider>
+      <!-- <hr  style="color: black;"> -->
+      <div class="text-title mb-3 ">หน้าที่ของ สว. </div>
+    
      <v-row align="center" justify="center">
        <v-col
          class="border-dot"
--- a/src/components/edit/FormSteperEdit.vue
+++ b/src/components/edit/FormSteperEdit.vue
@@ -42,7 +42,6 @@
                      v-model="payload.firstName"
                      class="my-2"
                    ></v-text-field>
-
                    <v-text-field
                      label="นามสกุล / LastName"
                      variant="solo"
@@ -52,6 +51,9 @@
                    ></v-text-field>
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+                      <span class="text-red-accent-4 ml-2">
+                        * ชื่อผู้ใช้งาน (username)
+                      </span>
                    </div>
                    <v-text-field
                      label="เลขบัตรประชาชน / ID card number"
@@ -62,16 +64,35 @@
                      readonly
                      class="mb-2"
                    ></v-text-field>
-
+                    <div class="text-medium-emphasis" style="font-size: 15px">
+                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
+                      <span class="text-red-accent-4 ml-2">
+                        * รหัสผ่าน (password)
+                      </span>
+                    </div>
+                    <v-text-field
+                      label="เบอร์โทรศัพท์"
+                      variant="solo"
+                      :rules="rules.tel"
+                      v-model="payload.phone"
+                      type="number"
+                      hide-spin-buttons
+                      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"
+                      v-model="payload.registerno"
+                      type="number"
+                      hide-spin-buttons
+                      class="my-2"
+                    ></v-text-field>
                    <v-row>
                      <v-col class="py-3" cols="12" md="6">
-                        <!-- <v-text-field
-                            label="อายุ / Age"
-                            variant="solo"
-                            :rules="rules.required"
-                            counter-value="true"
-                          ></v-text-field> -->
-
                        <v-text-field
                          label="อายุ / Age"
                          variant="solo"
@@ -91,20 +112,21 @@
                      </v-col>
                    </v-row>

-                    <v-text-field
+                    <v-select
                      label="ประวัติการศึกษา / Education"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.education"
-                    ></v-text-field>
+                      :items="educateItem"
+                    ></v-select>

-                    <v-text-field
+                    <!-- <v-text-field
                      label="เบอร์โทรศัพท์"
                      variant="solo"
                      :rules="rules.tel"
                      v-model="payload.phone"
                      readonly
-                    ></v-text-field>
+                    ></v-text-field> -->
                  </v-col>

                  <v-col class="">
@@ -122,7 +144,12 @@
                        <v-img :src="url" v-if="url"></v-img>
                        <v-icon dark v-else size="80"> mdi-account </v-icon>
                      </v-avatar>
-
+                      <!-- :rules="rules.files" -->
+                      <v-progress-linear
+                        color="yellow-darken-2"
+                        :indeterminate="loadimg"
+                        class="mt-3"
+                      ></v-progress-linear>
                      <v-file-input
                        label="แนบรูปภาพ"
                        accept="image/png, image/jpeg, image/bmp"
@@ -130,8 +157,7 @@
                        prepend-inner-icon="mdi-camera"
                        prepend-icon=""
                        variant="solo-filled"
-                        class="mt-5"
-                        :rules="rules.files"
+                        class="mt-0"
                        @change="onFileChanged($event)"
                        v-model="image"
                      ></v-file-input>
@@ -145,7 +171,7 @@
                    variant="tonal"
                    class="float-right"
                    size="large"
-                    >ถัดไป</v-btn
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                  >
                </div>

@@ -179,8 +205,8 @@
                    <!-- {{payload.group}} -->
                    <v-radio-group v-model.number="payload.group.id">
                      <v-radio
-                        class="text-sub2"
-                        :label="item.name"
+                        class="text-sub2 my-2"
+                        :label="item.id + '). ' + item.name"
                        :value="item.id"
                        v-for="(item, i) in items"
                        :key="i"
@@ -188,7 +214,7 @@
                    </v-radio-group>
                  </v-col>
                  <v-col>
-                    <v-card>
+                    <div>
                      <div class="text-sub">
                        จังหวัดที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -216,10 +242,11 @@
                          v-model.number="payload.zone.province"
                          placeholder="จังหวัด"
                          @update:modelValue="filterData('')"
+                          bg-color="#f6ebd5"
                        ></v-autocomplete>
                      </div>
-                    </v-card>
-                    <v-card>
+                    </div>
+                    <div>
                      <div class="text-sub">
                        อำเภอที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -238,6 +265,7 @@
                        </div>
                        <!-- {{ payload.zone }} -->
                        <v-autocomplete
+                          bg-color="#f6ebd5"
                          label="อำเภอ / เขต"
                          :items="districtItems"
                          variant="solo"
@@ -248,7 +276,7 @@
                          :disabled="payload.zone.province == null"
                        ></v-autocomplete>
                      </div>
-                    </v-card>
+                    </div>
                  </v-col>
                </v-row>
                <div class="btn-next">
@@ -257,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> -->

@@ -271,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
@@ -377,8 +405,12 @@
                    ></v-textarea> -->

                    <div class="btn-next">
-                      <v-btn @click="e1--" variant="tonal" size="large" class="float-left"
-                        >ก่อนหน้า</v-btn
+                      <v-btn
+                        @click="e1--"
+                        variant="tonal"
+                        size="large"
+                        class="float-left"
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -388,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 }} -->
@@ -406,7 +438,7 @@
              <div>
                <div>ช่วงที่ 4</div>
                <div class="text-subtitle">
-                  ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
+                  ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
                  <hr class="my-3" />
                </div>
                <!-- <v-card class="mt-8 text-sub">
@@ -520,36 +552,34 @@
                      height="40"
                      @click="submit"
                      :disabled="!check"
+                      :loading="load"
                    >
                      <span class="text-sub">บันทึก</span>
                    </v-btn>
                  </div>
-                   <div class="btn-next">
-                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
-
-                        >ก่อนหน้า</v-btn
-                      >
-                    </div>
+                  <div class="btn-next">
+                    <v-btn
+                      @click="e1--"
+                      class="float-left"
+                      size="large"
+                      variant="tonal"
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
+                    >
+                  </div>
                </v-card>
              </div>
            </v-stepper-window-item>
          </v-stepper-window>
-
-          <!-- <v-stepper-actions
-            v-show="e1 == 4"
-            :disabled="disabled"
-            @click:next="next"
-            @click:prev="prev"
-          ></v-stepper-actions>-->
+          <!-- <LoadSave :dialog="load" /> -->
        </template>
-      </v-stepper> 
+      </v-stepper>
    </div>
  </v-container>
 </template>
 <script>
-// import Provinces from "./provinces.json";
-// import Districts from "./districts.json";
-
+// import LoadSave from "../form/LoadSave.vue";
+import pica from "pica";
+import Compressor from "compressorjs";
 import { client } from "@/utils/trpc";
 import { createFormData } from "@/utils/fileUpload";
 import validateThaiID from "thai-id-validator";
@@ -557,6 +587,7 @@ import { mapGetters } from "vuex";

 // client.info.getAllGroups.query({}).then(console.log);
 export default {
+  components: {},
  watch: {
    image(val) {
      console.log(val);
@@ -592,6 +623,18 @@ export default {

  data() {
    return {
+      loadimg: false,
+      educateItem: [
+        "ต่ำกว่าระดับประถม",
+        "ระดับประถม",
+        "ระดับมัธยมต้น",
+        "ระดับมัธยมปลาย",
+        "ระดับอาชีวศึกษา",
+        "ระดับปริญญาตรี",
+        "ระดับปริญญาโท",
+        "ระดับปริญญาเอก",
+      ],
+      load: false,
      check: false,
      form1: false,
      form2: false,
@@ -678,6 +721,7 @@ export default {
        group: null,
        zone: null,
        province: null,
+        registerno: null,
        // opinions: [
        //   {
        //     opinionId: "",
@@ -798,29 +842,128 @@ export default {
      }
    },
    onFileChanged(event) {
+      this.loadimg = true;
      const file = event.target.files[0];
      this.file = file;
-
      if (this.file && this.file !== null) {
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          console.log(event.target.result);
-          this.url = event.target.result;
-        };
-        reader.readAsDataURL(this.file);
-        console.log();
+        this.resizeAndCompressImage(this.file);
      } else {
        this.url = null;
      }
    },
+    resizeAndCompressImage(file) {
+      const picaInstance = pica();
+
+      const img = new Image();
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        img.src = e.target.result;
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const maxWidth = 1024;
+          const maxHeight = 1024;
+
+          let width = img.width;
+          let height = img.height;
+
+          if (width > height) {
+            if (width > maxWidth) {
+              height *= maxWidth / width;
+              width = maxWidth;
+            }
+          } else {
+            if (height > maxHeight) {
+              width *= maxHeight / height;
+              height = maxHeight;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+
+          picaInstance
+            .resize(img, canvas, {
+              quality: 3,
+              alpha: true,
+            })
+            .then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
+            .then((blob) => {
+              if (blob.size > 3 * 1024 * 1024) {
+                new Compressor(blob, {
+                  quality: 0.6,
+                  maxWidth: 1024,
+                  maxHeight: 1024,
+                  success: (compressedBlob) => {
+                    const compressedFile = new File(
+                      [compressedBlob],
+                      file.name,
+                      { type: file.type, lastModified: Date.now() }
+                    );
+                    this.file = compressedFile;
+                    this.createUrlFromBlob(compressedFile);
+                  },
+                  error: (err) => {
+                    console.error("Compression error:", err);
+                  },
+                });
+              } else {
+                const resizedFile = new File([blob], file.name, {
+                  type: file.type,
+                  lastModified: Date.now(),
+                });
+                this.file = resizedFile;
+                this.createUrlFromBlob(resizedFile);
+                this.loadimg = false;
+              }
+            })
+            .catch((err) => {
+              console.error("Resize error:", err);
+            });
+        };
+      };
+      reader.readAsDataURL(file);
+    },
+    createUrlFromBlob(blob) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.url = event.target.result;
+      };
+      reader.readAsDataURL(blob);
+    },
+    // onFileChanged(event) {
+    //   const file = event.target.files[0];
+    //   this.file = file;
+
+    //   if (this.file && this.file !== null) {
+    //     const reader = new FileReader();
+    //     reader.onload = (event) => {
+    //       console.log(event.target.result);
+    //       this.url = event.target.result;
+    //     };
+    //     reader.readAsDataURL(this.file);
+    //     console.log();
+    //   } else {
+    //     this.url = null;
+    //   }
+    // },
    getUserAfterEdit() {
      client.user.getSelf.mutate({}).then((data) => {
        localStorage.setItem("username", data.firstName);
        localStorage.setItem("img", data.image);
        this.$store.commit("setUsername", data.firstName);
        this.$store.commit("setImg", data.image);
-        alert("บันทึกข้อมูลสำเร็จ");
-        this.$router.push("/");
+        this.load = false;
+        this.$swal
+          .fire({
+            title: "บันทึกข้อมูลสำเร็จ",
+            icon: "success",
+            timer: 3000,
+            showConfirmButton: false,
+          })
+          .then(() => {
+            this.$router.push("/");
+          });
      });
    },

@@ -838,14 +981,24 @@ export default {
        method: "POST",
        body: formData,
      }).then(() => {
-        client.user.confirmChangeImage.mutate().then(() => {
-          this.getUserAfterEdit();
-        });
+        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("บันทึกข้อมูลสำเร็จ");
      });
      console.log("done");
    },
    submit() {
+      this.load = true;
      let dataOption = [...this.option1, ...this.option2];
      let checkOption = [...this.payload.opinions];

@@ -894,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);
        });
    },
@@ -908,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);
        });
    },
@@ -925,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);
        });
    },
@@ -1005,6 +1200,12 @@ export default {
 };
 </script>
 <style>
+.v-input--density-default .v-field__input {
+  font-size: larger;
+}
+.v-selection-control {
+  align-items: start !important;
+}
 /* [class$="--disabled"],
 [class*="--disabled "] * {
    color: #000 !important; 
@@ -1035,6 +1236,9 @@ export default {
  opacity: 1;
 }
@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .text-red-accent-4 {
+    display: block;
+  }
  .col2 {
    column-count: 1 !important;
  }
@@ -1053,5 +1257,10 @@ export default {
    font-size: 17px;
    opacity: 1;
  }
+  .v-stepper-item__avatar.v-avatar {
+    width: 33px !important;
+    height: 33px !important;
+    font-size: 25px;
+  }
 }
 </style>
--- a/src/components/form/FormSteper.vue
+++ b/src/components/form/FormSteper.vue
@@ -52,6 +52,9 @@
                    ></v-text-field>
                    <div class="text-medium-emphasis" style="font-size: 15px">
                      กรอกเลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+                      <span class="ml-2 text-red-accent-4">
+                        * ชื่อผู้ใช้งาน (username)
+                      </span>
                    </div>
                    <v-text-field
                      label="เลขบัตรประชาชน / ID card number"
@@ -63,7 +66,32 @@
                      hide-spin-buttons
                      class="mb-2"
                    ></v-text-field>
-
+                    <div class="text-medium-emphasis" style="font-size: 15px">
+                      กรอกโทรศัพท์ 10 หลัก เช่น 0812345678
+                      <span class="text-red-accent-4 ml-2">
+                        * รหัสผ่าน (password)
+                      </span>
+                    </div>
+                    <v-text-field
+                      label="เบอร์โทรศัพท์"
+                      variant="solo"
+                      :rules="rules.tel"
+                      v-model="payload.phone"
+                      type="number"
+                      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"         
+                      v-model="payload.registerno"
+                      type="number"
+                      hide-spin-buttons
+                      class="my-2"
+                    ></v-text-field>
                    <v-row>
                      <v-col class="py-3" cols="12" md="6">
                        <!-- <v-text-field
@@ -92,23 +120,14 @@
                      </v-col>
                    </v-row>

-                    <v-text-field
+                    <v-select
                      label="ประวัติการศึกษา / Education"
                      variant="solo"
                      :rules="rules.required"
                      v-model="payload.education"
                      class="my-2"
-                    ></v-text-field>
-
-                    <v-text-field
-                      label="เบอร์โทรศัพท์"
-                      variant="solo"
-                      :rules="rules.tel"
-                      v-model="payload.phone"
-                      type="number"
-                      hide-spin-buttons
-                      class="my-2"
-                    ></v-text-field>
+                      :items="educateItem"
+                    ></v-select>
                  </v-col>

                  <v-col class="">
@@ -126,7 +145,11 @@
                        <v-img :src="url" v-if="url"></v-img>
                        <v-icon dark v-else size="80"> mdi-account </v-icon>
                      </v-avatar>
-
+                      <v-progress-linear
+                        color="yellow-darken-2"
+                        :indeterminate="loadimg"
+                        class="mt-3"
+                      ></v-progress-linear>
                      <v-file-input
                        label="แนบรูปภาพ"
                        accept="image/png, image/jpeg, image/bmp"
@@ -135,7 +158,6 @@
                        prepend-icon=""
                        variant="solo-filled"
                        class="mt-5"
-                        :rules="rules.files"
                        @change="onFileChanged($event)"
                        v-model="image"
                      ></v-file-input>
@@ -149,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
@@ -182,8 +204,8 @@
                    <!-- {{payload.group}} -->
                    <v-radio-group v-model.number="payload.group">
                      <v-radio
-                        class="text-sub2"
-                        :label="item.name"
+                        class="text-sub2 my-2"
+                        :label="item.id + '). ' + item.name"
                        :value="item.id"
                        v-for="(item, i) in items"
                        :key="i"
@@ -191,7 +213,7 @@
                    </v-radio-group>
                  </v-col>
                  <v-col>
-                    <v-card>
+                    <div>
                      <div class="text-sub">
                        จังหวัดที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -210,6 +232,7 @@
                        </div>
                        <!-- {{ province }} -->
                        <v-autocomplete
+                          bg-color="#f6ebd5"
                          label="จังหวัด"
                          :items="provinceItems"
                          variant="solo"
@@ -220,8 +243,8 @@
                          @update:modelValue="filterData"
                        ></v-autocomplete>
                      </div>
-                    </v-card>
-                    <v-card>
+                    </div>
+                    <div>
                      <div class="text-sub">
                        อำเภอที่คุณประสงค์จะลงสมัคร*
                        <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -240,6 +263,7 @@
                        </div>
                        <!-- {{ payload.zone }} -->
                        <v-autocomplete
+                          bg-color="#f6ebd5"
                          label="อำเภอ / เขต"
                          :items="districtItems"
                          variant="solo"
@@ -250,12 +274,16 @@
                          :disabled="payload.province == null"
                        ></v-autocomplete>
                      </div>
-                    </v-card>
+                    </div>
                  </v-col>
                </v-row>
                <div class="btn-next">
-                  <v-btn @click="e1--"  variant="tonal" class="float-left"
-                  size="large"   >ก่อนหน้า</v-btn
+                  <v-btn
+                    @click="e1--"
+                    variant="tonal"
+                    class="float-left"
+                    size="large"
+                    > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                  >

                  <v-btn
@@ -268,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
@@ -355,9 +383,12 @@
                    ></v-textarea> -->

                    <div class="btn-next">
-                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
-
-                        >ก่อนหน้า</v-btn
+                      <v-btn
+                        @click="e1--"
+                        class="float-left"
+                        size="large"
+                        variant="tonal"
+                        > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
                      >
                      <!-- <v-spacer></v-spacer> -->

@@ -367,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 }} -->
@@ -401,7 +432,7 @@
                </v-card> -->
                <v-card class="mt-8 text-sub">
                  <div class="text-subtitle">
-                    ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
+                    ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
                    <hr class="my-3" />
                  </div>
                  <v-row>
@@ -493,24 +524,28 @@
                    ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
                    *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.67
                  </div>
-                  <div class="text-center mb-5">
+                  <div class="text-center mb-5 mt-2">
                    <v-btn
                      color="#DD6C31"
                      class="mt-4"
                      height="40"
                      @click="submit"
                      :disabled="!check"
+                      :loading="load"
                    >
                      <span class="text-sub">บันทึก</span>
                    </v-btn>
                  </div>

                  <div class="btn-next">
-                      <v-btn @click="e1--"  class="float-left" size="large" variant="tonal"
-
-                        >ก่อนหน้า</v-btn
-                      >
-                    </div>
+                    <v-btn
+                      @click="e1--"
+                      class="float-left"
+                      size="large"
+                      variant="tonal"
+                      > <v-icon size="28">mdi-chevron-left</v-icon> ก่อนหน้า</v-btn
+                    >
+                  </div>
                </v-card>
              </div>
            </v-stepper-window-item>
@@ -535,6 +570,8 @@ import { client } from "@/utils/trpc";
 import { createFormData } from "@/utils/fileUpload";
 import validateThaiID from "thai-id-validator";
 // client.info.getAllGroups.query({}).then(console.log);
+import pica from "pica";
+import Compressor from "compressorjs";
 export default {
  watch: {
    image(val) {
@@ -570,6 +607,18 @@ export default {

  data() {
    return {
+      loadimg: false,
+      educateItem: [
+        "ต่ำกว่าระดับประถม",
+        "ระดับประถม",
+        "ระดับมัธยมต้น",
+        "ระดับมัธยมปลาย",
+        "ระดับอาชีวศึกษา",
+        "ระดับปริญญาตรี",
+        "ระดับปริญญาโท",
+        "ระดับปริญญาเอก",
+      ],
+      load: false,
      check: false,
      form1: false,
      form2: false,
@@ -656,6 +705,7 @@ export default {
        group: null,
        zone: null,
        province: null,
+        registerno: null,
        // opinions: [
        //   {
        //     opinionId: "",
@@ -738,21 +788,95 @@ export default {
  },
  methods: {
    onFileChanged(event) {
+      this.loadimg = true;
      const file = event.target.files[0];
      this.file = file;
      if (this.file && this.file !== null) {
-        const reader = new FileReader();
-        reader.onload = (event) => {
-          console.log(event.target.result);
-          this.url = event.target.result;
-        };
-        reader.readAsDataURL(this.file);
-        console.log();
+        this.resizeAndCompressImage(this.file);
      } else {
        this.url = null;
      }
    },
+    resizeAndCompressImage(file) {
+      const picaInstance = pica();

+      const img = new Image();
+      const reader = new FileReader();
+
+      reader.onload = (e) => {
+        img.src = e.target.result;
+        img.onload = () => {
+          const canvas = document.createElement("canvas");
+          const maxWidth = 1024;
+          const maxHeight = 1024;
+
+          let width = img.width;
+          let height = img.height;
+
+          if (width > height) {
+            if (width > maxWidth) {
+              height *= maxWidth / width;
+              width = maxWidth;
+            }
+          } else {
+            if (height > maxHeight) {
+              width *= maxHeight / height;
+              height = maxHeight;
+            }
+          }
+
+          canvas.width = width;
+          canvas.height = height;
+
+          picaInstance
+            .resize(img, canvas, {
+              quality: 3,
+              alpha: true,
+            })
+            .then((result) => picaInstance.toBlob(result, "image/jpeg", 0.8))
+            .then((blob) => {
+              if (blob.size > 3 * 1024 * 1024) {
+                new Compressor(blob, {
+                  quality: 0.6,
+                  maxWidth: 1024,
+                  maxHeight: 1024,
+                  success: (compressedBlob) => {
+                    const compressedFile = new File(
+                      [compressedBlob],
+                      file.name,
+                      { type: file.type, lastModified: Date.now() }
+                    );
+                    this.file = compressedFile;
+                    this.createUrlFromBlob(compressedFile);
+                  },
+                  error: (err) => {
+                    console.error("Compression error:", err);
+                  },
+                });
+              } else {
+                const resizedFile = new File([blob], file.name, {
+                  type: file.type,
+                  lastModified: Date.now(),
+                });
+                this.file = resizedFile;
+                this.createUrlFromBlob(resizedFile);
+                this.loadimg = false;
+              }
+            })
+            .catch((err) => {
+              console.error("Resize error:", err);
+            });
+        };
+      };
+      reader.readAsDataURL(file);
+    },
+    createUrlFromBlob(blob) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        this.url = event.target.result;
+      };
+      reader.readAsDataURL(blob);
+    },
    async uploadImage() {
      if (!this.file) {
        return;
@@ -765,15 +889,24 @@ export default {
      await fetch(request.postURL, {
        method: "POST",
        body: formData,
-      }).then(() => {
-        client.user.confirmChangeImage.mutate();
-        alert(
-          "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
-        );
-      });
+      })
+        .then(() => {
+          client.user.confirmChangeImage.mutate().then(() => {
+            this.getUser();
+            // alert(
+            //   "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+            // );
+          });
+        })
+        .catch((error) => {
+          console.log("error.message", error.message);
+          this.getUser();
+          // alert("ไม่สามารถบันทึกข้อมูลจุดยืนได้: " + error.message);
+        });
      console.log("done");
    },
    submit() {
+      this.load = true;
      let dataOption = [...this.option1, ...this.option2];
      const filterOpt = dataOption.map((item) => {
        return {
@@ -824,14 +957,26 @@ export default {
          if (this.file) {
            this.uploadImage();
          } else {
-            alert(
-              "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
-            );
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
+            this.getUser();
          }
-          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);
        });
    },
@@ -839,13 +984,36 @@ export default {
      client.user.login
        .mutate(payload)
        .then((data) => {
-          // console.log("data", data);
-
+          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);
        });
    },
@@ -858,6 +1026,11 @@ export default {
          localStorage.setItem("img", data.image);
          this.$store.commit("setUsername", data.firstName);
          this.$store.commit("setImg", data.image);
+
+          // alert(
+          //   "บันทึกข้อมูลสำเร็จ\n สามารถ login ด้วย username : เลขบัตรประชาชน / password : เบอร์โทรศัพท์"
+          // );
+
          this.login({ cid: data.cid, phone: data.phone });
        })
        .catch((error) => {
@@ -935,6 +1108,12 @@ export default {
 };
 </script>
 <style>
+div.text-sub
+  > div.v-input.v-input--horizontal.v-input--center-affix.v-input--density-default.v-locale--is-ltr.v-input--dirty.v-text-field.v-autocomplete.v-autocomplete--single,
+.v-autocomplete .v-autocomplete__selection-text {
+  font-size: large !important;
+  font-weight: 600 !important;
+}
 .btn-next {
  padding: 1.5rem 0 0;
 }
--- a/src/components/form/LoadSave.vue
+++ b/src/components/form/LoadSave.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="pa-4 text-center">
+    <v-dialog v-model="props" max-width="320" persistent>
+      <v-card max-width="600">
+        <div class="px-10 py-10 text-center">
+          <v-progress-circular
+            color="primary"
+            indeterminate="disable-shrink"
+            size="50"
+            width="6"
+          ></v-progress-circular>
+          <div class="text-subtitle mt-5">กำลังบันทึกข้อมูล...</div>
+        </div>
+      </v-card>
+    </v-dialog>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    dialog: { type: Boolean },
+  },
+  data() {
+    return {
+      // dialog: true,
+    };
+  },
+
+  watch: {
+    // dialog(val) {
+    //   if (!val) return;
+    //   setTimeout(() => (this.dialog = false), 4000);
+    // },
+  },
+};
+</script>
--- 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
@@ -2,7 +2,7 @@
  <div class="pa-lg-8 pa-md-8 pa-sm-3">
    <div
      style="
-        background-color: #4c884c;
+        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;
@@ -10,156 +10,34 @@
      class="pa-lg-10 pa-md-10 pa-sm-4 pa-2"
    >
      <!-- {{ dataProfile }} -->
-      <v-row >
+      <v-row class="page-search">
        <v-col
-          v-for="(item, i) in dataProfile"
-          :key="i"
          cols="12"
-          md="6"
-          lg="6"
+          md="12"
+          lg="12"
        >
-          <v-card elevation="5" class="text-sub2 mx-auto pb-5 card-user">
-            <div
-              style="background: #37332f; color: white; width: 100%"
-              class="font-weight-bold pa-2 w-100 text-center"
-            >
-              <div class="more" v-if="item.group">{{ item.group.name }}</div>
-            </div>
+          <v-card
+            elevation="7"
+            class="text-sub2 mx-auto py-3 card-user"
+            maxWidth="900"
+            rounded="xl"
+          >
            <v-card-item>
-              <v-row align="left">
-                <!-- <div class="box-province px-3 py-2">
-                  <div class="font-weight-bold">
-                    {{ item.province }} เขต{{ item.district }}
-                  </div>
-                </div> -->
-
-                <v-col cols="12" md="auto" class="text-center">
-                  <!-- {{ item.image }} -->
-
-                  <v-avatar
-                    color="#635d56"
-                    size="100"
-                    v-if="item.image"
-                    :image="item.image"
-                  >
-                  </v-avatar
-                  ><v-avatar color="#635d56" size="100" v-else>
-                    <v-icon icon="mdi-account" color="" size="80"></v-icon>
-                  </v-avatar>
-                </v-col>
-                <v-col cols="12" md="" class="text-center">
-                  <div class="font-weight-bold text-normal my-2 text-center">
-                    {{ item.firstName }}
-                    <span class="ml-3">
-                      {{ item.lastName }}
-                      <span v-if="item.age" class="text-sub2">
-                        ( {{ item.age }}ปี )</span
-                      ></span
-                    >
-                    <div
-                      class="box-province px-3 py-2 text-sub2"
-                      v-if="item.zone"
-                    >
-                      <div class="font-weight-bold">
-                        {{ item.zone.province.name }} |
-                        <span class="font-weight-medium">{{
-                          item.zone.name
-                        }}</span>
-                      </div>
-                    </div>
-                    <!-- <div class="text-sub3">{{ item.group }}</div> -->
-                  </div>
-                </v-col>
-              </v-row>
-
-              <v-row>
-                <v-col cols="12">
-                  <div class="text-small text-left">
-                    <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 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>
+                      <!-- <span style="color:#e23972;font-size: large"> ( กลุ่มที่ {{ item.group.id }} )</span> -->
                    </div>
                  </div>
-                </v-col>
-              </v-row>
-              <div class="text-left text-small my-3">
-                <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 class="text-small font-weight-bold text-left d-none">
-                จุดยืน
-                <v-divider class="my-1"></v-divider>
-                <v-row class="text-small" style="height: 150px; overflow: auto">
-                  <v-col class="text-left">
-                    <div class="font-weight-bold">เห็นด้วย :</div>
-                    <div v-for="(ag, k) in item.opinion.agree" :key="k">
-                      {{ ag }}
-                    </div>
-                  </v-col>
-                  <v-col class="text-left">
-                    <div class="font-weight-bold">ไม่เห็นด้วย :</div>
-                    <div v-for="(ag, k) in item.opinion.disagree" :key="k">
-                      {{ ag }}
-                    </div>
-                  </v-col>
-                </v-row>
-              </div> -->
+            </div>
            </v-card-item>
          </v-card></v-col
        >
@@ -175,6 +53,9 @@ export default {
    dataProfile: {
      type: Array,
    },
+    groupData:{
+      type:Object
+    }
  },
  data() {
    return {
@@ -351,39 +232,79 @@ export default {
 };
 </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: 92%;
+  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: auto;
 }
 .box-province {
-  background-color: #f4c03f;
  border-radius: 5px;
-  margin: auto;
+  background-color: #ffcd68;
+  border-radius: 10px;
+  width: -webkit-fill-available;
  width: fit-content;
-  box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
+}
+@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;
  }
-  /* .box-province {
-    position: unset;
-    display: block;
-    width: 100%;
-    top: 0;
-    right: 0;
-    background-color: #f4c03f;
+  .line-g {
+    display: inline-flex;
+  }
+  .box-province {
    border-radius: 5px;
-    margin: 5px;
-    box-shadow: rgba(0, 0, 0, 0.24) 3px 0px 8px;
-  } */
+    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/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
@@ -0,0 +1,474 @@
+<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 = 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,
+      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 = 100;
+    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-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;
+}
+.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) {
+  .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
+    > 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/SearchMain.vue
+++ b/src/components/search/SearchMain.vue
@@ -8,16 +8,18 @@
        width="250"
      ></v-img>
      <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
-      <div class="my-5 text-sub2">
-        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด/เขต
+      <div class="my-5 text-sub2 px-5">
+        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด / อำเภอ
        ที่ตัวเองเป็นผู้แสดงตน
      </div>
+      <div class="text-small text-red-darken-3">
+        * การแสดงผลเป็นแบบสุ่มไม่เรียงลำดับ
+      </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"
@@ -41,7 +43,6 @@
          </v-col>
          <v-col cols="12" md="4">
            <v-text-field
-              v-if="province"
              label="อำเภอ / เขต"
              variant="solo"
              v-model="district"
@@ -63,57 +64,220 @@
          > -->
          </v-col>
          <v-col cols="12" md="4">
-            <v-autocomplete
+            <v-text-field
+              label="กลุ่มอาชีพ"
+              variant="solo"
+              v-model="group"
+              :value="group.id + ' ' + group.name"
+              readonly
+            ></v-text-field>
+            <!-- <v-autocomplete
              clearable
              label="กลุ่มอาชีพ"
              :items="items"
              variant="solo"
              item-title="name"
-              item-value="id"
+              return-object
              placeholder="กลุ่มอาชีพ"
              hide-details
              v-model="group"
+            >
+              <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-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="3">
-            <v-text-field
-              label="ชื่อ"
+          <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
-            ></v-text-field>
-          </v-col> -->
+              :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="#DD6C31"
+          color="#e23972"
          class="mt-8"
          elevated
          size="large"
-          @click="searchUserApi(0)"
-          :loading="load"
+          @click="
+            searchUserApi(0, '');
+            showGroup = false;
+          "
+          :disabled="group == null"
+          :loading="load || load2"
+          width="300"
+          height="52px"
        >
-          <span class="text-sub">ค้นหา</span>
+          <span class="text-sub">ค้นหากลุ่มอาชีพตนเอง</span>
+        </v-btn>
+        <!-- @click="searchUserApi(0, 'all')" -->
+        <v-btn
+          color="#4c884c"
+          class="mx-5 mt-8"
+          elevated
+          size="large"
+          width="300"
+          @click="clickShowGroup"
+          :loading="load || load2"
+          height="52px"
+          stack
+          :disabled=" group == null"
+        >
+          <div class="text-sub">ค้นหาต่างกลุ่มอาชีพ</div>
+
+          <!-- <div class="txt-small">(ยกเว้นอาชีพตนเอง)</div> -->
        </v-btn>
      </v-container>
-      <!-- {{result}} -->
-      <CardUser :dataProfile="result" v-if="result.length" />
-      <!-- {{ show }} -->
-      <div
-        v-if="result.length == 0 && this.show"
-        class="my-10 text-sub2 txt-black"
-      >
-        <v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
-      </div>
-      <!-- {{ count }}
-      {{ Number(result.length)/ 2 }} -->
+      <div v-if="!showGroup">
+        <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"
+        >
+          <v-icon icon="mdi-alert-circle"></v-icon> ไม่พบข้อมูล
+        </div>

-      <div class="text-center">
-        <v-pagination
-          v-if="count > 0"
-          v-model="page"
-          :length="Math.ceil(count / 10)"
-          rounded="circle"
-          @click="searchUser((this.page - 1) * 2)"
-        ></v-pagination>
+        <div class="text-center mt-2">
+          <v-pagination
+            elevation="3"
+            v-if="count > 1"
+            v-model="page"
+            :length="Math.ceil(count / 10)"
+            rounded="circle"
+            @update:model-value="searchUser((this.page - 1) * 10)"
+            next-icon="mdi-menu-right"
+            prev-icon="mdi-menu-left"
+          ></v-pagination>
+        </div>
+      </div>
+      <!-- <v-container class="my-0 py-0"> -->
+      <div>
+        <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-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="(groupx, i) in apiGroup" :key="groupxKey + '-' + i">
+        <CardUserGroup
+          :check="checkbox1"
+          :group="groupx"
+          :province="province"
+          v-if="showGroup"
+          @value-sent="handleValueSent"
+        />
      </div>
    </div>
  </div>
@@ -122,14 +286,29 @@
 // import Provinces from "@/components/form/provinces.json";
 // import Districts from "@/components/form/districts.json";
 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: [],
+      allg: "",
      checkdata: "",
      show: false,
      load: false,
@@ -143,51 +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: 10,
      };
-      if (this.province) {
-        data.province = this.province.id;
-        // data.province = this.province;
-      }
-      if (this.group) {
-        data.group = this.group;
-      }
-      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) {
+    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) {
@@ -195,49 +425,65 @@ export default {
      }
      // this.offset = (this.page - 1) * 10;
      let data = {
-        offset: offset,
-        limit: 10,
+        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) {
-        data.group = 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("ไม่สามารถโหลดข้อมูลได้");
+          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
+       
+      // ในตัวอย่างนี้ จะใช้ items ของ this.items เป็นตัวอย่าง โดยใช้ฟังก์ชัน slice หรือการดึงข้อมูลจากแหล่งข้อมูล
+      
+
    },
    filterData() {
      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
@@ -249,7 +495,7 @@ export default {
            this.districtItems = data;
          })
          .catch((error) => {
-            alert("ไม่สามารถโหลดข้อมูลได้");
+            // alert("ไม่สามารถโหลดข้อมูลได้");
            console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
          });
      }
@@ -259,12 +505,19 @@ export default {
        .mutate({})
        .then((data) => {
          let province = datap.filter((x) => x.id === data.zone.province);
+          // let g =[...this.items].filter((x) => x.id === data.group);
          this.province = province[0];
          this.district = data.zone;
          this.checkdata = { ...data };
+          this.group = data.group;
+          let filteredGroup = [...this.items].filter(
+            (x) => x.id !== data.group.id
+          );
+          this.apiGroup = filteredGroup;
+          console.log("filteredGroup", filteredGroup);
        })
        .catch((error) => {
-          alert("ไม่สามารถโหลดข้อมูลได้");
+          // alert("ไม่สามารถโหลดข้อมูลได้");
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
@@ -276,7 +529,7 @@ export default {
        this.items = groups;
      })
      .catch((error) => {
-        alert("ไม่สามารถโหลดข้อมูลได้");
+        // alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });

@@ -284,13 +537,43 @@ export default {
      .query({})
      .then((data) => {
        this.provinceItems = data;
-        this.getUser(data);
+        // if (this.getUsername) {
+        //   this.getUser(data);
+        // }
      })
      .catch((error) => {
-        alert("ไม่สามารถโหลดข้อมูลได้");
+        // alert("ไม่สามารถโหลดข้อมูลได้");
        console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
      });
  },
 };
 </script>
-<style></style>
+<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;
+}
+.v-pagination .v-btn {
+  font-size: large;
+  background-color: white;
+}
+
+/* .v-pagination .v-pagination__item .v-btn {
+  display: none;
+} */
+.v-pagination .v-btn .pagination__prev {
+  font-size: 80px;
+  display: block !important;
+}
+.v-pagination .v-btn .pagination__next {
+  display: block !important;
+  font-size: 80px;
+}
+</style>
--- a/src/config.js
+++ b/src/config.js
@@ -1,4 +1,5 @@
 export const CONFIG = {
-  //  api_url: "http://178.128.18.156:3000",
  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/store/index.js
+++ b/src/store/index.js
@@ -4,13 +4,17 @@ export default createStore({
  state: {
    username:"",
    img:"",
-    checkPage:""
+    checkPage:"",
+    checkLogin:"",
  },
  getters: {
   
    getUsername: (state) => {
      return state.username
    },
+    getCheckLogin: (state) => {
+      return state.checkLogin
+    },
    getImg: (state) => {
      return state.img
    },
@@ -19,6 +23,9 @@ export default createStore({
    },
  },
  mutations: {
+    setCheckLogin: (state, payload) => {
+     state.checkLogin = payload;
+    },
    setUsername: (state, payload) => {
      state.username = payload;
    },
--- a/src/views/LoginForm.vue
+++ b/src/views/LoginForm.vue
@@ -13,14 +13,16 @@
        width="250"
      ></v-img>
      <v-card
-        class="mx-auto pa-12 pb-8"
+        class="mx-auto pa-4 pb-8 pt-8"
        elevation="8"
        max-width="600"
        rounded="lg"
      >
        <v-form fast-fail @submit.prevent v-model="form1">
-          <div class="text-subtitle-1 text-medium-emphasis">ID card number</div>
-
+          <!-- <div class="text-subtitle-1 text-medium-emphasis">ID card number</div> -->
+          <div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
+            เลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+          </div>
          <v-text-field
            density="compact"
            placeholder="เลขประจำตัว 13 หลัก"
@@ -29,6 +31,8 @@
            color="#4c884c"
            v-model="payload.cid"
            :rules="rules.id"
+            type="number"
+            hide-spin-buttons
          ></v-text-field>
          <!--   
        <div class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between">
@@ -42,10 +46,12 @@
          >
            Forgot login password?</a>
        </div> -->
-
+          <div class="text-medium-emphasis text-subtitle" style="font-size: 18px">
+           เบอร์โทรศัพท์ 10 หลัก เช่น 0812345678
+          </div>
          <v-text-field
            :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
-            :type="visible ? 'text' : 'password'"
+            :type="visible ? 'number' : 'password'"
            density="compact"
            placeholder="เบอร์โทรศัพท์"
            prepend-inner-icon="mdi-lock-outline"
@@ -54,6 +60,7 @@
            v-model="payload.phone"
            :rules="rules.tel"
            color="#4c884c"
+            hide-spin-buttons
          ></v-text-field>

          <!-- <v-card
@@ -80,7 +87,10 @@
        </v-form>
      </v-card>
    </div>
-    <div v-if="getUsername&&getCheckPage" class="text-normal text-center py-10">
+    <div
+      v-if="getUsername && getCheckPage"
+      class="text-normal text-center py-10"
+    >
      <v-icon
        icon="mdi-alert-circle-outline"
        size="35"
@@ -89,7 +99,14 @@
      คุณเข้าสู่ระบบอยู่แล้ว

      <div class="mt-10">
-        <v-btn elevated color="#DD6C31" class="text-normal ma-6" height="85" to="/" width="300">
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal ma-6"
+          height="85"
+          to="/"
+          width="300"
+        >
          <span class="text-normal"> กลับหน้าหลัก</span>

          <v-img
@@ -102,7 +119,7 @@
        <v-btn
          elevated
          color="#DD6C31"
-          class="text-normal  ma-6"
+          class="text-normal ma-6"
          height="85"
          to="/search"
          width="300"
@@ -124,7 +141,7 @@ import { mapGetters } from "vuex";
 import { client } from "@/utils/trpc";
 export default {
  computed: {
-    ...mapGetters(["getUsername", "getImg","getCheckPage"]),
+    ...mapGetters(["getUsername", "getImg", "getCheckPage"]),
  },
  data: () => ({
    form1: false,
@@ -134,10 +151,12 @@ export default {
      tel: [
        (v) =>
          // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
-          /^([0-9]{10})$/.test(v) || "Invalid phone number",
+          /^([0-9]{10})$/.test(v) || "เบอร์โทรไม่ถูกต้อง",
      ],
      id: [
-        (v) => (parseInt(v) == v && v.length == 13) || "Invalid ID card number",
+        (v) =>
+          (parseInt(v) == v && v.length == 13) ||
+          "หมายเลขบัตรประชาชนไม่ถูกต้อง",
      ],
    },
  }),
@@ -170,7 +189,7 @@ export default {
          // this.provinceItems = data;
        })
        .catch((error) => {
-          alert("ไม่สามารถบันทึกข้อมูลได้: " + error.message);
+          alert("ไม่สามารถเข้าสู่ระบบได้: " + error.message);
          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
        });
    },
--- 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>
@@ -19,7 +19,7 @@ import FormMain from "../components/form/FormMain.vue";
 export default {
  components: { FormMain },
  computed: {
-    ...mapGetters(["getUsername", "getImg"]),
+    ...mapGetters(["getUsername", "getImg",'getCheckLogin']),
  },
 };
 </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>
--- a/vue.config.js
+++ b/vue.config.js
@@ -5,4 +5,5 @@ module.exports = defineConfig({
      // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
    },
  },
+  productionSourceMap: false,
 });
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
Jarinya	c11f53f288	Merge branch 'main' of https://gitea.cognizata.com/Atapy/sorvor-front All checks were successful frontend-action / build-image (push) Successful in 45s Details	2024-05-17 18:20:25 +07:00
Jarinya	40c82c8bd3	update แก้ text	2024-05-17 18:20:19 +07:00
Thanu Poptiphueng	6344f4011a	updated lock file All checks were successful frontend-action / build-image (push) Successful in 46s Details	2024-05-17 18:12:54 +07:00
Thanu Poptiphueng	f731f20407	removed old api reference ip Some checks failed frontend-action / build-image (push) Failing after 13s Details	2024-05-17 18:12:33 +07:00
Jarinya	8e8303df43	update config Some checks failed frontend-action / build-image (push) Failing after 10s Details	2024-05-17 17:56:50 +07:00
Jarinya	7a4a908afc	update new desige Some checks failed frontend-action / build-image (push) Failing after 14s Details	2024-05-17 17:56:18 +07:00
Jarinya	d917a93db2	ปรับ UI 2 post/page add id group All checks were successful frontend-action / build-image (push) Successful in 46s Details	2024-05-13 18:27:22 +07:00
Jarinya	75d60c0284	Merge branch 'main' of https://gitea.cognizata.com/Atapy/sorvor-front All checks were successful frontend-action / build-image (push) Successful in 47s Details	2024-05-10 17:40:57 +07:00
Jarinya	822af415c8	fix bug id group	2024-05-10 17:40:53 +07:00
Thanu Poptiphueng	d9eccb4116	remove source map from frontend All checks were successful frontend-action / build-image (push) Successful in 59s Details	2024-05-10 09:01:49 +07:00
Jarinya	7929369744	update style card / ปรับ offset / limit All checks were successful frontend-action / build-image (push) Successful in 1m3s Details	2024-05-08 19:42:48 +07:00
Jarinya	93e17e4579	Merge branch 'main' of https://gitea.cognizata.com/Atapy/sorvor-front All checks were successful frontend-action / build-image (push) Successful in 46s Details	2024-05-07 15:29:39 +07:00
Jarinya	c0fbc62ed8	update check profile img	2024-05-07 15:29:33 +07:00