Updated backend

backend/main.go

@@ -157,6 +157,7 @@ func connect() {
 				"result":  array,
 				"result2": array2,
 			})
+
 		}
 	})
 
@@ -439,8 +440,61 @@ func connect() {
 			c.JSON(http.StatusOK, gin.H{
 				"result": result,
 			})
+
+		case "get-employeeid":
+			err := db.QueryRow("SELECT IFNULL(employeeid, 0) AS result FROM employee WHERE employeename = ?", data).Scan(&result)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result": result,
+			})
 		}
 	})
 
+	router.POST("/api/post-registration", func(c *gin.Context) {
+		type RegistrationData struct {
+			Data  int `json:"data"`
+			Data2 string `json:"data2"`
+      Data3 string `json:"data3"`
+		}
+		var registrationData RegistrationData
+		if err := c.ShouldBindJSON(&registrationData); err != nil {
+			c.String(http.StatusBadRequest, "Invalid request body")
+			return
+		}
+
+		c.Writer.Header().Set("X-XSS-Protection", "1; mode=block")
+		c.Writer.Header().Set("X-Content-Type-Options", "nosniff")
+		c.Writer.Header().Set("X-DNS-Prefetch-Control", "off")
+		c.Writer.Header().Set("X-Frame-Options", "DENY")
+		c.Writer.Header().Set("X-Download-Options", "noopen")
+		c.Writer.Header().Set("Referrer-Policy", "no-referrer")
+
+		dbpost, err := db.Prepare("INSERT INTO esign (esignid, employeeid, signature, image) VALUES (NULL, ?, ?, ?)")
+		if err != nil {
+			panic(err.Error())
+		}
+		defer dbpost.Close()
+
+		exec, err := dbpost.Exec(registrationData.Data, registrationData.Data2, registrationData.Data3)
+		if err != nil {
+			panic(err.Error())
+		}
+
+		affect, err := exec.RowsAffected()
+		if err != nil {
+			panic(err.Error())
+		}
+
+		if affect > 0 {
+			c.String(http.StatusOK, "Success on Registrating e-Sign")
+		} else {
+			c.String(http.StatusInternalServerError, "Failed on Registrating e-Sign")
+		}
+
+	})
+
 	router.Run(":4320")
 }

package.json

@@ -10,15 +10,20 @@
   },
   "dependencies": {
     "@kobalte/core": "^0.13.11",
+    "@solidjs-use/integrations": "^2.3.0",
     "@solidjs/router": "^0.15.3",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.18",
     "gsap": "^3.13.0",
     "nanostores": "^1.0.1",
     "ofetch": "^1.4.1",
     "sharp": "^0.34.4",
     "solid-icons": "^1.1.0",
-    "solid-js": "^1.9.9"
+    "solid-js": "^1.9.9",
+    "solidjs-use": "^2.3.0"
   },
   "devDependencies": {
+    "@types/crypto-js": "^4.2.2",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.8.3",
     "vite": "^7.1.7",

pnpm-lock.yaml

@@ -11,9 +11,18 @@ importers:
       '@kobalte/core':
         specifier: ^0.13.11
         version: 0.13.11(solid-js@1.9.9)
+      '@solidjs-use/integrations':
+        specifier: ^2.3.0
+        version: 2.3.0(qrcode@1.5.4)(sortablejs@1.15.6)
       '@solidjs/router':
         specifier: ^0.15.3
         version: 0.15.3(solid-js@1.9.9)
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
+      dayjs:
+        specifier: ^1.11.18
+        version: 1.11.18
       gsap:
         specifier: ^3.13.0
         version: 3.13.0
@@ -32,7 +41,13 @@ importers:
       solid-js:
         specifier: ^1.9.9
         version: 1.9.9
+      solidjs-use:
+        specifier: ^2.3.0
+        version: 2.3.0
     devDependencies:
+      '@types/crypto-js':
+        specifier: ^4.2.2
+        version: 4.2.2
       sass-embedded:
         specifier: ^1.93.2
         version: 1.93.2
@@ -710,6 +725,51 @@ packages:
     peerDependencies:
       solid-js: ^1.6.12
 
+  '@solidjs-use/integrations@2.3.0':
+    resolution: {integrity: sha512-o8JbddwuXcyqShjV3bOl0NSfPj91hpSpmHSOFxiF+Hj2yC4eLGfh/Qwbbue8wc0h0QWWxddUuNSvePgpllesVw==}
+    peerDependencies:
+      async-validator: '*'
+      axios: '*'
+      change-case: '*'
+      drauu: '*'
+      focus-trap: '*'
+      fuse.js: '*'
+      idb-keyval: '*'
+      jwt-decode: '*'
+      nprogress: '*'
+      qrcode: '*'
+      sortablejs: '*'
+      universal-cookie: '*'
+    peerDependenciesMeta:
+      async-validator:
+        optional: true
+      axios:
+        optional: true
+      change-case:
+        optional: true
+      drauu:
+        optional: true
+      focus-trap:
+        optional: true
+      fuse.js:
+        optional: true
+      idb-keyval:
+        optional: true
+      jwt-decode:
+        optional: true
+      nprogress:
+        optional: true
+      qrcode:
+        optional: true
+      universal-cookie:
+        optional: true
+
+  '@solidjs-use/shared@2.3.0':
+    resolution: {integrity: sha512-xuPNzZ9fwigkmYXTO+a8kaT45XQCPt6jVlyiDDYCD9NRZheRJOZWiUcVjYHzjececbWTctcY8NFdsXVyxARHKg==}
+
+  '@solidjs-use/solid-to-vue@2.3.0':
+    resolution: {integrity: sha512-I2onRwzdYl2eq20M3hcTkVIeYq4hNoBpHvRJB9yzoyXRDSyp7R2glIbvdBzpsXqnTvX7HJhB2KePfxYXFvyJxw==}
+
   '@solidjs/router@0.15.3':
     resolution: {integrity: sha512-iEbW8UKok2Oio7o6Y4VTzLj+KFCmQPGEpm1fS3xixwFBdclFVBvaQVeibl1jys4cujfAK5Kn6+uG2uBm3lxOMw==}
     peerDependencies:
@@ -730,9 +790,23 @@ packages:
   '@types/babel__traverse@7.28.0':
     resolution: {integrity: sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q==}
 
+  '@types/crypto-js@4.2.2':
+    resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
+  ansi-regex@5.0.1:
+    resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
+    engines: {node: '>=8'}
+
+  ansi-styles@4.3.0:
+    resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==}
+    engines: {node: '>=8'}
+
   babel-plugin-jsx-dom-expressions@0.40.1:
     resolution: {integrity: sha512-b4iHuirqK7RgaMzB2Lsl7MqrlDgQtVRSSazyrmx7wB3T759ggGjod5Rkok5MfHjQXhR7tRPmdwoeGPqBnW2KfA==}
     peerDependencies:
@@ -763,6 +837,10 @@ packages:
   buffer-builder@0.2.0:
     resolution: {integrity: sha512-7VPMEPuYznPSoR21NE1zvd2Xna6c/CloiZCfcMXR1Jny6PjX0N4Nsa38zcBFo/FMK+BlA+FLKbJCQ0i2yxp+Xg==}
 
+  camelcase@5.3.1:
+    resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
+    engines: {node: '>=6'}
+
   caniuse-lite@1.0.30001743:
     resolution: {integrity: sha512-e6Ojr7RV14Un7dz6ASD0aZDmQPT/A+eZU+nuTNfjqmRrmkmQlnTNWH0SKmqagx9PeW87UVqapSurtAXifmtdmw==}
 
@@ -770,15 +848,31 @@ packages:
     resolution: {integrity: sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==}
     engines: {node: '>= 14.16.0'}
 
+  cliui@6.0.0:
+    resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
+
+  color-convert@2.0.1:
+    resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
+    engines: {node: '>=7.0.0'}
+
+  color-name@1.1.4:
+    resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
+
   colorjs.io@0.5.2:
     resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
 
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  dayjs@1.11.18:
+    resolution: {integrity: sha512-zFBQ7WFRvVRhKcWoUh+ZA1g2HVgUbsZm9sbddh8EC5iv93sui8DVVz1Npvz+r6meo9VKfa8NyLWBsQK1VvIKPA==}
+
   debug@4.4.3:
     resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
     engines: {node: '>=6.0'}
@@ -788,6 +882,10 @@ packages:
       supports-color:
         optional: true
 
+  decamelize@1.2.0:
+    resolution: {integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==}
+    engines: {node: '>=0.10.0'}
+
   destr@2.0.5:
     resolution: {integrity: sha512-ugFTXCtDZunbzasqBxrK93Ik/DRYsO6S/fedkWEMKqt04xZ4csmnmwGDBAb07QWNaGMAmnTIemsYZCksjATwsA==}
 
@@ -800,9 +898,15 @@ packages:
     resolution: {integrity: sha512-vEtk+OcP7VBRtQZ1EJ3bdgzSfBjgnEalLTp5zjJrS+2Z1w2KZly4SBdac/WDU3hhsNAZ9E8SC96ME4Ey8MZ7cg==}
     engines: {node: '>=8'}
 
+  dijkstrajs@1.0.3:
+    resolution: {integrity: sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==}
+
   electron-to-chromium@1.5.222:
     resolution: {integrity: sha512-gA7psSwSwQRE60CEoLz6JBCQPIxNeuzB2nL8vE03GK/OHxlvykbLyeiumQy1iH5C2f3YbRAZpGCMT12a/9ih9w==}
 
+  emoji-regex@8.0.0:
+    resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
+
   entities@6.0.1:
     resolution: {integrity: sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==}
     engines: {node: '>=0.12'}
@@ -829,6 +933,10 @@ packages:
     resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
     engines: {node: '>=8'}
 
+  find-up@4.1.0:
+    resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
+    engines: {node: '>=8'}
+
   fsevents@2.3.3:
     resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
     engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
@@ -838,6 +946,10 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  get-caller-file@2.0.5:
+    resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
+    engines: {node: 6.* || 8.* || >= 10.*}
+
   gsap@3.13.0:
     resolution: {integrity: sha512-QL7MJ2WMjm1PHWsoFrAQH/J8wUeqZvMtHO58qdekHpCfhvhSL4gSiz6vJf5EeMP0LOn3ZCprL2ki/gjED8ghVw==}
 
@@ -855,6 +967,10 @@ packages:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
 
+  is-fullwidth-code-point@3.0.0:
+    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
+    engines: {node: '>=8'}
+
   is-glob@4.0.3:
     resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
     engines: {node: '>=0.10.0'}
@@ -880,6 +996,10 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  locate-path@5.0.0:
+    resolution: {integrity: sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==}
+    engines: {node: '>=8'}
+
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
@@ -915,9 +1035,25 @@ packages:
   ofetch@1.4.1:
     resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==}
 
+  p-limit@2.3.0:
+    resolution: {integrity: sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==}
+    engines: {node: '>=6'}
+
+  p-locate@4.1.0:
+    resolution: {integrity: sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==}
+    engines: {node: '>=8'}
+
+  p-try@2.2.0:
+    resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==}
+    engines: {node: '>=6'}
+
   parse5@7.3.0:
     resolution: {integrity: sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==}
 
+  path-exists@4.0.0:
+    resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
+    engines: {node: '>=8'}
+
   picocolors@1.1.1:
     resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==}
 
@@ -929,14 +1065,30 @@ packages:
     resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
     engines: {node: '>=12'}
 
+  pngjs@5.0.0:
+    resolution: {integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==}
+    engines: {node: '>=10.13.0'}
+
   postcss@8.5.6:
     resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
     engines: {node: ^10 || ^12 || >=14}
 
+  qrcode@1.5.4:
+    resolution: {integrity: sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+
   readdirp@4.1.2:
     resolution: {integrity: sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==}
     engines: {node: '>= 14.18.0'}
 
+  require-directory@2.1.1:
+    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
+    engines: {node: '>=0.10.0'}
+
+  require-main-filename@2.0.0:
+    resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
+
   rollup@4.52.1:
     resolution: {integrity: sha512-/vFSi3I+ya/D75UZh5GxLc/6UQ+KoKPEvL9autr1yGcaeWzXBQr1tTXmNDS4FImFCPwBAvVe7j9YzR8PQ5rfqw==}
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
@@ -1078,6 +1230,9 @@ packages:
     resolution: {integrity: sha512-RbcPH1n5cfwKrru7v7+zrZvjLurgHhGyso3HTyGtRivGWgYjbOmGuivCQaORNELjNONoK35nj28EoWul9sb1zQ==}
     engines: {node: '>=10'}
 
+  set-blocking@2.0.0:
+    resolution: {integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==}
+
   sharp@0.34.4:
     resolution: {integrity: sha512-FUH39xp3SBPnxWvd5iib1X8XY7J0K0X7d93sie9CJg2PO8/7gmg89Nve6OjItK53/MlAushNNxteBYfM6DEuoA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -1105,10 +1260,24 @@ packages:
     peerDependencies:
       solid-js: ^1.3
 
+  solidjs-use@2.3.0:
+    resolution: {integrity: sha512-ZyH2jiUSQU+5S5vd8zyvqz9X2ikhMjJhDeh/TjRzjLDJlZ1RuZaMxdM+jGsrJxo3X/xBW9kDpYNONXs6wYrQCQ==}
+
+  sortablejs@1.15.6:
+    resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==}
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
+  string-width@4.2.3:
+    resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==}
+    engines: {node: '>=8'}
+
+  strip-ansi@6.0.1:
+    resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==}
+    engines: {node: '>=8'}
+
   supports-color@8.1.1:
     resolution: {integrity: sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==}
     engines: {node: '>=10'}
@@ -1210,9 +1379,27 @@ packages:
       vite:
         optional: true
 
+  which-module@2.0.1:
+    resolution: {integrity: sha512-iBdZ57RDvnOR9AGBhML2vFZf7h8vmBjhoaZqODJBFWHVtKkDmKuHai3cx5PgVMrX5YDNp27AofYbAwctSS+vhQ==}
+
+  wrap-ansi@6.2.0:
+    resolution: {integrity: sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==}
+    engines: {node: '>=8'}
+
+  y18n@4.0.3:
+    resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
+
   yallist@3.1.1:
     resolution: {integrity: sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==}
 
+  yargs-parser@18.1.3:
+    resolution: {integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==}
+    engines: {node: '>=6'}
+
+  yargs@15.4.1:
+    resolution: {integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==}
+    engines: {node: '>=8'}
+
 snapshots:
 
   '@babel/code-frame@7.27.1':
@@ -1751,6 +1938,18 @@ snapshots:
     dependencies:
       solid-js: 1.9.9
 
+  '@solidjs-use/integrations@2.3.0(qrcode@1.5.4)(sortablejs@1.15.6)':
+    dependencies:
+      sortablejs: 1.15.6
+    optionalDependencies:
+      qrcode: 1.5.4
+
+  '@solidjs-use/shared@2.3.0':
+    dependencies:
+      '@solidjs-use/solid-to-vue': 2.3.0
+
+  '@solidjs-use/solid-to-vue@2.3.0': {}
+
   '@solidjs/router@0.15.3(solid-js@1.9.9)':
     dependencies:
       solid-js: 1.9.9
@@ -1780,8 +1979,20 @@ snapshots:
     dependencies:
       '@babel/types': 7.28.4
 
+  '@types/crypto-js@4.2.2': {}
+
   '@types/estree@1.0.8': {}
 
+  '@types/web-bluetooth@0.0.16': {}
+
+  ansi-regex@5.0.1:
+    optional: true
+
+  ansi-styles@4.3.0:
+    dependencies:
+      color-convert: 2.0.1
+    optional: true
+
   babel-plugin-jsx-dom-expressions@0.40.1(@babel/core@7.28.4):
     dependencies:
       '@babel/core': 7.28.4
@@ -1816,6 +2027,9 @@ snapshots:
 
   buffer-builder@0.2.0: {}
 
+  camelcase@5.3.1:
+    optional: true
+
   caniuse-lite@1.0.30001743: {}
 
   chokidar@4.0.3:
@@ -1823,16 +2037,38 @@ snapshots:
       readdirp: 4.1.2
     optional: true
 
+  cliui@6.0.0:
+    dependencies:
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+      wrap-ansi: 6.2.0
+    optional: true
+
+  color-convert@2.0.1:
+    dependencies:
+      color-name: 1.1.4
+    optional: true
+
+  color-name@1.1.4:
+    optional: true
+
   colorjs.io@0.5.2: {}
 
   convert-source-map@2.0.0: {}
 
+  crypto-js@4.2.0: {}
+
   csstype@3.1.3: {}
 
+  dayjs@1.11.18: {}
+
   debug@4.4.3:
     dependencies:
       ms: 2.1.3
 
+  decamelize@1.2.0:
+    optional: true
+
   destr@2.0.5: {}
 
   detect-libc@1.0.3:
@@ -1840,8 +2076,14 @@ snapshots:
 
   detect-libc@2.1.0: {}
 
+  dijkstrajs@1.0.3:
+    optional: true
+
   electron-to-chromium@1.5.222: {}
 
+  emoji-regex@8.0.0:
+    optional: true
+
   entities@6.0.1: {}
 
   esbuild@0.25.10:
@@ -1884,11 +2126,20 @@ snapshots:
       to-regex-range: 5.0.1
     optional: true
 
+  find-up@4.1.0:
+    dependencies:
+      locate-path: 5.0.0
+      path-exists: 4.0.0
+    optional: true
+
   fsevents@2.3.3:
     optional: true
 
   gensync@1.0.0-beta.2: {}
 
+  get-caller-file@2.0.5:
+    optional: true
+
   gsap@3.13.0: {}
 
   has-flag@4.0.0: {}
@@ -1900,6 +2151,9 @@ snapshots:
   is-extglob@2.1.1:
     optional: true
 
+  is-fullwidth-code-point@3.0.0:
+    optional: true
+
   is-glob@4.0.3:
     dependencies:
       is-extglob: 2.1.1
@@ -1916,6 +2170,11 @@ snapshots:
 
   json5@2.2.3: {}
 
+  locate-path@5.0.0:
+    dependencies:
+      p-locate: 4.1.0
+    optional: true
+
   lru-cache@5.1.1:
     dependencies:
       yallist: 3.1.1
@@ -1949,10 +2208,26 @@ snapshots:
       node-fetch-native: 1.6.7
       ufo: 1.6.1
 
+  p-limit@2.3.0:
+    dependencies:
+      p-try: 2.2.0
+    optional: true
+
+  p-locate@4.1.0:
+    dependencies:
+      p-limit: 2.3.0
+    optional: true
+
+  p-try@2.2.0:
+    optional: true
+
   parse5@7.3.0:
     dependencies:
       entities: 6.0.1
 
+  path-exists@4.0.0:
+    optional: true
+
   picocolors@1.1.1: {}
 
   picomatch@2.3.1:
@@ -1960,15 +2235,31 @@ snapshots:
 
   picomatch@4.0.3: {}
 
+  pngjs@5.0.0:
+    optional: true
+
   postcss@8.5.6:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  qrcode@1.5.4:
+    dependencies:
+      dijkstrajs: 1.0.3
+      pngjs: 5.0.0
+      yargs: 15.4.1
+    optional: true
+
   readdirp@4.1.2:
     optional: true
 
+  require-directory@2.1.1:
+    optional: true
+
+  require-main-filename@2.0.0:
+    optional: true
+
   rollup@4.52.1:
     dependencies:
       '@types/estree': 1.0.8
@@ -2108,6 +2399,9 @@ snapshots:
 
   seroval@1.3.2: {}
 
+  set-blocking@2.0.0:
+    optional: true
+
   sharp@0.34.4:
     dependencies:
       '@img/colour': 1.0.0
@@ -2166,8 +2460,27 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  solidjs-use@2.3.0:
+    dependencies:
+      '@solidjs-use/shared': 2.3.0
+      '@types/web-bluetooth': 0.0.16
+
+  sortablejs@1.15.6: {}
+
   source-map-js@1.2.1: {}
 
+  string-width@4.2.3:
+    dependencies:
+      emoji-regex: 8.0.0
+      is-fullwidth-code-point: 3.0.0
+      strip-ansi: 6.0.1
+    optional: true
+
+  strip-ansi@6.0.1:
+    dependencies:
+      ansi-regex: 5.0.1
+    optional: true
+
   supports-color@8.1.1:
     dependencies:
       has-flag: 4.0.0
@@ -2234,4 +2547,38 @@ snapshots:
     optionalDependencies:
       vite: 7.1.7(sass-embedded@1.93.2)(sass@1.93.2)
 
+  which-module@2.0.1:
+    optional: true
+
+  wrap-ansi@6.2.0:
+    dependencies:
+      ansi-styles: 4.3.0
+      string-width: 4.2.3
+      strip-ansi: 6.0.1
+    optional: true
+
+  y18n@4.0.3:
+    optional: true
+
   yallist@3.1.1: {}
+
+  yargs-parser@18.1.3:
+    dependencies:
+      camelcase: 5.3.1
+      decamelize: 1.2.0
+    optional: true
+
+  yargs@15.4.1:
+    dependencies:
+      cliui: 6.0.0
+      decamelize: 1.2.0
+      find-up: 4.1.0
+      get-caller-file: 2.0.5
+      require-directory: 2.1.1
+      require-main-filename: 2.0.0
+      set-blocking: 2.0.0
+      string-width: 4.2.3
+      which-module: 2.0.1
+      y18n: 4.0.3
+      yargs-parser: 18.1.3
+    optional: true

src/components/Modal/Modal.tsx

@@ -1,27 +1,25 @@
 import './Modal.sass'
 import { type JSXElement, Show } from 'solid-js'
 import gsap from 'gsap'
-import Button from '../Button/Button'
 
 interface Props {
   children: JSXElement
   background?: string
   color?: string
   border?: string
+  trigger: boolean
 }
 
 export default (props: Props) => {
   let dialogRef!: HTMLDivElement
 
-  // const [open, setOpen] = createSignal(false)
+  // const openHandler = () => {
-
+  //   gsap.to(dialogRef, {
-  const openHandler = () => {
+  //     duration: 0,
-    gsap.to(dialogRef, {
+  //     display: 'flex',
-      duration: 0,
+  //     ease: 'power2.out',
-      display: 'flex',
+  //   })
-      ease: 'power2.out',
+  // }
-    })
-  }
 
   const closeHandler = () => {
     gsap.to(dialogRef, {
@@ -33,20 +31,21 @@ export default (props: Props) => {
 
   return (
     <>
-      <Button label="OpenDialog" onClick={openHandler}></Button>
+      <Show when={props.trigger}>
-      <div class="modal" ref={dialogRef} onClick={closeHandler}>
+        <div class="modal" ref={dialogRef} onClick={closeHandler}>
-        <Show when={props.border}>
+          <Show when={props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; border: 2px solid ${props.border}`}>
-            {props.children}
+              {props.children}
-          </div>
+            </div>
-        </Show>
+          </Show>
 
-        <Show when={!props.border}>
+          <Show when={!props.border}>
-          <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
+            <div class="modal__content" style={`background-color: ${props.background}; color: ${props.color}; box-shadow: 5px 4px 6px rgba(0, 0, 0, 0.5)`}>
-            {props.children}
+              {props.children}
-          </div>
+            </div>
-        </Show>
+          </Show>
-      </div>
+        </div>
+      </Show>
     </>
   )
 }

src/components/Page/Page.tsx

@@ -10,10 +10,10 @@ export default (props: Props) => {
   return (
     <>
       <Show when={props.alignment}>
-        <main class={props.alignment}>{props.children}</main>
+        <div class={props.alignment}>{props.children}</div>
       </Show>
       <Show when={!props.alignment}>
-        <main class="page">{props.children}</main>
+        <div class="page">{props.children}</div>
       </Show>
     </>
   )

src/components/QR/QR.tsx

@@ -0,0 +1,19 @@
+// @ts-ignore
+import { useQRCode } from '@solidjs-use/integrations/useQRCode'
+
+interface Props {
+  value: string
+  width?: number
+}
+
+export default (props: Props) => {
+  const qrcode = useQRCode(props.value)
+
+  return (
+    <>
+      <section>
+        <img src={qrcode()} alt="QR Code" style={`width: ${props.width || 'auto' }rem`}/>
+      </section>
+    </>
+  )
+}

src/components/index.ts

@@ -17,6 +17,7 @@ export { default as Modal } from './Modal/Modal'
 export { default as Table } from './Table/Table'
 export { default as Combobox } from './Combobox/Combobox'
 export { default as File } from './File/File'
+export { default as QR } from './QR/QR'
 
 // export { default as OptimizeBackground } from './Optimizers/OptimizeBackground'
 // export { default as OptimizeImage } from './Optimizers/OptimizeImage'

src/pages/RegisterPage/Register.tsx

@@ -1,14 +1,49 @@
 import './Register.sass'
-import { Logo, Link, Page, Row, Padding, Form, Combobox, Box, File } from '../../components'
+import { Logo, Link, Page, Row, Padding, Combobox, Box, File, Button, Modal, Column } from '../../components'
 import { IoChevronBack } from 'solid-icons/io'
 import { Show, createSignal } from 'solid-js'
+import { ofetch } from 'ofetch'
+import { SHA3 } from 'crypto-js'
 
 export default () => {
+  const API = import.meta.env.VITE_BACKEND
   const assessors = JSON.parse(sessionStorage.getItem('assessors')!)
   const roles = ['ASSESSOR', 'APPROVER']
 
   const [role, setRole] = createSignal('')
   const [name, setName] = createSignal('')
+  const [id, setId] = createSignal(0)
+  const [signature, setSignature] = createSignal('')
+  const [saved, setSaved] = createSignal(false)
+
+  const getEmployeeId = async (val: string) => {
+    try {
+      setName(val)
+      const id = await ofetch(API + 'get-employeeid/' + val, { parseResponse: JSON.parse })
+      setId(id.result)
+    } catch {
+      setId(0)
+    }
+  }
+
+  const generateSignature = () => {
+    const hash = SHA3(id().toString())
+    setSignature(hash.toString())
+
+    try {
+      register()
+      setSaved(true)
+    } catch {
+      setSaved(false)
+    }
+  }
+
+  const register = async () => {
+    await ofetch(API + 'post-registration', {
+      method: 'POST',
+      body: { data: id(), data2: signature() },
+    })
+  }
 
   return (
     <>
@@ -36,27 +71,49 @@ export default () => {
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
-                <Form>
+                <h4>Role</h4>
-                  <h4>Role</h4>
+                <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
-                  <Combobox options={roles} placeholder="Select your role" value={role()} onChange={setRole} />
+                <Show when={role() === 'ASSESSOR'}>
-                  <Show when={role() === 'ASSESSOR'}>
+                  <h4>List of Assessors</h4>
-                    <h4>List of Assessors</h4>
+                  <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={(val) => getEmployeeId(val!)} />
-                    <Combobox options={assessors} placeholder="Select your name" value={name()} onChange={setName} />
+                  <h4>Upload Signature</h4>
-                    <h4>Upload Signature</h4>
+                  <File />
-                    <File />
+
-                  </Show>
+                  <Padding top={2} bottom={0} left={0} right={0}>
-                  <Show when={role() === 'APPROVER'}>
+                    <Row>
-                    <h4>Name of Approver</h4>
+                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
-                    <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
+                    </Row>
-                    <h4>Upload Signature</h4>
+                  </Padding>
-                    <File />
+                </Show>
-                  </Show>
+                <Show when={role() === 'APPROVER'}>
-                </Form>
+                  <h4>Name of Approver</h4>
+                  <span class="approver-name">ARCH. KHASHAYAR L. TOGHYANI</span>
+                  <h4>Upload Signature</h4>
+                  <File />
+
+                  <Padding top={2} bottom={0} left={0} right={0}>
+                    <Row>
+                      <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} />
+                    </Row>
+                  </Padding>
+                </Show>
               </Box>
             </Row>
           </Padding>
         </Padding>
       </Page>
+
+      <Modal trigger={!saved()} background="#0f1720f3" color="#ffffffe4">
+        <Padding top={1} bottom={1} left={4} right={4}>
+          <Column>
+            <Row>
+              <span>e-Sign Registration Complete</span>
+            </Row>
+
+            <span>e-Sign Registration Complete</span>
+          </Column>
+        </Padding>
+      </Modal>
     </>
   )
 }