fixed bug

.gitea/workflows/frontend.yaml

@@ -23,5 +23,14 @@ jobs:
           tags: gitea.cognizata.com/atapy/sorvor-front:latest
           target: app
           build-args: |
-            VUE_APP_API_URL=https://sxovinternal.cognizata.com/api
+            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 }}."

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}

Dockerfile

@@ -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
  

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",

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"

pnpm-lock.yaml

@@ -11,15 +11,30 @@ 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
+  thai-id-validator:
+    specifier: ^1.1.3
+    version: 1.1.3
   vue:
     specifier: ^3.2.13
     version: 3.4.23
   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)
@@ -2056,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}
@@ -2425,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
@@ -3645,6 +3671,10 @@ packages:
       schema-utils: 3.3.0
       webpack: 5.91.0
 
+  /filereader@0.10.3:
+    resolution: {integrity: sha512-7F8w6GSXuHLN80ukaVOcHgBaiTRHUZr8GeEhNdqfAECcnBoROg4i8hTl+KqtF4yUPffOJVHEFg4iDJb7xIYFng==}
+    dev: false
+
   /fill-range@7.0.1:
     resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
     engines: {node: '>=8'}
@@ -3884,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:
@@ -4210,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
@@ -5439,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:
@@ -5573,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==}
@@ -5775,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
@@ -7046,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
@@ -7119,6 +7177,10 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /thai-id-validator@1.1.3:
+    resolution: {integrity: sha512-Cv7Nt4YbrqEwxfwhfW1Z+5nb0fSEC48FgKkeZLb5ebolHVbGTwofhaN+D7dFQvHX4sT/ea503edEFEs71lgf5A==}
+    dev: false
+
   /thenify-all@1.6.0:
     resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
     engines: {node: '>=0.8'}
@@ -7513,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
@@ -7807,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:

public/index.html

@@ -5,7 +5,7 @@
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
-  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <link rel="icon" href="<%= BASE_URL %>logo.png">
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-main class="bg-main">
-      <div class="d-block w-100 text-right pa-3">
+      <div class="d-block w-100 text-right pa-3 mb-5">
         <span class="img-logo">
           <router-link to="/">
             <span class="float-left">
@@ -11,16 +11,85 @@
                 width="80"
               ></v-img></span></router-link
         ></span>
-        <span
-          ><v-btn
-            icon="mdi-home-variant-outline"
+
+        <!-- {{ getUsernameFromLocalStorage }} -->
+        <span>
+          <v-btn
             variant="text"
-            href="/"
-          ></v-btn
-          ><v-btn icon="mdi-account-outline" variant="text"></v-btn>
-          <v-btn variant="text"> Sign In </v-btn>
-          <v-btn elevated color="#F4C03F"> Get Started </v-btn></span
-        >
+        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
+          > -->
+          <!-- <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"
+           
+            v-if="
+              getUsername == '' ||
+              getUsername == null ||
+              getUsername == undefined
+            "
+            to="/login"
+         
+          >
+            <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" class="mt-2 px-2" >
+                <!-- {{ getImg }} -->
+
+                <v-avatar
+                  color="#635d56"
+                  v-if="getImg"
+                  :image="getImg"
+                  size="35"
+                >
+                </v-avatar
+                ><v-avatar size="40" v-else>
+                  <v-icon
+                    icon="mdi-account-circle"
+                    color="white"
+                    size="30"
+                  ></v-icon>
+                </v-avatar>
+                <span class="ml-2" style="font-size: medium">{{
+                  getUsername
+                }}</span>
+              </v-btn></template
+            >
+            <v-list>
+              <v-list-item
+                :key="0"
+                :value="0"
+                @click="$router.push('/profile')"
+              >
+                <v-list-item-title>
+                  <v-icon icon="mdi-account-edit"></v-icon> แก้ไขข้อมูลส่วนตัว
+                </v-list-item-title>
+              </v-list-item>
+              <v-list-item :key="1" :value="1" @click="logout">
+                <v-list-item-title>
+                  <v-icon icon="mdi-logout"></v-icon> ออกจากระบบ
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
+        </span>
       </div>
       <router-view />
     </v-main>
@@ -31,17 +100,50 @@
 import { client } from "./utils/trpc";
 client.info.getAllZones.query({}).then(console.log);
 // import MainVote from "./components/MainVote.vue";
-
+import { mapGetters } from "vuex";
 export default {
   name: "App",
-
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   components: {
     // MainVote,
   },
 
   data: () => ({
-    //
+    img: "",
+    username: "",
+    items: [
+      { title: "แก้ไขข้อมูลส่วนตัว", icon: "mdi-account-edit", to: "/profile" },
+      { title: "ออกจากระบบ", icon: "mdi-logout", to: "/profile" },
+    ],
   }),
+  methods: {
+    logout() {
+      localStorage.clear();
+      // location.reload();
+      this.$store.commit("setUsername", "");
+      this.$store.commit("setImg", "");
+      this.$store.commit("setCheckPage", "");
+      this.$router.push("/");
+    },
+  },
+  mounted() {
+    // this.$emitter.on("loginUser", (val) => {
+    //   console.log("user", val);
+    //   if (val) {
+    //     this.username = localStorage.getItem("username");
+    //   }
+    // });
+    this.username = localStorage.getItem("username");
+    this.img = localStorage.getItem("img");
+    if (this.getUsername == "") {
+      this.$store.commit("setUsername", this.username);
+    }
+    if (this.getImg == "" || this.getImg == null || this.getImg == undefined) {
+      this.$store.commit("setImg", this.img);
+    }
+  },
 };
 </script>
 <style>
@@ -90,23 +192,23 @@ export default {
     display: none;
   }
   .text-title {
-    font-size: 28px;
+    font-size: 25px;
     font-weight: 500;
     /* font: normal normal medium 47px/77px IBM Plex Sans Thai; */
   }
   .text-normal {
-    font-size: 25px;
+    font-size: 22px;
   }
   .text-subtitle {
     font-size: 22px;
     font-weight: 600;
   }
   .text-sub {
-    font-size: 23px;
+    font-size: 21px;
     font-weight: 400;
   }
   .text-sub2 {
-    font-size: 20px;
+    font-size: 19px;
     /* font-weight: 500; */
   }
   .text-sub3 {

src/components/FooterPage.vue

@@ -0,0 +1,21 @@
+<template>
+    <div class="bg-curve-2">
+    </div>
+  </template>
+  <script>
+
+  export default {
+   
+  };
+  </script>
+  <style>
+
+  .bg-curve-2 {
+    padding-top: 90px;
+    background-image: url("/src/assets/Path\ 18.png");
+    height: 300px;
+    background-position: center top;
+    /* background: #2b2b26 0% 0% no-repeat padding-box; */
+  }
+  </style>
+  

src/components/HeaderHome.vue

@@ -8,53 +8,105 @@
               :aspect-ratio="1"
               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>
               ศึกษาให้พร้อมแล้วมาร่วมเป็นส่วนหนึ่งของกระบวนการเลือก สว.
             </div>
-            <v-btn
-              elevated
-              color="#B2C573"
-              class="mt-4"
-              style="color: #0f470f"
-              size="large"
-              href="#started"
-            >
-              มาเริ่มกันเลย
-            </v-btn>
+
+            <div class="text-center pa-4">
+              <!-- <v-btn
+                @click="dialog = true"
+                elevated
+                color="#B2C573"
+                class="mt-4 text-normal"
+                style="color: #0f470f"
+                size="large"
+                height="80"
+                width="470"
+              >
+                <span class="text-normal"> ขั้นตอนการใช้งานระบบ</span>
+              </v-btn> -->
+
+              <v-dialog v-model="dialog" width="100%">
+                <v-card width="100%">
+                  <v-img src="../assets/order.png" width="100%"> </v-img>
+                  <template v-slot:actions>
+                    <v-btn
+                      size="large"
+                      class="ms-auto text-subtitle"
+                      text="ปิด"
+                      @click="dialog = false"
+                    ></v-btn>
+                  </template>
+                </v-card>
+              </v-dialog>
+            </div>
           </v-col>
         </v-row>
       </div>
     </div>
-    <div style="position: relative" class="bg-curve" id="started">
-      <v-row style="height: 100%" align="center" class="text-center">
-        <v-col cols="12" md="4">
+    <div style="position: relative" class="bg-curve d-none" id="started">
+      <v-row
+        style="height: 100%; width: 90%"
+        align="center"
+        class="text-center ma-auto"
+      >
+        <v-col cols="12" md="" class="text-normal mt-5">
+          <div class="text-center text-white pt-2">
+            <div
+              class="text-subtitle mx-10 text-center mt-10 box-order mx-auto my-5"
+              style="color: #ffffff"
+              v-if="
+                getUsername == '' ||
+                getUsername == null ||
+                getUsername == undefined
+              "
+            >
+              ขั้นตอนที่
+              <v-avatar color="#DD6C31" class="text-subtitle">1</v-avatar>
+            </div>
+            <div class="text-title m-3">ใครสมัคร สว.ได้บ้าง</div>
+            <div>
+              สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้พรรคการเมืองใดๆ
+              โดยมีคุณสมบัติดังนี้
+            </div>
+            <div>เช็คคุณสมบัติกันเลย !</div>
+            <!-- <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80"  to="/check">
+        ตรวจสอบคุณสมบัติการเป็น  สว.
+       </v-btn> -->
+          </div>
           <div style="position: relative">
             <v-btn
               elevated
               color="#DD6C31"
-              class="text-normal"
-              stacked
-              height="110"
+              class="text-normal mt-5"
+              height="85"
               to="/check"
             >
-              ตรวจสอบคุณสมบัติ
-              <br />
-              การเป็น สว.
+              <span class="text-normal" style="white-space: break-spaces">
+                ตรวจสอบคุณสมบัติการเป็น สว.</span
+              >
               <v-img
                 :aspect-ratio="1"
                 src="../assets/Group 9.png"
                 width="70"
-                style="position: absolute; bottom: -25px; left: -20px"
+                style="position: absolute; bottom: -27px; left: -30px"
               ></v-img>
             </v-btn>
           </div>
+          <br />
         </v-col>
-        <v-col cols="12" md="4" class="mt-0 mt-md-10  mt-lg-10">
+        <!-- <v-col cols="12" md="" class="mt-0 mt-md-10 mt-lg-10" >
           <v-btn
             elevated
             color="#DD6C31"
@@ -62,6 +114,7 @@
             stacked
             height="110"
             to="/forms"
+            :disabled="getUsername!==''||getUsername!==null||getUsername!==undefined"
           >
             <v-img
               :aspect-ratio="1"
@@ -72,7 +125,8 @@
             แสดงตนเป็นผู้สมัคร
           </v-btn>
         </v-col>
-        <v-col cols="12" md="4">
+
+        <v-col cols="12" md="">
           <v-btn
             elevated
             color="#DD6C31"
@@ -81,6 +135,7 @@
             width="300"
             height="110"
             to="/search"
+            :disabled="!getUsername"
           >
             <v-img
               :aspect-ratio="1"
@@ -88,15 +143,32 @@
               width="100"
               style="position: absolute; top: -40px; right: 0px"
             ></v-img>
-            ค้นหาผู้สมัคร สว.
+            ค้นหาผู้สมัคร  สว.
           </v-btn>
-        </v-col>
+        </v-col> -->
       </v-row>
     </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
+
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+  data() {
+    return {
+      dialog: false,
+    };
+  },
+  methods: {
+    checkPage() {
+      this.$store.commit("setCheckPage", true);
+      this.$router.push("/login");
+    },
+  },
+};
 </script>
 <style>
 .text-normal .v-btn--size-large {
@@ -117,10 +189,34 @@ export default {};
   transform: translate(-50%, -50%);
 }
 .bg-curve {
+  position: relative;
+  top: -59px;
+  background-size: cover;
+  padding-top: 70px;
   background-image: url("/src/assets/Path\ 14.png");
-  height: 400px;
-
+  height: 450px;
   background-position: center top;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
+.box-order {
+  margin: auto;
+  outline: 2px solid;
+  border-radius: 25px;
+  width: fit-content;
+  padding: 7px 10px;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  #app > div > div > main > div:nth-child(2) > div > div:nth-child(1) > div.text-normal.mb-5 > div > div > div.v-col-sm-12.v-col-md.v-col-auto > div{
+    height: 171px !important;
+  }
+  .logo-home{
+    height: 300px !important;
+    width: auto;
+  }
+  .bg-curve {
+    height: 450px;
+    position: relative;
+  top: -79px;
+  }
+}
 </style>

src/components/MainVote.vue

@@ -2,42 +2,72 @@
   <div class="bg-main">
     <Header />
     <Section2Green />
-    <Section3Base />
-    <Section4White/>
-    <Section5Green/>
-    <Section6Base/>
-    <Section7GreenTab/>
-    <Section8Base/>
+    <!-- <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";
 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
-
-
+    Section8Base,
+    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>

src/components/Section2Green.vue

@@ -1,50 +1,101 @@
 <template>
-  <div style="position: relative" class="bg-green-curve text-normal">
-    <div class="text-center text-white py-5">
-      <div class="text-title my-3">มาศึกษาก่อนจะเป็น สว.</div>
-      <v-row>
-        <v-col class="border-green">
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
-          <div>ใครสมัครสว.ได้บ้าง</div>
-        </v-col>
-        <v-col class="border-green">
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
+  <div style="position: relative" class="text-normal bg-curve my-auto">
+    <div
+      style="width: 90%"
+      class="text-center text-white py-10 mx-auto my-auto"
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+    >
+      <div
+        class="text-subtitle mx-10 text-center box-order mx-auto my-5 d-none"
+        style="color: #ffffff"
+      >
+        ขั้นตอนที่
+        <v-avatar color="#f4c03f" class="text-subtitle">2</v-avatar>
+      </div>
+      <!-- <div class="text-title my-3">มาลองสร้างตัวตนสมัคร สว.</div> -->
+      <div class="mb-8">
+        ลงทะเบียนแสดงตัวตน / ค้นหาผู้แสดงตนเป็นผู้สมัคร สว.
+      </div>
 
-          <div>หน้าที่ของสว.</div>
-        </v-col>
-        <v-col>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
-
-          <div>กระบวนการเลือก สมาชิกวุฒิสภา</div>
-        </v-col>
-      </v-row>
-      <v-row>
-        <v-col>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
-          <div>ขั้นตอนการเลือกสว.</div>
-        </v-col>
-        <v-col>
-          <v-icon icon="mdi-circle" color="#B2C573"></v-icon>
-
-          <div>กลุ่มอาชีพ ผู้สมัครรับเลือกสว.</div>
-        </v-col>
-      </v-row>
+      <v-btn
+        elevated
+        color="#f4c03f"
+        class="text-normal btn-w"
+        height="85"
+        width="470"
+        to="/forms"
+      >
+        <v-img
+          :aspect-ratio="1"
+          src="../assets/Group 23.png"
+          width="80"
+          style="position: absolute; bottom: -40px; left: 0"
+        ></v-img>
+        <span class="text-normal"> ลงทะเบียนผู้สมัคร</span>
+      </v-btn>
+    </div>
+    <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
+        color="#DD6C31"
+        class="text-normal btn-w"
+        height="85"
+        width="470"
+        to="/search"
+      >
+        <v-img
+          :aspect-ratio="1"
+          src="../assets/search.png"
+          width="100"
+          style="position: absolute; bottom: -30px; right: -10px"
+        ></v-img>
+        <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+      </v-btn>
     </div>
   </div>
 </template>
 <script>
-export default {};
+import { mapGetters } from "vuex";
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+};
 </script>
 <style>
 .bg-green-curve {
   background-image: url("/src/assets/Rectangle\ 3.png");
-  min-height: 600px;
+  min-height: 530px;
   height: auto;
   background-position: center bottom;
+  background-color: white;
+  background-size: cover;
   /* background: #2b2b26 0% 0% no-repeat padding-box; */
 }
-.border-green{
+.bg-green-black {
+  /* min-height: 600px; */
+  height: auto;
+  background-color: #4c884c;
+  /* background: #2b2b26 0% 0% no-repeat padding-box; */
+}
+.border-green {
   border-right: 5px solid #b2c573;
 }
-
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .bg-green-curve {
+    min-height: 420px;
+    background-position: center bottom;
+  }
+  .btn-w.v-btn {
+    width: 370px !important;
+  }
+}
 </style>

src/components/Section3Base.vue

@@ -1,21 +1,45 @@
 <template>
-  <div style="position: relative" class="text-normal mb-10">
-    <div class="text-center txt-black py-5">
-      <div class="text-title my-3">ใครสมัครสว.ได้บ้าง</div>
-      <div>
-        สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
-        โดยมีคุณสมบัติดังนี้
+  <div style="position: relative;background-color: white;" class="text-normal pb-10" >
+    <div class="text-center txt-black py-8 mx-auto" style="width: 90%;">
+      <div
+        class="text-subtitle mx-10 text-center  box-order mx-auto my-5 txt-black"
+
+        v-if="
+          getUsername == '' || getUsername == null || getUsername == undefined
+        "
+      >
+        ขั้นตอนที่
+        <v-avatar color="#b2c573" class="text-subtitle">3</v-avatar>
       </div>
-      <div>เช็คคุณสมบัติกันเลย !</div>
-      <v-btn elevated color="#DD6C31" class="text-normal mt-4" stacked height="80">
-        ตรวจสอบคุณสมบัติการเป็น สว.
+      <div class="text-title my-3">เข้าสู่ระบบหากคุณได้แสดงตนสำเร็จแล้ว</div>
+
+      <v-btn
+        elevated
+        color="#B2C573"
+        class="mt-4 text-normal"
+        style="color: #0f470f"
+        size="large"
+        height="80"
+        @click="checkPage"
+      >
+        <span class="text-normal" style="white-space: break-spaces;">เข้าสู่ระบบสำหรับผู้แสดงตนแล้ว</span>
       </v-btn>
     </div>
   </div>
 </template>
 <script>
-export default {};
-</script>
-<style>
+import { mapGetters } from "vuex";
 
-</style>
+export default {
+  computed: {
+    ...mapGetters(["getUsername"]),
+  },
+  methods: {
+    checkPage() {
+      this.$store.commit("setCheckPage", true);
+      this.$router.push("/login");
+    },
+  },
+};
+</script>
+<style></style>

src/components/Section4White.vue

@@ -1,7 +1,11 @@
 <template>
-  <div style="position: relative" class="bg-white text-normal pb-10">
-    <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
-      <div class="text-title my-3">หน้าที่ของสว.</div>
+  <div style="position: relative" class="text-normal pb-10">
+    <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"
@@ -61,4 +65,9 @@ export default {};
   background-color: white;
   height: auto;
 }
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .border-dot {
+    border-right: 0px dashed #f2f7e200 !important;
+  }
+}
 </style>

src/components/Section5Green.vue

@@ -19,7 +19,7 @@
             <span>2</span>
           </template>
           <div class="d-flex">
-            <div>เปิดสมัครรับเลือกสว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
+            <div>เปิดสมัครรับเลือก สว.โดยมี ระยะเวลารับสมัคร 5 - 7 วัน</div>
           </div>
         </v-timeline-item>
 
@@ -37,7 +37,7 @@
             <span>4</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว. ระดับอำเภอ (ภายใน 20 วัน)</div>
+            <div>เลือก สว. ระดับอำเภอ (ภายใน 20 วัน)</div>
           </div>
         </v-timeline-item>
         <v-timeline-item fill-dot size="large" dot-color="white">
@@ -45,7 +45,7 @@
             <span  style="color: #4c884c;">5</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว. ระดับจังหวัด (+ 7 วัน )</div>
+            <div>เลือก สว. ระดับจังหวัด (+ 7 วัน )</div>
           </div>
         </v-timeline-item>
 
@@ -54,7 +54,7 @@
             <span>6</span>
           </template>
           <div class="d-flex">
-            <div>เลือกสว.ระดับประเทศ (+ 10 วัน )</div>
+            <div>เลือก สว.ระดับประเทศ (+ 10 วัน )</div>
           </div>
         </v-timeline-item>
 
@@ -63,7 +63,7 @@
             <span  style="color: #4c884c;" >7</span>
           </template>
           <div class="d-flex">
-            <div>กกต. ประกาศผล การเลือกสว.</div>
+            <div>กกต. ประกาศผล การเลือก สว.</div>
           </div>
         </v-timeline-item>
       </v-timeline>

src/components/Section6Base.vue

@@ -2,7 +2,7 @@
   <div style="position: relative" class="text-normal pb-10">
     <!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
     <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
-      <div class="text-title my-3">ขั้นตอนการเลือกสว.</div>
+      <div class="text-title my-3">ขั้นตอนการเลือก สว.</div>
       <v-row class="text-left">
         <v-col cols="12" md="6">
           <v-row align="center"
@@ -11,13 +11,13 @@
               <!-- <v-icon icon="mdi-flag-triangle"  color="#F4C03F"></v-icon> -->
               <div class="line-flag">
                 <div class="text-subtitle">
-                  ประกาศให้มีการเลือกสว.
+                  ประกาศให้มีการเลือก สว.
                   <v-icon size="50" color="#F4C03F">mdi-menu-left</v-icon>
                   <v-avatar color="#F4C03F"> 1</v-avatar>
                 </div>
                 <div class="text-sub2">
-                  ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือกสว.
-                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกอระดับอำเภอ ระดับจังหวัด
+                  ภายใน 5 วันนับตั้งแต่วันที่พระราชกฤษฎีกาให้มีการเลือก สว.
+                  ใช้บังคับ ให้กกต.ประกาศกำหนดวันเลือกระดับอำเภอ ระดับจังหวัด
                   ระดับประเทศ
                 </div>
                 <!-- <br> -->
@@ -45,13 +45,13 @@
             <v-col cols="12" md="7">
               <div>
                 <div class="text-subtitle">
-                  การสมัครรับเลือกสว.
+                  การสมัครรับเลือก สว.
                   <v-icon size="50" color="#37332F">mdi-menu-left</v-icon>
                   <v-avatar color="#37332F"> 2</v-avatar>
                 </div>
                 <div class="text-sub2">
                   รับสมัครไม่เกิน 15 วันนับแต่วันที่พระราชกฤษฎีกาให้มี
-                  การเลือกสว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
+                  การเลือก สว.ใช้บังคับ และกำหนดวันรับสมัครไม่น้อยกว่า 5 วัน
                   แต่ต้องไม่เกิน 7 วัน
                 </div>
               </div>
@@ -88,7 +88,7 @@
                 <div class="text-subtitle">
                   <v-icon size="50" color="#B2C573">mdi-menu-right</v-icon>
                   <v-avatar color="#B2C573" class="mr-2"> 3</v-avatar>
-                  การเลือกสว. ระดับอำเภอ
+                  การเลือก สว. ระดับอำเภอ
                 </div>
 
                 <div class="text-sub2">
@@ -104,7 +104,7 @@
                   <div style="color: #4c884c; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 3 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 3 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับอำเภอ สำหรับกลุ่มนั้น
                 </div>
               </div>
@@ -117,7 +117,7 @@
             <v-col  cols="12" md="7">
               <div>
                 <div class="text-subtitle">
-                  การเลือกสว. ระดับจังหวัด
+                  การเลือก สว. ระดับจังหวัด
                   <v-icon size="50" color="#dd6c31">mdi-menu-left</v-icon>
                   <v-avatar color="#dd6c31"> 4</v-avatar>
                 </div>
@@ -133,7 +133,7 @@
                   <div style="color: #dd6c31; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 2 ลำดับแรก ของแต่ละกลุ่ม
+                  ผู้ได้คะแนนสูงสุด 2 ลำดับแรก ของแต่ละกลุ่ม
                   เป็นผู้ได้รับเลือกระดับจังหวัด สำหรับกลุ่มนั้น
                 </div>
               </div>
@@ -166,7 +166,7 @@
           <v-row>
             <v-col  cols="12" md="7">
               <div>
-                <div class="text-subtitle">การเลือกสว. ระดับประเทศ    
+                <div class="text-subtitle">การเลือก สว. ระดับประเทศ    
                   <v-icon size="50" color="#1b76ba">mdi-menu-left</v-icon>
                   <v-avatar color="#1b76ba"> 5</v-avatar></div>
                 <div class="text-sub2">
@@ -182,7 +182,7 @@
                   <div style="color: #1b76ba; font-weight: 500">
                     การเลือกรอบที่ 2 เลือกกลุ่มบุคคลในสายเดียวกัน
                   </div>
-                  ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็นสว. และ ลำดับที่ 11-15
+                  ผู้ได้คะแนนสูงสุดลำดับ 1-10 เป็น สว. และ ลำดับที่ 11-15
                   อยู่ในบัญชีสำรองของกลุ่มนั้น
                 </div>
               </div>
@@ -213,7 +213,7 @@
               </div>
             </v-col>
             <v-col cols="12">
-              <div class="text-subtitle">ประกาศผลเลือกสว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
+              <div class="text-subtitle">ประกาศผลเลือก สว. <v-icon size="50" color="#4C884C">mdi-menu-left</v-icon>
                   <v-avatar color="#4C884C"> 6</v-avatar></div>
               <div class="text-sub2">
                 เมื่อกกต. ได้รับรายงานจากผู้อำนวยการการเลือกระดับประเทศแล้ว

src/components/Section7GreenTab.vue

@@ -1,7 +1,7 @@
 <template>
-  <div style="position: relative" class="bg-green-full text-normal py-7">
+  <div style="position: relative" class="bg-green-full text-normal py-2">
     <div id="scroll-container">
-      <div id="scroll-text" class="text-sub">
+      <div id="scroll-text" class="text-sub d-none">
         <v-icon icon="mdi-circle" size="20"></v-icon>
         กลุ่มบริหารราชการแผ่นดินและความมั่นคง
         <v-icon icon="mdi-circle" size="20"></v-icon>

src/components/Section8Base.vue

@@ -2,19 +2,37 @@
   <div style="position: relative" class="text-normal pb-10">
     <!-- <v-img :aspect-ratio="1" src="../assets/greenimg.png" width="100%"></v-img> -->
     <div class="text-center txt-black py-10 ma-auto" style="width: 90%">
-      <!-- <div class="text-title my-3">ขั้นตอนการเลือกสว.</div> -->
+      <!-- <div class="text-title my-3">ขั้นตอนการเลือก สว.</div> -->
       <br />
       <v-row>
         <v-col cols="12" md="6">
           <div style="width: 90%; margin: auto">
-            <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือกสว.</div>
+            <div class="text-title">กลุ่มอาชีพผู้สมัครรับเลือก สว.</div>
             <br />
             <div>
-              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม
-              มีสิทธิสมัครรับเลือกเปนสว. ในกลุ่มใดกลุ่มหนึง ในกลุ่มอาชีพ 20
-              กลุ่ม ดังนี้.
+              ทุกคนที่มีคุณสมบัติและไม่มีลักษนะต้องห้าม มีสิทธิสมัครรับเลือกเป็น
+              สว. ในกลุ่มใดกลุ่มหนึ่ง ในกลุ่มอาชีพ 20 กลุ่ม ดังนี้.
             </div>
           </div>
+          <v-btn
+            variant="text"
+            append
+            color="#168fb3"
+            size="lg"
+            class="mt-10"
+            to="/detail"
+            ><div
+              class="text-wrap text-sub"
+              style="
+                width: 100%;
+                text-decoration: underline;
+                text-decoration-color: #168fb3;
+                margin: auto;
+              "
+            >
+              คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+            </div></v-btn
+          >
         </v-col>
         <v-col cols="12" md="6">
           <v-card
@@ -38,16 +56,27 @@
                 {{ item.text }}
               </div>
             </v-card-item>
+
+            <v-btn
+              @click="count++"
+              class="pa-4 mb-5 mr-5 btn-phone"
+              icon="mdi-skip-next"
+              rounded="circle"
+              size="xl"
+              color="#4c884c"
+            ></v-btn>
           </v-card>
-          <v-btn
+
+          <!-- <v-btn
             @click="count++"
-            style="top: -55px"
-            class="float-right"
+            style="top:-100px; right: 25px;"
+            class="float-right pa-4 mb-5 mr-5 "
             icon="mdi-skip-next"
             rounded="circle"
-            size="lg"
+            size="xl"
+            
             color="#4c884c"
-          ></v-btn>
+          ></v-btn> -->
         </v-col>
       </v-row>
     </div>
@@ -94,7 +123,7 @@ export default {
       { text: "กลุ่มผู้ประกอบธุรกิจหรืออาชีพด้านการท่องเที่ยว", idx: 11 },
       { text: "กลุ่มผู้ประกอบอุตสาหกรรม", idx: 12 },
       {
-        text: "กลุมผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
+        text: "กลุ่มผู้ประกอบอาชีพด้านวิทยาศาสตร์ เทคโนโลยี การสื่อสาร การพัฒนานวัตรกรรม",
         idx: 13,
       },
       { text: "กลุ่มสตรี", idx: 14 },

src/components/check/CheckList.vue

@@ -1,6 +1,6 @@
 <template>
-   <v-container class="text-center">
-    <div class="text-title">ใครสมัครสว.ได้บ้าง</div>
+  <v-container class="text-center">
+    <div class="text-title">ใครสมัคร สว.ได้บ้าง</div>
     <div>
       <v-img
         :aspect-ratio="1"
@@ -11,8 +11,8 @@
     </div>
     <br />
     <div class="text-sub ma-auto" style="width: 90%">
-      อยากลงสมัครสว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
-      เราสามารถมาร่วมกันเช็คคุณสมบัติ เช็คเราามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
+      อยากลงสมัคร สว. แต่ไม่แน่ใจว่าเราสามารถสมัครได้หรือไม่
+      เราสามารถตรวจสอบคุณสมบัติ เช็คว่าสามารถสมัครกลุ่มไหน เขตอำเภอไหนบ้าง
       ในการลงสมัคร สว. กัน !
     </div>
     <v-btn
@@ -32,20 +32,24 @@
       src="@/assets/Group 51.png"
       width="230"
     ></v-img>
-    <v-btn variant="text" append color="#3ba8c8" size="lg"
-      ><div class="text-wrap text-sub3" style="width: 100%; margin: auto">
-        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
+    <v-btn variant="text" append color="#168fb3" size="lg" to="/detail"
+      ><div
+        class="text-wrap text-sub"
+        style="
+          width: 100%;
+          text-decoration: underline;
+          text-decoration-color: #168fb3;
+          margin: auto;
+        "
+      >
+        คู่มือตรวจเช็คคุณสมบัติ-ลักษณะต้องห้ามของผู้ที่จะสมัคร สว.
       </div></v-btn
     >
   </v-container>
 </template>
 
 <script>
-export default {
-
-}
+export default {};
 </script>
 
-<style>
-
-</style>
+<style></style>

src/components/check/QuestionList.vue

@@ -3,31 +3,28 @@
     style="height: auto; min-height: 100vh"
     class="d-flex justify-center parent-container"
   >
-    <!-- {{ model }} -->
-    <!-- {{ slides }} -->
     <v-btn
       @click="model++"
       style="z-index: 999"
-      class="float-right btn-r"
+      class="float-right btn-r btn-desk"
       rounded="circle"
       size="lg"
       color="white"
       v-if="model < 17"
       ><v-icon icon="mdi-menu-right" size="70" color="#F4C03F"></v-icon
     ></v-btn>
-    <!-- v-if="model > 0" -->
+
     <v-btn
       v-if="model > 0"
       @click="model--"
       style="z-index: 999"
-      class="float-right btn-l"
+      class="float-right btn-l btn-desk"
       rounded="circle"
       size="lg"
       color="white"
       ><v-icon icon="mdi-menu-left" size="70" color="#F4C03F"></v-icon
     ></v-btn>
 
-   <!-- hide-delimiters -->
     <v-carousel
       style="height: auto; min-height: 100vh"
       progress="#f4c03f"
@@ -58,6 +55,8 @@
               <div class="border-white my-2"></div>
               <br />
               <p class="text-title">{{ slide.txt }}</p>
+
+              <p class="text-normal mt-3">{{ slide.subtxt }}</p>
               <a
                 :href="slide.link"
                 target="_blank"
@@ -66,7 +65,6 @@
               >
                 {{ slide.link }}</a
               >
-              <p class="text-normal">{{ slide.subtxt }}</p>
 
               <br />
               <div class="d-flex justify-center align-center">
@@ -131,16 +129,40 @@
                   </div>
                 </div>
               </div>
+              <div class="text-center my-10 next-phone">
+                <v-btn
+                  v-if="model > 0"
+                  @click="model--"
+                  style="z-index: 999"
+                  rounded="circle"
+                  size="lg"
+                  color="white"
+                  class="mr-5"
+                  ><v-icon
+                    icon="mdi-menu-left"
+                    size="70"
+                    color="#F4C03F"
+                  ></v-icon
+                ></v-btn>
+                <v-btn
+                  @click="model++"
+                  style="z-index: 999"
+                  rounded="circle"
+                  size="lg"
+                  color="white"
+                  v-if="model < 17"
+                  ><v-icon
+                    icon="mdi-menu-right"
+                    size="70"
+                    color="#F4C03F"
+                  ></v-icon
+                ></v-btn>
+                <!-- v-if="model > 0" -->
+              </div>
             </div>
           </v-container>
+          <!-- {{ checkNull.length }} -->
 
-          <div
-            v-if="model > 16 && checkNull.length==17"
-            class="text-sub text-white py-8 d-block"
-          >
-            <v-icon icon="mdi-alert-circle-outline"></v-icon>
-            กรุณาตอบคำถามให้ครบ
-          </div>
           <div
             class="py-7 parent-container"
             v-if="model > 16 && checkPass.length == 17"
@@ -181,39 +203,84 @@
               <div class="text-center mt-5">
                 <v-btn
                   elevated
-                  color="#DD6C31"
-                  class="mt-4"
+                  color="#1B76BA"
+                  class="mt-4 mr-2"
                   stacked
                   height="60"
                   to="/"
                 >
                   <span class="text-sub">เสร็จสิ้น</span>
                 </v-btn>
+                <v-btn
+                  elevated
+                  color="#DD6C31"
+                  stacked
+                  height="60"
+                  to="/forms"
+                  class="mt-4 mr-2"
+                  v-if="
+                    getUsername == '' ||
+                    getUsername == null ||
+                    getUsername == undefined
+                  "
+                >
+                  <span class="text-sub">แสดงตนเป็นผู้สมัคร</span>
+                </v-btn>
               </div>
             </v-container>
           </div>
 
-          <div class="py-7 text-center" v-if="model > 16 && alertList.length">
-            <v-container class="text-black">
+          <div
+            class="py-7 text-center"
+            v-if="
+              (model > 16 && checkNull.length > 0) ||
+              (model > 16 && alertList.length)
+            "
+          >
+            <v-container class="txt-black">
               <div class="text-title mb-2">สรุปผล</div>
               <div class="border-white mb-5"></div>
-              <v-icon icon="mdi-close-circle" size="60" color="red"></v-icon>
-              <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
-              <!-- {{ alertList }} -->
-              <div
-                v-for="(txt, i) in alertList"
-                :key="i"
-                class="text-left my-3 text-sub2"
-              >
-                <v-avatar color="#4c884c" size="35">
-                  {{ i + 1 }}
-                </v-avatar>
 
-                {{ txt.not }}
+      
+                <div class="text-sub py-8 d-block" v-if="checkNull.length > 0">
+                  <v-icon icon="mdi-alert-circle-outline mr-2"     color="white"></v-icon>
+                  กรุณาตอบคำถามให้ครบ
+                  <div class="text-sub2">
+                    ไม่ได้ตอบข้อ
+                    <span v-for="(choice, i) in checkNull" :key="i"
+                      >{{ choice.idx }} ,
+                    </span>
+                  </div>
+                </div>  
+
+              <div v-if="model > 16 && alertList.length">
+                <v-card  class="mx-auto my-10" elevation="6" rounded="xl">
+                <v-card-item>
+                  <br>
+                <v-icon
+                  icon="mdi-close-circle"
+                  size="60"
+                  color="#ca2234"
+                ></v-icon>
+                <div class="text-sub">มีคุณสมบัติที่ไม่ผ่าน</div>
+                <div
+                  v-for="(txt, i) in alertList"
+                  :key="i"
+                  class="text-left my-3 text-sub2"
+                >
+                  <v-avatar color="#4c884c" size="35">
+                    {{ i + 1 }}
+                  </v-avatar>
+
+                  {{ txt.not }}
+                </div>
+                <br>
+                </v-card-item>
+                </v-card>
               </div>
               <v-btn
                 elevated
-                color="#DD6C31"
+                color="#1B76BA"
                 class="mt-4"
                 stacked
                 height="60"
@@ -232,6 +299,7 @@
 </template>
 
 <script>
+import { mapGetters } from "vuex";
 export default {
   watch: {
     model() {
@@ -239,6 +307,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters(["getUsername"]),
     checkNull() {
       let slides = this.slides;
       let data = slides.filter((x) => x.check === null);
@@ -368,23 +437,24 @@ export default {
           vmodel: null,
         },
         {
-          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
+          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น? (ถ้าบุพการี คู่สมรส หรือบุตร ลาออกจากตำแหน่งดังกล่าวแล้ว ให้ตอบว่า ไม่ใช่)",
           color: "#8aa042",
-          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส. สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
+          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของสส.  สว. ข้าราชการการเมือง สมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น",
           check: null,
           idx: 14,
           vmodel: null,
         },
         {
-          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567?",
+          txt: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567?",
           color: "#4C884C",
-          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัครสว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
+          not: "เป็นบุพการี (บิดามารดา ปู่ย่า ตายาย) คู่สมรส หรือบุตร ของผู้ที่จะสมัคร สว. ในปี 2567 (ในครอบครัวนึงให้เลือกลงสมัครได้คนเดียวนะ)",
           check: null,
           idx: 15,
           vmodel: null,
         },
         {
-          txt: "คุณถูกจำกัดสิทธิสมัคร สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้งตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
+          txt: "คุณถูกจำกัดสิทธิสมัคร  สว. 2567 เนื่องจากไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือ ไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 (เฉพาะเขตที่มีการเลือกตั้งซ่อม) และไม่ได้แจ้งเหตุไม่ไปใช้สิทธิเลือกตั้ง  ",
+          subtxt: "ตรวจสอบว่าถูกจำกัดสิทธิหรือไม่ ได้ทาง",
           link: "https://boraservices.bora.dopa.go.th/election/absvote/",
           color: "#8aa042",
           not: "ไม่ได้ไปใช้สิทธิเลือกตั้ง สส. 2566 หรือไม่ได้ไปเลือกตั้งซ่อม สส. ในช่วงปี 2565 โดยไม่ได้แจ้งเหตุ",
@@ -393,7 +463,7 @@ export default {
           vmodel: null,
         },
         {
-          txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่เคย”",
+          txt: "คุณเคยได้รับโทษจำคุก และพ้นโทษมายังไม่ถึง 10 ปีถ้าเป็นกรณีต่อไปนี้ ให้ตอบว่า “ไม่ใช่”",
           subtxt:
             "คดีนั้นรอลงอาญา / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดจากการกระทำโดยประมาท / พ้นโทษมายังไม่ถึง 10 ปี แต่เป็นคดีความผิดลหุโทษ (ความผิดที่กฎหมายกำหนดโทษจำคุกไม่เกินหนึ่งเดือน ปรับไม่เกิน 10,000 บาท)",
           color: "#4C884C",
@@ -429,6 +499,12 @@ export default {
 </script>
 
 <style>
+.btn-desk {
+  display: block;
+}
+.next-phone {
+  display: none;
+}
 .parent-container {
   position: relative; /* ตั้งค่าเพื่อให้ .btn-r สามารถตั้งอยู่ส่วนมากในพื้นที่นี้ */
   display: flex; /* ให้พาเนลหลักของพื้นที่ตรงกลางแนวตั้ง */
@@ -461,16 +537,22 @@ export default {
   margin: auto;
 }
 @media only screen and (min-width: 0px) and (max-width: 700px) {
+  .btn-desk {
+    display: none;
+  }
+  .next-phone {
+    display: block;
+  }
   .btn-r {
- background-color: transparent !important;
-}
-.btn-l {
-  background-color: transparent !important;
+    background-color: transparent !important;
+  }
+  .btn-l {
+    background-color: transparent !important;
 
-  position: absolute;
-  left: 0px;
-  margin: 15px;
-  margin: 15px;
-}
+    position: absolute;
+    left: 0px;
+    margin: 15px;
+    margin: 15px;
+  }
 }
 </style>

src/components/edit/FormMainEdit.vue

@@ -0,0 +1,33 @@
+<template lang="">
+  <div>
+    <div class="hearder-form-edit text-center pb-6 mt-2">
+        <v-img
+        class="mx-auto"
+              :aspect-ratio="1"
+              src="@/assets/logo-title.png"
+              width="200" 
+              @click="$router.push('/')"
+            ></v-img>
+            <div class="text-title txt-black">
+                ข้อมูลส่วนตัว
+            </div>
+            <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
+    </div>
+    <FormSteper/>
+  </div>
+</template>
+<script>
+import FormSteper from './FormSteperEdit.vue';
+export default {
+    components:{
+        FormSteper
+    }
+};
+</script>
+<style>
+.hearder-form-edit {
+  background-color: #B2C573;
+  width: 100%;
+  height: auto;
+}
+</style>

src/components/form/FormMain.vue

@@ -6,7 +6,7 @@
               :aspect-ratio="1"
               src="@/assets/logo-title.png"
               width="250"
-    
+              @click="$router.push('/')"
             ></v-img>
             <div class="text-title txt-black">
                 แสดงตนเป็นผู้สมัคร

src/components/form/FormSteper.vue

@@ -4,7 +4,7 @@
 
     <div>
       <v-stepper v-model="e1">
-        <template v-slot:default="{ prev, next }">
+        <template v-slot:default="">
           <v-stepper-header>
             <template v-for="n in steps" :key="`${n}-step`">
               <v-stepper-item
@@ -34,12 +34,13 @@
               <!-- {{ form1 }} -->
               <v-form fast-fail @submit.prevent v-model="form1">
                 <v-row class="px-2">
-                  <v-col class="py-3" cols="12" md="12">
+                  <v-col class="py-3" cols="12" md="6">
                     <v-text-field
                       label="ชื่อ / Name"
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.firstName"
+                      class="my-2"
                     ></v-text-field>
 
                     <v-text-field
@@ -47,16 +48,50 @@
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.lastName"
+                      class="my-2"
                     ></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"
                       variant="solo"
                       :rules="rules.id"
                       v-model="payload.cid"
                       counter
+                      type="number"
+                      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
@@ -71,6 +106,7 @@
                           variant="solo"
                           type="number"
                           min="40"
+                          :rules="rules.age"
                           v-model.number="payload.age"
                         ></v-text-field>
                       </v-col>
@@ -84,22 +120,17 @@
                       </v-col>
                     </v-row>
 
-                    <v-text-field
+                    <v-select
                       label="ประวัติการศึกษา / Education"
                       variant="solo"
                       :rules="rules.required"
                       v-model="payload.education"
-                    ></v-text-field>
-
-                    <v-text-field
-                      label="เบอร์โทรศัพท์"
-                      variant="solo"
-                      :rules="rules.tel"
-                      v-model="payload.phone"
-                    ></v-text-field>
+                      class="my-2"
+                      :items="educateItem"
+                    ></v-select>
                   </v-col>
 
-                  <v-col class="d-none">
+                  <v-col class="">
                     <v-card
                       color="#4C884C"
                       class="pa-5 text-center h-100"
@@ -114,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"
@@ -123,20 +158,28 @@
                         prepend-icon=""
                         variant="solo-filled"
                         class="mt-5"
-                        @change="Preview_image"
+                        @change="onFileChanged($event)"
                         v-model="image"
                       ></v-file-input>
                     </v-card>
                   </v-col>
                 </v-row>
-
-                <!-- <v-btn @click.prevent="e1++" :disabled="!form1">next</v-btn> -->
-                <v-stepper-actions
+                <div class="btn-next">
+                  <v-btn
+                    @click.prevent="e1++"
+                    :disabled="disabled && !form1"
+                    variant="tonal"
+                    class="float-right"
+                    size="large"
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
+                  >
+                </div>
+                <!-- <v-stepper-actions
                   type="submit"
                   :disabled="disabled && !form1"
                   @click:next="next"
                   @click:prev="prev"
-                ></v-stepper-actions>
+                ></v-stepper-actions> -->
               </v-form>
               <!-- </v-card> -->
             </v-stepper-window-item>
@@ -150,7 +193,7 @@
               >
                 <div>ช่วงที่ 2</div>
                 <div class="text-subtitle">
-                  ข้อมูลการสมัครสว.
+                  ข้อมูลการสมัคร สว.
                   <hr class="my-3" />
                 </div>
                 <v-row class="">
@@ -161,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"
@@ -170,7 +213,7 @@
                     </v-radio-group>
                   </v-col>
                   <v-col>
-                    <v-card>
+                    <div>
                       <div class="text-sub">
                         จังหวัดที่คุณประสงค์จะลงสมัคร*
                         <span class="text-sub3">สามารถเลือก 1 อำเภอ/เขต</span>
@@ -189,6 +232,7 @@
                         </div>
                         <!-- {{ province }} -->
                         <v-autocomplete
+                          bg-color="#f6ebd5"
                           label="จังหวัด"
                           :items="provinceItems"
                           variant="solo"
@@ -199,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>
@@ -219,6 +263,7 @@
                         </div>
                         <!-- {{ payload.zone }} -->
                         <v-autocomplete
+                          bg-color="#f6ebd5"
                           label="อำเภอ / เขต"
                           :items="districtItems"
                           variant="solo"
@@ -229,14 +274,17 @@
                           :disabled="payload.province == null"
                         ></v-autocomplete>
                       </div>
-                    </v-card>
+                    </div>
                   </v-col>
                 </v-row>
                 <div class="btn-next">
-                  <v-btn @click="e1--" variant="text" class="float-left"
-                    >Previous</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-spacer></v-spacer> -->
 
                   <v-btn
                     @click="e1++"
@@ -247,7 +295,8 @@
                     "
                     variant="tonal"
                     class="float-right"
-                    >next</v-btn
+                    size="large"
+                    >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
                   >
                 </div>
                 <!-- <v-stepper-actions
@@ -266,75 +315,14 @@
               class="text-sub2"
             >
               <div>ช่วงที่ 3</div>
-              <div class="text-subtitle">
-                จุดยืนในฐานะสมาชิกรัฐสภา (สว.)
-                <hr class="my-3" />
-              </div>
               <v-row>
-                <v-col class="text-sub" cols="12">
+                <v-col class="text-subtitle" cols="12">
                   คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
+                  <hr class="my-3" />
                 </v-col>
-                <v-col cols="12" md="12">
-                  <!-- {{ opnitem1 }} -->
-                  <v-row>
-                    <v-col></v-col>
-                    <v-col>
-                      <v-row class="text-sub3 font-weight-medium">
-                        <v-col class="rot-box" cols="4">เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">ไม่เห็นด้วย</v-col
-                        ><v-col class="rot-box" cols="4">พิจารณา</v-col>
-                      </v-row>
-                    </v-col></v-row
-                  >
-                  <!-- {{ option1 }} -->
-                  <v-row
-                    v-for="(item, i) in option1"
-                    :key="i"
-                    align="center"
-                    justify="center"
-                    style="border-bottom: 1px solid #e4e4e4"
-                  >
-                    <v-col class="">
-                      {{ item.name }}
-                    </v-col>
-                    <v-col>
-                      <v-radio-group inline hide>
-                        <v-radio
-                          class="text-sub2"
-                          value="agree"
-                          @click="item.choice = 'agree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="disagree"
-                          @click="item.choice = 'disagree'"
-                        ></v-radio>
-                        <v-radio
-                          class="text-sub2"
-                          value="deciding"
-                          @click="item.choice = 'deciding'"
-                        ></v-radio>
-                      </v-radio-group>
-                    </v-col>
-                  </v-row>
-                </v-col>
+
                 <v-col>
                   <v-card>
-                    <div class="text-sub">
-                      คุณคิดเห็นอย่างไรกับประเด็นเหล่านี้? *
-                    </div>
-                    <hr class="my-3" />
-                    <v-row>
-                      <v-col></v-col>
-                      <v-col>
-                        <!-- <v-row class="text-sub3 font-weight-bold ">
-                          <v-col class="rot-box" cols="3">เห็นด้วย</v-col><v-col class="rot-box" cols="3">ไม่เห็นด้วย</v-col
-                          ><v-col class="rot-box" cols="3">พิจารณา</v-col>
-                          <v-col class="rot-box" cols="3">ไม่แสดงความเห็น</v-col>
-                        </v-row> -->
-                      </v-col></v-row
-                    >
-                    <!-- {{option2}} -->
                     <v-row
                       v-for="(item, i) in option2"
                       :key="i"
@@ -347,6 +335,12 @@
                       </v-col>
                       <v-col cols="12">
                         <v-radio-group inline class="col4">
+                          <v-radio
+                            class="text-sub2"
+                            value="strongly agree"
+                            @click="item.choice = 'strongly agree'"
+                            label="เห็นด้วยอย่างยิ่ง"
+                          ></v-radio>
                           <v-radio
                             class="text-sub2"
                             value="agree"
@@ -361,9 +355,9 @@
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
-                            value="deciding"
-                            @click="item.choice = 'deciding'"
-                            label="พิจารณา"
+                            value="strongly disagree"
+                            @click="item.choice = 'strongly disagree'"
+                            label="ไม่เห็นด้วยอย่างยิ่ง"
                           ></v-radio>
                           <v-radio
                             class="text-sub2"
@@ -376,7 +370,7 @@
                     </v-row>
                   </v-card>
                   <v-card class="mt-8">
-                    <div class="text-sub">
+                    <!-- <div class="text-sub">
                       คำอธิบายจุดยืนในฐานะสมาชิกรัฐสภาเพิ่มเติมที่ต้องการจะให้คนอื่นทราบ
                       *
                     </div>
@@ -386,7 +380,28 @@
                       variant="solo"
                       bg-color="#F2EBD1"
                       v-model="payload.vision"
-                    ></v-textarea>
+                    ></v-textarea> -->
+
+                    <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
+                      >
+                      <!-- <v-spacer></v-spacer> -->
+
+                      <v-btn
+                        @click="e1++"
+                        :disabled="!(checkOpt1.count == checkOpt1.checkcount)"
+                        variant="tonal"
+                        class="float-right"
+                        size="large"
+                        >ถัดไป <v-icon size="28">mdi-chevron-right</v-icon></v-btn
+                      >
+                    </div>
+                    <!-- {{ checkOpt1 }} -->
                   </v-card>
                 </v-col>
               </v-row>
@@ -400,24 +415,25 @@
             >
               <div>
                 <div>ช่วงที่ 4</div>
-                <div class="text-subtitle">
-                  คำถามอื่นเกี่ยวกับสว.
+                <!-- <div class="text-subtitle">
+                  คำถามอื่นเกี่ยวกับ สว.
                   <hr class="my-3" />
-                </div>
-                <v-card class="mt-8 text-sub">
+                </div> -->
+                <!-- <v-card class="mt-8 text-sub">
                   <div class="text-sub">
                     แนวทางการพิจารณาเห็นชอบผู้ดำรงตำแหน่งในองค์กรอิสระ.
                   </div>
                   <v-textarea
-                    label="เหตุผลความตั้งใจในการลงสมัคร สว. ครั้งนี้"
+                    label="เหตุผลความตั้งใจในการลงสมัคร  สว. ครั้งนี้"
                     variant="solo"
                     bg-color="#F2EBD1"
                     v-model="payload.reason"
                   ></v-textarea>
-                </v-card>
+                </v-card> -->
                 <v-card class="mt-8 text-sub">
-                  <div class="text-sub">
-                    ช่องทางการติดต่อ (สำหรับเปิดเผยต่อสาธารณะ)
+                  <div class="text-subtitle">
+                    ช่องทางการติดต่อ <span class="text-sub2"> (ถ้ามี)</span>
+                    <hr class="my-3" />
                   </div>
                   <v-row>
                     <v-col cols="12" md="12">
@@ -427,6 +443,7 @@
                         label="โทรศัพท์"
                         v-model="payload.public_phone"
                         :rules="rules.tel"
+                        class="d-none"
                       ></v-text-field
                     ></v-col>
                   </v-row>
@@ -443,7 +460,7 @@
                       ><v-text-field
                         variant="solo"
                         bg-color="#F2EBD1"
-                        label="X"
+                        label="X (twitter)"
                         v-model="payload.twitter"
                       ></v-text-field
                     ></v-col>
@@ -500,35 +517,46 @@
                     ข้าพเจ้าขอสาบานตนต่อสิ่งศักดิ์สิทธิ์ทั้งหลายที่ข้าพเจ้านับถือ
                     และ/หรือหลักการใดๆ ที่ข้าพเจ้ายึดถือว่า
                     ข้อมูลที่ข้าพเจ้าได้ให้ไว้นั้นเป็นความสัตย์จริง ทั้งสิ้น
-                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา (สว.) ในครั้งนี้
+                    และหากข้าพเจ้าได้รับเลือกเป็นสมาชิกวุฒิสภา ( สว.) ในครั้งนี้
                     จะทำหน้าที่ต่างๆ
                     โดยยึดเอาหลักการประชาธิปไตยและประชาชนเป็นที่ตั้ง
                     หากข้าพเจ้าให้ความเท็จหรือกระทำการใดอันขัดต่อหลักประชาธิปไตยและสิทธิมนุษยชน
                     ขอภยันตรายและความวิบัติทั้งปวงจงบังเกิดแก่ข้าพเจ้า โดยพลัน
                     *ยืนยันการส่งคำตอบ เพื่อประกาศตัวเป็นผู้สมัครเป็น สว.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-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 == 3 || el == 4"
+          <!-- v-show="e1 == 3 || el == 4"  -->
+          <!-- <v-stepper-actions
+            v-show="e1 == 4"
             :disabled="disabled"
             @click:next="next"
             @click:prev="prev"
-          ></v-stepper-actions>
+          ></v-stepper-actions> -->
         </template>
       </v-stepper>
     </div>
@@ -537,9 +565,13 @@
 <script>
 // import Provinces from "./provinces.json";
 // import Districts from "./districts.json";
+
 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) {
@@ -563,23 +595,42 @@ export default {
         ? "next"
         : undefined;
     },
-    //  isIdCardValid() {
-    //   return this.$refs.form.validate();
-    // },
-    // // ถ้าเลขบัตรประชาชนไม่ถูกต้องให้ปุ่ม Next ถูก disable
-    // isNextDisabled() {
-    //   return !this.isIdCardValid;
-    // }
+    checkOpt1() {
+      let dataOption = [...this.option2];
+      const filteredItems = dataOption.filter(
+        (item) => item.choice !== null && item.choice !== undefined
+      );
+
+      return { count: dataOption.length, checkcount: filteredItems.length };
+    },
   },
 
   data() {
     return {
+      loadimg: false,
+      educateItem: [
+        "ต่ำกว่าระดับประถม",
+        "ระดับประถม",
+        "ระดับมัธยมต้น",
+        "ระดับมัธยมปลาย",
+        "ระดับอาชีวศึกษา",
+        "ระดับปริญญาตรี",
+        "ระดับปริญญาโท",
+        "ระดับปริญญาเอก",
+      ],
+      load: false,
       check: false,
       form1: false,
       form2: false,
       form3: false,
       form4: false,
       rules: {
+        files: [
+          (files) =>
+            !files ||
+            !files.some((file) => file.size > 3_097_152) ||
+            "ไฟล์รูปต้องไม่เกิน 3MB!",
+        ],
         // ^[a-zA-Z0-9?><;,{}[\]\-_+=!@#$%\^&*|']*$
         space: (v) => /^[^ ]+$/.test(v) || "must not contain spaces.",
         username: (v) =>
@@ -601,7 +652,7 @@ export default {
           const pattern = /[\u0E00-\u0E7F']/;
           return pattern.test(v) || "ใช้ภาษาไทยเท่านั้น";
         },
-        required: [(value) => !!value || "Please fill out."],
+        required: [(value) => !!value || "กรุณากรอกข้อมูล"],
         password: (v) =>
           /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}$/.test(v) ||
           // /^[a-zA-Z0-9?><;.,{}[\]\-_+=!@#$%\^&*|']*$/.test(v) ||
@@ -614,18 +665,22 @@ 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 && validateThaiID(v)) ||
-            "Invalid ID card number",
+            (/^\d+$/.test(v) &&
+              parseInt(v) == v &&
+              v.length == 13 &&
+              validateThaiID(v)) ||
+            "เลขบัตรประชาชนไม่ถูกต้อง",
         ],
+        age: [(v) => parseInt(v) >= 40 || "อายุต้องมากกว่า 40 ปี"],
         email: [
           (value) => {
             const pattern =
               /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-            return pattern.test(value) || "invalid email";
+            return pattern.test(value) || "อีเมลไม่ต้องถูก";
           },
         ],
       },
@@ -650,6 +705,7 @@ export default {
         group: null,
         zone: null,
         province: null,
+        registerno: null,
         // opinions: [
         //   {
         //     opinionId: "",
@@ -660,6 +716,7 @@ export default {
 
       url: null,
       image: null,
+      file: null,
       province: null,
       district: null,
       districtItems: [],
@@ -683,7 +740,7 @@ export default {
         },
       ],
       opnitem1: [
-        { text: "สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
+        { text: " สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี", idx: 1, check: null },
         { text: "แก้ไขรัฐธรรมนูญ 2560", idx: 2, check: null },
         { text: "เขียนรัฐธรรมนูญใหม่ “ทั้งฉบับ” ", idx: 3, check: null },
         {
@@ -697,7 +754,7 @@ export default {
           check: null,
         },
         {
-          text: "แก้ไขที่มาของสว. ยกเลิกสว. ใช้ระบบสภาเดี่ยว",
+          text: "แก้ไขที่มาของ สว. ยกเลิก สว. ใช้ระบบสภาเดี่ยว",
           idx: 6,
           check: null,
         },
@@ -722,7 +779,7 @@ export default {
         },
         { text: "กระจายอำนาจ เพิ่มงบประมาณให้ท้องถิ่น", idx: 13, check: null },
         {
-          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการสว.",
+          text: "เพิ่มอำนาจให้จังหวัดจัดการตัวเอง ถ่ายทอดสดการประชุมกรรมาธิการ สว.",
           idx: 14,
         },
       ],
@@ -730,7 +787,126 @@ export default {
     };
   },
   methods: {
+    onFileChanged(event) {
+      this.loadimg = true;
+      const file = event.target.files[0];
+      this.file = file;
+      if (this.file && this.file !== null) {
+        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;
+      }
+      let request = await client.user.requestChangeImage.mutate({
+        imageName: this.file.name,
+        contentType: this.file.type,
+      });
+      let formData = createFormData(request, this.file);
+      await fetch(request.postURL, {
+        method: "POST",
+        body: formData,
+      })
+        .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 {
@@ -742,13 +918,12 @@ export default {
       if (filterOpt2.length) {
         this.payload.opinions = filterOpt2;
       }
-      // console.log("opppp", filterOpt, filterOpt2);
 
       // let payload = {
-      //   firstName: "ธรรมนูญ",
+      //   firstName: "ธรรมนูญ2",
       //   lastName: "สังขวรรณ",
       //   title: "",
-      //   cid: "1189900247580",
+      //   cid: "3180600024176",
       //   age: 60,
       //   phone: "0819444825",
       //   public_phone: "0819444885",
@@ -772,18 +947,94 @@ export default {
       //   //   },
       //   // ],
       // };
-     
-      // console.log("this.payload", this.payload);
+
       client.user.createUser
         .mutate(this.payload)
         .then((data) => {
-          console.log("data", data);
-          alert("บันทึกข้อมูลสำเร็จ");
-          this.$router.push("/upload");
-          // this.provinceItems = data;
+          // console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          if (this.file) {
+            this.uploadImage();
+          } else {
+            alert("บันทึกรูปภาพไม่สำเร็จ!");
+            this.getUser();
+          }
         })
         .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);
+        });
+    },
+    login(payload) {
+      client.user.login
+        .mutate(payload)
+        .then((data) => {
+          this.load = false;
+          this.$store.commit("setCheckLogin", false);
+          localStorage.setItem("token", data.token);
+          this.$swal
+            .fire({
+              title: "บันทึกข้อมูลสำเร็จ",
+              icon: "success",
+              timer: 3000,
+              showConfirmButton: false,
+            })
+            .then(() => {
+              this.$router.push("/");
+            });
+        })
+        .catch((error) => {
+          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);
+        });
+    },
+    getUser() {
+      client.user.getSelf
+        .mutate({})
+        .then((data) => {
+          localStorage.setItem("username", data.firstName);
+          console.log("data.image", data);
+          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) => {
+          alert("ไม่สามารถโหลดข้อมูลได้" + error.message);
           console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
         });
     },
@@ -792,7 +1043,7 @@ export default {
       if (this.image && this.image !== null) {
         const reader = new FileReader();
         reader.onload = (event) => {
-          console.log(event.target.result);
+          // console.log(event.target.result);
           this.url = event.target.result;
         };
         reader.readAsDataURL(this.image);
@@ -802,12 +1053,6 @@ export default {
       }
     },
     filterData() {
-      // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
-      // if (this.province && this.province.provinceCode) {
-      //   this.districtItems = [...Districts].filter(
-      //     (item) => item.provinceCode === this.province.provinceCode
-      //   );
-      // }
       this.payload.zone = null;
       client.info.getAllZones
         .query({ provice_id: this.payload.province })
@@ -863,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;
 }

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>

src/components/search/CardUser copy.vue

@@ -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>

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 {
@@ -203,7 +84,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -227,7 +108,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -250,7 +131,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -273,7 +154,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -296,7 +177,7 @@ export default {
               "แก้ไขรัฐธรรมนูญ 2560",
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -319,7 +200,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
         {
@@ -342,7 +223,7 @@ export default {
               "ยกเลิกการเกณฑ์ทหารแบบบังคับ",
               "นิรโทษกรรมคดีการเมือง ยกเว้นคดีมาตรา 112",
             ],
-            disagree: ["สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
+            disagree: [" สว. มีอำนาจโหวตเลือกนายกรัฐมนตรี"],
           },
         },
       ],
@@ -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>

src/components/search/CardUserGroup copy.vue

@@ -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>

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>

src/components/search/SearchMain.vue

@@ -7,11 +7,27 @@
         src="@/assets/logo-title.png"
         width="250"
       ></v-img>
-      <div class="text-title txt-black">ค้นหาผู้สมัครสว.</div>
+      <div class="text-title txt-black">ค้นหาผู้สมัคร สว.</div>
+      <div class="my-5 text-sub2 px-5">
+        สามารถค้นหาผู้แสดงตนเป็นผู้สมัคร สว. ใน จังหวัด / อำเภอ
+        ที่ตัวเองเป็นผู้แสดงตน
+      </div>
+      <div class="text-small text-red-darken-3">
+        * การแสดงผลเป็นแบบสุ่มไม่เรียงลำดับ
+      </div>
       <v-container>
-        <v-row>
-          <v-col cols="12" md="3">
-            <v-autocomplete
+        <!-- {{ checkdata }} -->
+        <v-row class="d-none" v-if="fasle">
+          <v-col cols="12" md="4">
+            <v-text-field
+              label="จังหวัด"
+              variant="solo"
+              v-model="province"
+              :value="province.name"
+              readonly
+            ></v-text-field>
+
+            <!-- <v-autocomplete
               clearable
               label="จังหวัด"
               :items="provinceItems"
@@ -23,9 +39,17 @@
               @update:modelValue="filterData"
               hide-details
             ></v-autocomplete
-          ></v-col>
-          <v-col cols="12" md="3">
-            <v-autocomplete
+          > -->
+          </v-col>
+          <v-col cols="12" md="4">
+            <v-text-field
+              label="อำเภอ / เขต"
+              variant="solo"
+              v-model="district"
+              :value="district.name"
+              readonly
+            ></v-text-field>
+            <!-- <v-autocomplete
               clearable
               label="อำเภอ / เขต"
               :items="districtItems"
@@ -37,55 +61,223 @@
               hide-details
               :disabled="province == null"
             ></v-autocomplete
-          ></v-col>
-          <v-col cols="12" md="3">
-            <v-autocomplete
+          > -->
+          </v-col>
+          <v-col cols="12" md="4">
+            <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>
+              :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="searchUser(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 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 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>
-      <div class="text-center">
-        <v-pagination
-          v-model="page"
-          :length="result.length / 10"
-          rounded="circle"
-          @click="searchUser((this.page - 1) * 10)"
-        ></v-pagination>
+      <!-- <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>
@@ -94,14 +286,30 @@
 // 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,
       result: [],
@@ -113,10 +321,103 @@ export default {
       items: [],
       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.loadname = true;
+      if (offset == 0) {
+        this.page = 1;
+      }
+      let data = {
+        offset: offset,
+      };
+    
+      if (this.group && this.group.id) {
+        data.group = this.group.id;
+      }
+
+      client.user.getAllUser
+        .query(data)
+        .then((rs) => {
+          this.nameUserItems = rs;
+          console.log(rs);
+          this.loadname = false;
+        })
+        .catch((error) => {
+          this.loadname = false;
+          alert("ไม่สามารถโหลดข้อมูลรายชื่อได้ได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    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) {
@@ -124,41 +425,65 @@ export default {
       }
       // this.offset = (this.page - 1) * 10;
       let data = {
-        offset: offset,
-        limit: 10,
-        // group: this.group,
-        // zone: this.district,
+        limit: 90,
       };
-      if (this.group) {
-        data.group = this.group;
-      }
-      if (this.district) {
-        data.zone = this.district;
-      }
-      // for (const key in data) {
-      //   if (data[key] === null) {
-      //     delete data[key];
-      //   }
+      // if (this.province) {
+      //   data.province = this.province;
+      //   // data.province = this.province;
       // }
-      console.log(data);
+
+      if (this.group) {
+        if (checkg !== "all") {
+          data.group = this.group.id;
+        }
+      }
+      // if (this.district) {
+      //   data.zone = this.district;
+      // }
+
+      if (this.nameUser) {
+        data.userId = this.nameUser;
+      }
+
+    
+
+
+        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() {
       // กรองข้อมูลอันที่สองโดยใช้ข้อมูลจากอันแรก
@@ -170,11 +495,32 @@ export default {
             this.districtItems = data;
           })
           .catch((error) => {
-            alert("ไม่สามารถโหลดข้อมูลได้");
+            // alert("ไม่สามารถโหลดข้อมูลได้");
             console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
           });
       }
     },
+    getUser(datap) {
+      client.user.getSelf
+        .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("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
   },
   mounted() {
     client.info.getAllGroups
@@ -183,7 +529,7 @@ export default {
         this.items = groups;
       })
       .catch((error) => {
-        alert("ไม่สามารถโหลดข้อมูลได้");
+        // alert("ไม่สามารถโหลดข้อมูลได้");
         console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
       });
 
@@ -191,12 +537,43 @@ export default {
       .query({})
       .then((data) => {
         this.provinceItems = 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>

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",
 };

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");

src/router/index.js

@@ -5,12 +5,20 @@ import QuestionList from "@/views/QuestionList.vue";
 import RegisterForm from "@/views/RegisterForm.vue";
 import SearchUser from "@/views/SearchUser.vue";
 import UploadImage from "@/views/UploadImage.vue";
+import LoginForm from "@/views/LoginForm.vue";
+import ProfileUser from "@/views/ProfileUser.vue";
+import CheckDetail from "@/views/CheckDetail.vue";
 const routes = [
   {
     path: "/",
     name: "HomePage",
     component: HomePage,
   },
+  {
+    path: "/login",
+    name: "LoginForm",
+    component: LoginForm,
+  },
   {
     path: "/check",
     component: CheckSurvey,
@@ -31,6 +39,14 @@ const routes = [
     path: "/upload",
     component: UploadImage,
   },
+  {
+    path: "/profile",
+    component: ProfileUser,
+  },
+  {
+    path: "/detail",
+    component: CheckDetail,
+  },
 ];
 
 const router = createRouter({

src/store/index.js

@@ -1,11 +1,49 @@
 import { createStore } from "vuex";
 
 export default createStore({
-  state: {},
-  getters: {},
-  mutations: {},
-  actions: {
-    
+  state: {
+    username:"",
+    img:"",
+    checkPage:"",
+    checkLogin:"",
   },
+  getters: {
+   
+    getUsername: (state) => {
+      return state.username
+    },
+    getCheckLogin: (state) => {
+      return state.checkLogin
+    },
+    getImg: (state) => {
+      return state.img
+    },
+    getCheckPage: (state) => {
+      return state.checkPage
+    },
+  },
+  mutations: {
+    setCheckLogin: (state, payload) => {
+     state.checkLogin = payload;
+    },
+    setUsername: (state, payload) => {
+      state.username = payload;
+    },
+    setImg: (state, payload) => {
+      state.img = payload;
+    },
+    setCheckPage: (state, payload) => {
+      state.checkPage = payload;
+    },
+  },
+  actions: {
+    setLocalStorageValue(data) {
+      localStorage.setItem("username", data);
+    },
+    // getLocalStorageValue() {
+    //   const username = localStorage.getItem("username");
+    //   // ทำสิ่งที่คุณต้องการกับค่าที่ได้จาก Local Storage
+    // },
+ },
   modules: {},
 });

src/views/CheckDetail.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="bg-yellow-page mt-5">
+    <v-container>
+      <div class="text-title text-center mt-10">
+        ตรวจเช็คคุณสมบัติ-ลักษณะต้องห้าม ของผู้ที่จะสมัคร  สว.<br />
+        <!-- <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon> -->
+      </div>
+      <div class="text-center mb-10">
+        <v-icon icon="mdi-circle" color="white" class="mt-2"></v-icon>
+      </div>
+
+      <br />
+      <v-row>
+        <v-col cols="12" md="">
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/Group 195.png"
+            height="100%"
+            class="img-checkdetail"
+          ></v-img>
+        </v-col>
+        <v-col class="text-sub2 bline" cols="12" md="">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-check-circle-outline" color="#4C884C"></v-icon>
+            คุณสมบัติของสมาชิกวุฒิสภา
+          </div>
+          <div class="text-sub">
+            สมาชิกวุฒิสภาต้องไม่ฝักใฝ่หรือยอมตนอยู่ภายใต้ของพรรคการเมืองใดๆ
+            โดยมีคุณสมบัติดังนี้
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 196.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+
+            มีสัญชาติไทยโดยการเกิด
+          </div>
+          <div class="d-flex align-center">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 197.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img
+            >มีอายุไม่ต่ำกว่า 40 ปีในวันสมัครรับเลือก
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 198.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            มีความรู้ ความเชี่ยวชาญ และประสบการณ์ หรือทำงานในด้าน
+            ที่สมัครไม่น้อยกว่าสิบปี ยกเว้น ผู้สมัครในกลุ่มสตรี ผู้สูงอายุ
+            คนพิการ
+          </div>
+          <div class="d-flex align-start">
+            <v-img
+              :aspect-ratio="1"
+              src="../assets/Group 199.png"
+              width="50"
+              inline
+              class="mr-3"
+            ></v-img>
+            ผู้สมัครต้องมีลักษณะอย่างใดอย่างหนึ่ง ดังต่อไปนี้ด้วย<br />(ก)
+            เป็นบุคคลซึ่งเกิดในอำเภอที่สมัครรับเลือก <br />(ข)
+            มีชื่ออยู่ในทะเบียนบ้านในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลา
+            ติดต่อกันไม่น้อยกว่า สองปีนับถึงวันสมัครรับเลือก <br />(ค)
+            ทำงานอยู่ในอำเภอที่สมัครรับเลือกมาแล้วเป็นเวลาติดต่อกัน
+            ไม่น้อยกว่าสองปี นับถึงวันสมัครรับเลือก <br />(ง)
+            เคยทำงานหรือเคยมีชื่ออยู่ในทะเบียนบ้านอยู่ในอำเภอที่สมัคร รับเลือก
+            แล้วแต่กรณี เป็นเวลาติดต่อกันไม่น้อยกว่าสองปี <br />(จ)
+            เคยศึกษาในสถานศึกษาที่ตั้งอยู่ในอำเภอที่สมัครรับเลือกเป็น
+            เวลาติดต่อกันไม่น้อยกว่า สองปีการศึกษา
+          </div>
+        </v-col>
+      </v-row>
+      <v-row class="my-10">
+        <v-col cols="12" md="" class="border-blue text-sub2 bline pa-5">
+          <div class="text-subtitle">
+            <v-icon icon="mdi-close-circle-outline" color="#DD3131"></v-icon>
+            ลักษณะต้องห้ามของสมาชิกวุฒิสภา
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ติดยาเสพติดให้โทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุคคลล้มละลายหรือเคยเป็นบุคคลล้มละลายทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นเจ้าของหรือผู้ถือหุ้นในกิจการหนังสือพิมพ์หรือสื่อมวลชนใด ๆ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นภิกษุ สามเณร นักพรต หรือนักบวช
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างถูกเพิกถอนสิทธิเลือกตั้งไม่ว่าคดีนั้นจะถึงที่สุดแล้วหรือไม่
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            วิกลจริตหรือจิตฟั่นเฟือนไม่สมประกอบ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ระหว่างถูกระงับการใช้สิทธิสมัครรับเลือกตั้งเป็นการชั่วคราวหรือ
+            ถูกเพิกถอนสิทธิสมัครรับเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            ต้องคำพิพากษาให้จำคุกและถูกคุมขังอยู่โดยหมายของศาล
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยได้รับโทษจำคุกโดยได้พ้นโทษมายังไม่ถึงสิบปีนับถึงวันเลือกในระดับ
+            อำเภอ เว้นแต่ ในความผิดอันได้กระทำโดยประมาทหรือความผิดลหุโทษ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยถูกสั่งให้พ้นจากราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจเพราะ
+            ทุจริตต่อหน้าที่ หรือถือว่ากระทำการทุจริตหรือประพฤติมิชอบใน วงราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาหรือคำสั่งของศาลอันถึงที่สุดให้ทรัพย์สินตกเป็น
+            ของแผ่นดินเพราะร่ำรวยผิดปกติ หรือเคยต้องคำพิพากษาอันถึงที่สุด
+            ให้ลงโทษจำคุกเพราะกระทำความผิดตามกฎหมายว่าด้วยการป้องกัน
+            และปราบปรามการทุจริต
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำการอันเป็นการทุจริตในการเลือกตั้ง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยเป็นสมาชิกวุฒิสภาตามรัฐธรรมนูญนี้
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยต้องคำพิพากษาอันถึงที่สุดว่ากระทำความผิดต่อตำแหน่งหน้าที่
+            ราชการหรือ ต่อตำแหน่งหน้าที่ในการยุติธรรม หรือกระทำความผิด
+            ตามกฎหมายว่าด้วยความผิดของพนักงานในองค์การ หรือหน่วยงาน ของรัฐ
+            หรือความผิดเกี่ยวกับทรัพย์ที่กระทำโดยทุจริตตามประมวล กฎหมายอาญา
+            ความผิดตามกฎหมายว่าด้วยการกู้ยืมเงินที่เป็น การฉ้อโกงประชาชน
+            กฎหมายว่าด้วยยาเสพติด ในความผิดฐานเป็นผู้ผลิต นำเข้า ส่งออก
+            หรือผู้ค้า กฎหมายว่าด้วยการพนันในความผิดฐานเป็นเจ้ามือ หรือเจ้าสำนัก
+            กฎหมายว่าด้วยการป้องกันและปราบปรามการค้ามนุษย์
+            หรือกฎหมายว่าด้วยการป้องกัน และปราบปรามการฟอกเงินในความผิด
+            ฐานฟอกเงิน
+          </div>
+        </v-col>
+        <v-col class="text-sub2 bline pa-5" cols="12" md="">
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            อยู่ในระหว่างต้องห้ามมิให้ดำรงตำแหน่งทางการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นพนักงานหรือลูกจ้างของหน่วยงานราชการ หน่วยงานของรัฐ หรือรัฐวิสาหกิจ
+            หรือเป็นเจ้าหน้าที่อื่นของรัฐ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นตุลาการศาลรัฐธรรมนูญ หรือผู้ดำรงตำแหน่งในองค์กรอิสระ
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลรัฐธรรมนูญวินิจฉัยว่ามีการเสนอ การแปรญัตติ
+            หรือ การกระทำด้วยประการใด ๆ ที่มีผลให้สมาชิก สภาผู้แทนราษฎร
+            สมาชิกวุฒิสภา หรือกรรมาธิการ มีส่วนไม่ว่า
+            โดยทางตรงหรือทางอ้อมในการใช้งบประมาณรายจ่าย
+          </div>
+
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เคยพ้นจากตำแหน่งเพราะศาลฎีกาหรือศาลฎีกาแผนกคดีอาญา
+            ของผู้ดำรงตำแหน่งทางการเมืองมีคำพิพากษาว่าเป็นผู้มี
+            พฤติการณ์ร่ำรวยผิดปกติ หรือกระทำความผิดฐานทุจริตต่อหน้าที่
+            หรือจงใจปฏิบัติหน้าที่หรือใช้อำนาจขัดต่อบทบัญญัติแห่ง
+            รัฐธรรมนูญหรือกฎหมาย หรือฝ่าฝืนหรือไม่ปฏิบัติ ตามมาตรฐาน
+            ทางจริยธรรมอย่างร้ายแรง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นข้าราชการ
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาผู้แทนราษฎร เว้นแต่ ได้พ้นจากการ
+            เป็นสมาชิกสภาผู้แทนราษฎร มาแล้วไม่น้อยกว่าห้าปีนับถึง
+            วันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นสมาชิกพรรคการเมือง
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นผู้ดำรงตำแหน่งใดในพรรคการเมือง เว้นแต่
+            ได้พ้นจากการดำรงตำแหน่งในพรรคการเมืองมาแล้วไม่น้อยกว่า
+            ห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นรัฐมนตรี เว้นแต่ ได้พ้นจากการเป็นรัฐมนตรีมา
+            แล้วไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นหรือเคยเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่น เว้นแต่
+            ได้พ้นจากการเป็นสมาชิกสภาท้องถิ่นหรือผู้บริหารท้องถิ่นมาแล้ว
+            ไม่น้อยกว่าห้าปีนับถึงวันสมัครรับเลือก
+          </div>
+          <div>
+            <v-icon icon=" mdi-menu-right" size="47" color="#1B76BA"></v-icon>
+            เป็นบุพการี คู่สมรส หรือบุตรของผู้ดำรงตำแหน่งสมาชิกสภา ผู้แทนราษฎร
+            สมาชิกวุฒิสภา ข้าราชการการเมืองสมาชิกสภาท้องถิ่น
+            หรือผู้บริหารท้องถิ่น ผู้สมัครรับเลือกเป็นสมาชิกวุฒิสภาในคราว
+            เดียวกัน หรือผู้ดำรงตำแหน่งใดในศาลรัฐธรรมนูญหรือองค์กรอิสระ
+          </div>
+        </v-col>
+      </v-row>
+    </v-container>
+  </div>
+</template>
+<script>
+export default {};
+</script>
+<style>
+.bline div {
+  margin: 5px 0px;
+}
+.bg-yellow-page {
+  background: #f7d278;
+}
+.border-blue {
+  border-right: 5px solid #1b76ba;
+}
+@media only screen and (min-width: 0px) and (max-width: 700px) {
+  .border-blue {
+    border-right: 0px solid #1b76ba;
+  }
+  .img-checkdetail {
+    /* height: 250px !important; */
+  }
+}
+</style>

src/views/CheckSurvey.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-
   <MainCheckVue/>
   </div>
 </template>

src/views/HomePage.vue

@@ -10,7 +10,24 @@ export default {
   components: {
     MainVote,
   },
+  mounted() {
+    // this.$emitter.on("loginUser", (val) => {
+    //   console.log("user", val);
+    //   if (val) {
+    //     this.username = localStorage.getItem("username");
+    //   }
+    // });
+    this.username = localStorage.getItem("username");
+    this.img = localStorage.getItem("img");
+    if (this.getUsername == "") {
+      this.$store.commit("setUsername", this.username);
+    }
+    if (this.getImg == ""||this.getImg == null||this.getImg == undefined) {
+      this.$store.commit("setImg", this.img);
+    }
+  },
 };
 </script>
 
-<style></style>
+<style>
+</style>

src/views/LoginForm.vue

@@ -0,0 +1,198 @@
+<template>
+  <div>
+    <div
+      n
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+    >
+      <v-img
+        class="mx-auto"
+        :aspect-ratio="1"
+        src="@/assets/logo-title.png"
+        width="250"
+      ></v-img>
+      <v-card
+        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-medium-emphasis text-subtitle" style="font-size: 18px">
+            เลขบัตรประชาชน 13 หลัก เช่น 1234567890123
+          </div>
+          <v-text-field
+            density="compact"
+            placeholder="เลขประจำตัว 13 หลัก"
+            prepend-inner-icon="mdi-card-account-details"
+            variant="outlined"
+            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">
+          Password
+  
+          <a
+            class="text-caption text-decoration-none text-blue"
+            href="#"
+            rel="noopener noreferrer"
+            target="_blank"
+          >
+            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 ? 'number' : 'password'"
+            density="compact"
+            placeholder="เบอร์โทรศัพท์"
+            prepend-inner-icon="mdi-lock-outline"
+            variant="outlined"
+            @click:append-inner="visible = !visible"
+            v-model="payload.phone"
+            :rules="rules.tel"
+            color="#4c884c"
+            hide-spin-buttons
+          ></v-text-field>
+
+          <!-- <v-card
+          class="mb-12"
+          color="surface-variant"
+          variant="tonal"
+        >
+          <v-card-text class="text-medium-emphasis text-caption">
+            Warning: 
+          </v-card-text>
+        </v-card> -->
+
+          <v-btn
+            class="mb-8"
+            size="large"
+            variant="tonal"
+            block
+            @click="login"
+            color="#4c884c"
+            :disabled="!form1"
+          >
+            Log In
+          </v-btn>
+        </v-form>
+      </v-card>
+    </div>
+    <div
+      v-if="getUsername && getCheckPage"
+      class="text-normal text-center py-10"
+    >
+      <v-icon
+        icon="mdi-alert-circle-outline"
+        size="35"
+        color="#4c884c"
+      ></v-icon>
+      คุณเข้าสู่ระบบอยู่แล้ว
+
+      <div class="mt-10">
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal ma-6"
+          height="85"
+          to="/"
+          width="300"
+        >
+          <span class="text-normal"> กลับหน้าหลัก</span>
+
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/logo.png"
+            width="85"
+            style="position: absolute; bottom: -40px; left: -30px"
+          ></v-img>
+        </v-btn>
+        <v-btn
+          elevated
+          color="#DD6C31"
+          class="text-normal ma-6"
+          height="85"
+          to="/search"
+          width="300"
+        >
+          <v-img
+            :aspect-ratio="1"
+            src="../assets/search.png"
+            width="90"
+            style="position: absolute; bottom: -45px; right: 0px"
+          ></v-img>
+          <span class="text-normal"> ค้นหาผู้สมัคร สว.</span>
+        </v-btn>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { mapGetters } from "vuex";
+import { client } from "@/utils/trpc";
+export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg", "getCheckPage"]),
+  },
+  data: () => ({
+    form1: false,
+    visible: false,
+    payload: { cid: "", phone: "" },
+    rules: {
+      tel: [
+        (v) =>
+          // (parseInt(v) == v && v.length == 10) || 'เบอร์โทรไม่ถูกต้อง',
+          /^([0-9]{10})$/.test(v) || "เบอร์โทรไม่ถูกต้อง",
+      ],
+      id: [
+        (v) =>
+          (parseInt(v) == v && v.length == 13) ||
+          "หมายเลขบัตรประชาชนไม่ถูกต้อง",
+      ],
+    },
+  }),
+  methods: {
+    getUser() {
+      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);
+          this.$router.push("/");
+        })
+        .catch((error) => {
+          alert("ไม่สามารถโหลดข้อมูลได้");
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+    login() {
+      client.user.login
+        .mutate(this.payload)
+        .then((data) => {
+          console.log("data", data);
+
+          localStorage.setItem("token", data.token);
+          //   this.uploadImage();
+          this.getUser();
+
+          // this.provinceItems = data;
+        })
+        .catch((error) => {
+          alert("ไม่สามารถเข้าสู่ระบบได้: " + error.message);
+          console.error("เกิดข้อผิดพลาดในการโหลดข้อมูล:", error);
+        });
+    },
+  },
+};
+</script>

src/views/ProfileUser.vue

@@ -0,0 +1,26 @@
+<template lang="">
+  <div>
+    <FormMain v-if="getUsername" />
+    <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
+    </div>
+  </div>
+</template>
+<script>
+import FormMain from "../components/edit/FormMainEdit.vue";
+import { mapGetters } from "vuex";
+
+export default {
+  components: { FormMain },
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
+};
+</script>
+<style lang=""></style>

src/views/RegisterForm.vue

@@ -1,12 +1,26 @@
 <template lang="">
   <div>
-    <FormMain />
+    <FormMain v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "/>
+      <!-- <div
+      v-if="
+        getUsername&&getCheckLogin"
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ คุณลงทะเบียนแสดงตัวตนแล้ว 
+    </div> -->
   </div>
 </template>
 <script>
+import { mapGetters } from "vuex";
 import FormMain from "../components/form/FormMain.vue";
 export default {
   components: { FormMain },
+  computed: {
+    ...mapGetters(["getUsername", "getImg",'getCheckLogin']),
+  },
 };
 </script>
 <style lang=""></style>

src/views/SearchUser.vue

@@ -1,11 +1,24 @@
 <template>
   <div>
-    <FormMain />
+    <FormMain  />
+    <!-- <div
+      v-if="
+        getUsername == '' || getUsername == null || getUsername == undefined
+      "
+      class="text-sub text-center py-10"
+    >
+      <v-icon icon="mdi-alert-circle-outline" size="35" color="red"></v-icon>
+      ไม่สามารถเข้าถึงได้ กรุณาเข้าสู่ระบบ
+    </div> -->
   </div>
 </template>
 <script>
 import FormMain from "../components/search/SearchMain.vue";
+import { mapGetters } from "vuex";
 export default {
+  computed: {
+    ...mapGetters(["getUsername", "getImg"]),
+  },
   components: {
     FormMain,
   },

vue.config.js

@@ -5,4 +5,5 @@ module.exports = defineConfig({
       // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
     },
   },
+  productionSourceMap: false,
 });