Updated main page

backend/main.go

@@ -651,6 +651,57 @@ func connect() {
 				"result": result,
 			})
 
+		case "get-printdetails-electrical":
+			var result2, result3, result4, result5, result6, result7, result8, result9 string
+			array := []string{}
+			array2 := []string{}
+			array3 := []string{}
+			array4 := []string{}
+			array5 := []string{}
+			array6 := []string{}
+			array7 := []string{}
+			array8 := []string{}
+			array9 := []string{}
+
+			results, err := db.Query(`SELECT DISTINCT IFNULL(el.electricalNo, '') AS result, IFNULL(op.opDate, '') AS result2, IFNULL(el.locationofinstallation, '') AS result3, IFNULL(occ.occupancy, '') AS result4, IFNULL(u.occupancyoruse, '') AS result5, IFNULL(el.noofUnits, '') AS result6, IFNULL(e.employeename, '') AS result7, IF(cu.firstName IS NULL OR cu.firstName = '', cu.lastName, CONCAT(cu.firstName, ' ', IF(cu.middleInitial IS NULL OR cu.middleInitial = '', '', CONCAT(cu.middleInitial, '. ')), cu.lastName) ) AS result8, IFNULL(op.optn, '') AS result9 
+                          FROM electrical el, electrical_orderofpayment_new op, ref_occupancy occ, ref_elec_occupancy u, customer cu, employee e 
+                          WHERE el.customerid = cu.customerid AND el.ref_elec_occupancyid = u.ref_elec_occupancyid AND u.ref_occupancyid = occ.ref_occupancyid AND op.assessedbyid = e.employeeid 
+                          AND el.electricalid = op.electricalid AND op.is_approve = 0 AND op.for_approval = 1 AND op.is_release = 0 AND is_paid = 0 AND popstransmitted = 0 AND el.electricalid = ?`, data)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+				return
+			}
+			for results.Next() {
+				err = results.Scan(&result, &result2, &result3, &result4, &result5, &result6, &result7, &result8, &result9)
+				if err != nil {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+					return
+				}
+				array = append(array, result)
+				array2 = append(array2, result2)
+				array3 = append(array3, result3)
+				array4 = append(array4, result4)
+				array5 = append(array5, result5)
+				array6 = append(array6, result6)
+				array7 = append(array7, result7)
+				array8 = append(array8, result8)
+				array9 = append(array9, result9)
+
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result":  array,
+				"result2": array2,
+				"result3": array3,
+				"result4": array4,
+				"result5": array5,
+				"result6": array6,
+				"result7": array7,
+				"result8": array8,
+				"result9": array9,
+			})
+
 		}
 	})
 
@@ -772,7 +823,7 @@ func connect() {
 
 	})
 
-	router.POST("/api/update-op-electrical", func(c *gin.Context) {
+	router.POST("/api/update-opapproved-electrical", func(c *gin.Context) {
 		type UpdateOpData struct {
 			Data int `json:"data"`
 		}
@@ -806,9 +857,49 @@ func connect() {
 		}
 
 		if affect > 0 {
-			c.String(http.StatusOK, "Success on Updating Order of Payment")
+			c.String(http.StatusOK, "Success on Updating Order of Payment for Approval")
 		} else {
-			c.String(http.StatusInternalServerError, "Failed on Updating Order of Payment")
+			c.String(http.StatusInternalServerError, "Failed on Updating Order of Payment for Approval")
+		}
+	})
+
+	router.POST("/api/update-opprinted-electrical", func(c *gin.Context) {
+		type UpdateOpData struct {
+			Data int `json:"data"`
+		}
+		var updateOpData UpdateOpData
+		if err := c.ShouldBindJSON(&updateOpData); 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("UPDATE electrical_orderofpayment_new SET popstransmitted = 1 WHERE electricalid = ? AND for_approval = 1 AND is_release = 0 AND is_paid = 0 AND is_approve = 1")
+		if err != nil {
+			panic(err.Error())
+		}
+		defer dbpost.Close()
+
+		exec, err := dbpost.Exec(updateOpData.Data)
+		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 Updating Order of Payment for Printing")
+		} else {
+			c.String(http.StatusInternalServerError, "Failed on Updating Order of Payment for Printing")
 		}
 	})
 

package.json

@@ -12,11 +12,13 @@
     "@kobalte/core": "^0.13.11",
     "@solidjs-use/integrations": "^2.3.0",
     "@solidjs/router": "^0.15.3",
+    "consola": "^3.4.2",
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.18",
     "gsap": "^3.13.0",
     "jimp": "^1.6.0",
     "jspdf": "^3.0.3",
+    "jspdf-barcode": "^1.0.2",
     "nanostores": "^1.0.1",
     "ofetch": "^1.4.1",
     "openssl-nodejs": "^1.0.5",
@@ -27,12 +29,12 @@
     "solidjs-use": "^2.3.0"
   },
   "devDependencies": {
-    "@nanostores/solid": "^1.1.1",
     "@types/crypto-js": "^4.2.2",
-    "@types/node": "^24.6.2",
+    "@types/node": "^24.7.0",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.8.3",
     "vite": "^7.1.9",
+    "vite-plugin-compression2": "^2.2.1",
     "vite-plugin-solid": "^2.11.9"
   }
 }

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@solidjs/router':
         specifier: ^0.15.3
         version: 0.15.3(solid-js@1.9.9)
+      consola:
+        specifier: ^3.4.2
+        version: 3.4.2
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -32,6 +35,9 @@ importers:
       jspdf:
         specifier: ^3.0.3
         version: 3.0.3
+      jspdf-barcode:
+        specifier: ^1.0.2
+        version: 1.0.2(jspdf@3.0.3)
       nanostores:
         specifier: ^1.0.1
         version: 1.0.1
@@ -57,15 +63,12 @@ importers:
         specifier: ^2.3.0
         version: 2.3.0
     devDependencies:
-      '@nanostores/solid':
-        specifier: ^1.1.1
-        version: 1.1.1(nanostores@1.0.1)(solid-js@1.9.9)
       '@types/crypto-js':
         specifier: ^4.2.2
         version: 4.2.2
       '@types/node':
-        specifier: ^24.6.2
-        version: 24.6.2
+        specifier: ^24.7.0
+        version: 24.7.0
       sass-embedded:
         specifier: ^1.93.2
         version: 1.93.2
@@ -74,10 +77,13 @@ importers:
         version: 5.8.3
       vite:
         specifier: ^7.1.9
-        version: 7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2)
+        version: 7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2)
+      vite-plugin-compression2:
+        specifier: ^2.2.1
+        version: 2.2.1(rollup@4.52.1)
       vite-plugin-solid:
         specifier: ^2.11.9
-        version: 2.11.9(solid-js@1.9.9)(vite@7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2))
+        version: 2.11.9(solid-js@1.9.9)(vite@7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2))
 
 packages:
 
@@ -612,12 +618,6 @@ packages:
     peerDependencies:
       solid-js: ^1.8.8
 
-  '@nanostores/solid@1.1.1':
-    resolution: {integrity: sha512-gF0Eat1/c3hOaklBMSVoEjcNzJc5zGk4VSg94H9LPmXYww1pxgr7zylpi3jjyxRu24c8+aYNkmRWzolAwzSA1A==}
-    peerDependencies:
-      nanostores: '>=0.9.0 <2.0.0'
-      solid-js: ^1.6.0
-
   '@parcel/watcher-android-arm64@2.5.1':
     resolution: {integrity: sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==}
     engines: {node: '>= 10.0.0'}
@@ -700,6 +700,15 @@ packages:
     resolution: {integrity: sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==}
     engines: {node: '>= 10.0.0'}
 
+  '@rollup/pluginutils@5.3.0':
+    resolution: {integrity: sha512-5EdhGZtnu3V88ces7s53hhfK5KSASnJZv8Lulpc04cWO3REESroJXg73DFsOmgbU2BhwV0E20bu2IDZb3VKW4Q==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+
   '@rollup/rollup-android-arm-eabi@4.52.1':
     resolution: {integrity: sha512-sifE8uDpDvortUdi3xFevQ9WN5L3orrglg7iO/DhIpSVCwJOxBs9k9JzCC76KEZkLY4UkHWj+KESdFhlsNmDLw==}
     cpu: [arm]
@@ -942,8 +951,8 @@ packages:
   '@types/node@16.9.1':
     resolution: {integrity: sha512-QpLcX9ZSsq3YYUUnD3nFDY8H7wctAhQj/TFKL8Ya8v5fMm3CFXxo8zStsLAl780ltoYoo1WvKUVGBQK+1ifr7g==}
 
-  '@types/node@24.6.2':
-    resolution: {integrity: sha512-d2L25Y4j+W3ZlNAeMKcy7yDsK425ibcAOO2t7aPTz6gNMH0z2GThtwENCDc0d/Pw9wgyRqE5Px1wkV7naz8ang==}
+  '@types/node@24.7.0':
+    resolution: {integrity: sha512-IbKooQVqUBrlzWTi79E8Fw78l8k1RNtlDDNWsFZs7XonuQSJ8oNYfEeclhprUldXISRMLzBpILuKgPlIxm+/Yw==}
 
   '@types/pako@2.0.4':
     resolution: {integrity: sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw==}
@@ -1047,6 +1056,10 @@ packages:
   colorjs.io@0.5.2:
     resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==}
 
+  consola@3.4.2:
+    resolution: {integrity: sha512-5IKcdX0nnYavi6G7TtOhwkYzyjfJlatbjMjuLSfE2kYT5pMDOilZ4OvMhi637CcDICTmz3wARPoyhqyX1Y+XvA==}
+    engines: {node: ^14.18.0 || >=16.10.0}
+
   convert-source-map@2.0.0:
     resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
 
@@ -1115,6 +1128,9 @@ packages:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
 
+  estree-walker@2.0.2:
+    resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
+
   event-target-shim@5.0.1:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
@@ -1238,6 +1254,11 @@ packages:
     engines: {node: '>=6'}
     hasBin: true
 
+  jspdf-barcode@1.0.2:
+    resolution: {integrity: sha512-NZUsAeaEQ55R/ggKiEQoVFowAqxUWS39nlTPVWG1ks5A32JkH+bekoVlC/76WISYy1LzV0fTbmSCxsFt1Da4AA==}
+    peerDependencies:
+      jspdf: '>=2.0.0'
+
   jspdf@3.0.3:
     resolution: {integrity: sha512-eURjAyz5iX1H8BOYAfzvdPfIKK53V7mCpBTe7Kb16PaM8JSXEcUQNBQaiWMI8wY5RvNOPj4GccMjTlfwRBd+oQ==}
 
@@ -1637,6 +1658,9 @@ packages:
     resolution: {integrity: sha512-GTt8rSKje5FilG+wEdfCkOcLL7LWqpMlr2c3LRuKt/YXxcJ52aGSbGBAdI4L3aaqfrBt6y711El53ItyH1NWzg==}
     engines: {node: '>=16.0.0'}
 
+  tar-mini@0.2.0:
+    resolution: {integrity: sha512-+qfUHz700DWnRutdUsxRRVZ38G1Qr27OetwaMYTdg8hcPxf46U0S1Zf76dQMWRBmusOt2ZCK5kbIaiLkoGO7WQ==}
+
   text-segmentation@1.0.3:
     resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
 
@@ -1666,8 +1690,8 @@ packages:
   ufo@1.6.1:
     resolution: {integrity: sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA==}
 
-  undici-types@7.13.0:
-    resolution: {integrity: sha512-Ov2Rr9Sx+fRgagJ5AX0qvItZG/JKKoBRAVITs1zk7IqZGTJUwgUr7qoYBpWwakpWilTZFM98rG/AFRocu10iIQ==}
+  undici-types@7.14.0:
+    resolution: {integrity: sha512-QQiYxHuyZ9gQUIrmPo3IA+hUl4KYk8uSA7cHrcKd/l3p1OTpZcM0Tbp9x7FAtXdAYhlasd60ncPpgu6ihG6TOA==}
 
   update-browserslist-db@1.1.3:
     resolution: {integrity: sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw==}
@@ -1687,6 +1711,9 @@ packages:
   varint@6.0.0:
     resolution: {integrity: sha512-cXEIW6cfr15lFv563k4GuVuW/fiwjknytD37jIOLSdSWuOI6WnO/oKwmP2FQTU2l01LP8/M5TSAJpzUaGe3uWg==}
 
+  vite-plugin-compression2@2.2.1:
+    resolution: {integrity: sha512-LMDkgheJaFBmb8cB8ymgUpXHXnd3m4kmjEInvp59fOZMSaT/9oDUtqpO0ihr4ExGsnWfYcRe13/TNN3BEk2t/g==}
+
   vite-plugin-solid@2.11.9:
     resolution: {integrity: sha512-bTA6p+bspXZsuulSd2y6aTzegF8xGaJYcq1Uyh/mv+W4DQtzCgL9nN6n2fsTaxp/dMk+ZHHKgGndlNeooqHLKw==}
     peerDependencies:
@@ -2326,11 +2353,6 @@ snapshots:
       '@solid-primitives/utils': 6.3.2(solid-js@1.9.9)
       solid-js: 1.9.9
 
-  '@nanostores/solid@1.1.1(nanostores@1.0.1)(solid-js@1.9.9)':
-    dependencies:
-      nanostores: 1.0.1
-      solid-js: 1.9.9
-
   '@parcel/watcher-android-arm64@2.5.1':
     optional: true
 
@@ -2392,6 +2414,14 @@ snapshots:
       '@parcel/watcher-win32-x64': 2.5.1
     optional: true
 
+  '@rollup/pluginutils@5.3.0(rollup@4.52.1)':
+    dependencies:
+      '@types/estree': 1.0.8
+      estree-walker: 2.0.2
+      picomatch: 4.0.3
+    optionalDependencies:
+      rollup: 4.52.1
+
   '@rollup/rollup-android-arm-eabi@4.52.1':
     optional: true
 
@@ -2566,9 +2596,9 @@ snapshots:
 
   '@types/node@16.9.1': {}
 
-  '@types/node@24.6.2':
+  '@types/node@24.7.0':
     dependencies:
-      undici-types: 7.13.0
+      undici-types: 7.14.0
 
   '@types/pako@2.0.4': {}
 
@@ -2681,6 +2711,8 @@ snapshots:
 
   colorjs.io@0.5.2: {}
 
+  consola@3.4.2: {}
+
   convert-source-map@2.0.0: {}
 
   core-js@3.45.1:
@@ -2757,6 +2789,8 @@ snapshots:
 
   escalade@3.2.0: {}
 
+  estree-walker@2.0.2: {}
+
   event-target-shim@5.0.1: {}
 
   events@3.3.0: {}
@@ -2883,6 +2917,10 @@ snapshots:
 
   json5@2.2.3: {}
 
+  jspdf-barcode@1.0.2(jspdf@3.0.3):
+    dependencies:
+      jspdf: 3.0.3
+
   jspdf@3.0.3:
     dependencies:
       '@babel/runtime': 7.28.4
@@ -3307,6 +3345,8 @@ snapshots:
 
   sync-message-port@1.1.3: {}
 
+  tar-mini@0.2.0: {}
+
   text-segmentation@1.0.3:
     dependencies:
       utrie: 1.0.2
@@ -3335,7 +3375,7 @@ snapshots:
 
   ufo@1.6.1: {}
 
-  undici-types@7.13.0: {}
+  undici-types@7.14.0: {}
 
   update-browserslist-db@1.1.3(browserslist@4.26.2):
     dependencies:
@@ -3356,7 +3396,14 @@ snapshots:
 
   varint@6.0.0: {}
 
-  vite-plugin-solid@2.11.9(solid-js@1.9.9)(vite@7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2)):
+  vite-plugin-compression2@2.2.1(rollup@4.52.1):
+    dependencies:
+      '@rollup/pluginutils': 5.3.0(rollup@4.52.1)
+      tar-mini: 0.2.0
+    transitivePeerDependencies:
+      - rollup
+
+  vite-plugin-solid@2.11.9(solid-js@1.9.9)(vite@7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2)):
     dependencies:
       '@babel/core': 7.28.4
       '@types/babel__core': 7.20.5
@@ -3364,12 +3411,12 @@ snapshots:
       merge-anything: 5.1.7
       solid-js: 1.9.9
       solid-refresh: 0.6.3(solid-js@1.9.9)
-      vite: 7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2)
-      vitefu: 1.1.1(vite@7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2))
+      vite: 7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2)
+      vitefu: 1.1.1(vite@7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2))
     transitivePeerDependencies:
       - supports-color
 
-  vite@7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2):
+  vite@7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2):
     dependencies:
       esbuild: 0.25.10
       fdir: 6.5.0(picomatch@4.0.3)
@@ -3378,14 +3425,14 @@ snapshots:
       rollup: 4.52.1
       tinyglobby: 0.2.15
     optionalDependencies:
-      '@types/node': 24.6.2
+      '@types/node': 24.7.0
       fsevents: 2.3.3
       sass: 1.93.2
       sass-embedded: 1.93.2
 
-  vitefu@1.1.1(vite@7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2)):
+  vitefu@1.1.1(vite@7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2)):
     optionalDependencies:
-      vite: 7.1.9(@types/node@24.6.2)(sass-embedded@1.93.2)(sass@1.93.2)
+      vite: 7.1.9(@types/node@24.7.0)(sass-embedded@1.93.2)(sass@1.93.2)
 
   webworkify@1.5.0: {}
 

src/pages/AssessorPage/Assessor.tsx

@@ -1,12 +1,12 @@
 import './Assessor.sass'
-import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link } from '../../components'
+import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link, Modal, Column, Box } from '../../components'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal, Show } from 'solid-js'
-// import dayjs from 'dayjs'
-// import { checkConnection, createPdf } from '../../utils/functions'
-// import { FaSolidThumbsUp } from 'solid-icons/fa'
+import dayjs from 'dayjs'
+import { checkConnection, createPdf } from '../../utils/functions'
+import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName, _employeeId } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
 
@@ -22,23 +22,23 @@ export default () => {
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
   const [applicationId, setApplicationId] = createSignal(0)
-  const [assessorId, setAssessorId] = createSignal(0)
+  // const [assessorId, setAssessorId] = createSignal(0)
 
-  const [gflgu, setGflgu] = createSignal<number[]>([])
-  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
-  const [tfbo, setTfbo] = createSignal<number[]>([])
+  // const [gflgu, setGflgu] = createSignal<number[]>([])
+  // const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
+  // const [tfbo, setTfbo] = createSignal<number[]>([])
 
-  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
-  const [amountList, setAmountList] = createSignal<string[]>([])
-  const [dateOpList, setDateOpList] = createSignal<string[]>([])
+  // const [descriptionList, setDescriptionList] = createSignal<string[]>([])
+  // const [amountList, setAmountList] = createSignal<string[]>([])
+  // const [dateOpList, setDateOpList] = createSignal<string[]>([])
 
   const [applicationList, setApplicationList] = createSignal<string[]>([])
   const [nameList, setNameList] = createSignal<string[]>([])
 
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
-  const [approved, setApproved] = createSignal(false)
-  const [approvedApplication, setApprovedApplication] = createSignal('')
+  const [printed, setPrinted] = createSignal(false)
+  const [printedApplication, setPrintedApplication] = createSignal('')
 
   const [isBuilding, setIsBuilding] = createSignal(false)
   const [isOccupancy, setIsOccupancy] = createSignal(false)
@@ -58,7 +58,39 @@ export default () => {
     }
   }
 
+  // const calculateAmounts = () => {
+  //   const amounts: string[] = amountList()
+  //   let gflguList: number[] = []
+  //   let gfdpwhList: number[] = []
+  //   let tfboList: number[] = []
+
+  //   for (let i = 0; i < amounts.length; i++) {
+  //     const gflgu = parseFloat(amounts[i]) * 0.8
+  //     const gfdpwh = parseFloat(amounts[i]) * 0.05
+  //     const tfbo = parseFloat(amounts[i]) * 0.15
+
+  //     const roundedGflgu = parseFloat(gflgu.toFixed(2))
+  //     const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
+  //     const roundedTfbo = parseFloat(tfbo.toFixed(2))
+
+  //     gflguList.push(roundedGflgu)
+  //     gfdpwhList.push(roundedGfdpwh)
+  //     tfboList.push(roundedTfbo)
+  //   }
+
+  //   setGflgu(gflguList)
+  //   setGfdpwh(gfdpwhList)
+  //   setTfbo(tfboList)
+  // }
+
+  const closeNotification = async () => {
+    setPrinted(false)
+    await checkDivision()
+    await getListForPrinting()
+  }
+
   const checkDivision = async () => {
+    console.log('AAAA')
     const building = await checkAccess('BUILDING ORDER OF PAYMENT')
     setIsBuilding(building)
 
@@ -69,7 +101,29 @@ export default () => {
     setIsElectrical(electrical)
   }
 
+  const getopdetails = async (applicationNo: string) => {
+    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
+    setAssessor(op.result7[0])
+    setLocation(op.result5[0])
+    setType(op.result6[0])
+    setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
+    setApplicationId(op.result11[0])
+    // setAssessorId(op.result12[0])
+    setTotalOp(calculateTotal(op.result9))
+
+    // setDescriptionList(op.result8)
+    // setAmountList(op.result9)
+    // setDateOpList(op.result10)
+    // calculateAmounts()
+  }
+
+  const calculateTotal = (list: number[]) => {
+    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
+    return total
+  }
+
   const getListForPrinting = async () => {
+    console.log('BBB')
     try {
       const response = await ofetch(API + 'get-listopprinting-electrical', { parseResponse: JSON.parse })
       setApplicationList(response.result)
@@ -89,18 +143,80 @@ export default () => {
     const nameStore = sessionStorage.getItem('name')
     setEmployeeId(parseInt(idStore!))
     setEmployeeName(nameStore!)
+
+    if (employeeId() === 0 || employeeId().toString() === 'NaN') {
+      removeEmployee()
+      navigate('/', { replace: true })
+      return false
+    }
+    return true
+  }
+
+  const printHandler = async (application: string) => {
+    let signed: boolean = false
+    let forprinting: boolean = false
+    let updateOrderofpayment: boolean = false
+
+    setConnected(await checkConnection())
+    if (connected() === false) {
+      setErrorMessage('No Connection on Server')
+      return
+    }
+
+    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT PRINTED', '171', 'ELECOPPRINTED')
+    if (!signed) return
+
+    forprinting = await setNewStatus('FOR ELECTRICAL OFFICIAL RECEIPT VALIDATION', '98', 'ELECORVALIDATE')
+    if (!forprinting) return
+
+    updateOrderofpayment = await updateOp()
+
+    if (updateOrderofpayment) {
+      setPrintedApplication(application)
+      setPrinted(true)
+    }
+  }
+
+  const updateOp = async () => {
+    try {
+      await ofetch(API + 'update-opprinted-electrical', {
+        method: 'POST',
+        body: { data: parseInt(applicationId().toString()) },
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const setNewStatus = async (status: string, tag: string, tagword: string) => {
+    const today = new Date()
+    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+    const statusid = parseInt(applicationId().toString())
+
+    try {
+      await ofetch(API + 'post-newstatus-electrical', {
+        method: 'POST',
+        body: { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(employeeId().toString()) },
+      })
+      return true
+    } catch {
+      return false
+    }
   }
 
   const logout = async () => {
     removeEmployee()
     navigate('/')
-    // console.log('yeah')
   }
 
   onMount(async () => {
-    checkLogged()
-    await checkDivision()
-    await getListForPrinting()
+    const logged = await checkLogged()
+
+    if (logged) {
+      await checkDivision()
+      await getListForPrinting()
+    }
   })
 
   return (
@@ -116,7 +232,9 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{employeeName()}</span>
+              <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
+                <span class="name">{employeeName()}</span>
+              </Box>
               <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
@@ -151,7 +269,10 @@ export default () => {
 
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Building Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>
@@ -169,7 +290,10 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>
@@ -187,7 +311,9 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                  <Clickable onClick={() => createPdf()}>
+                    <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                  </Clickable>
                 </Row>
 
                 <Row>
@@ -212,9 +338,9 @@ export default () => {
                               design="bo-link"
                               background="#121e2acc"
                               color="#ffffffec"
-                              // function={async () => {
-                              //   await getopdetails(item)
-                              // }}
+                              function={async () => {
+                                await getopdetails(item)
+                              }}
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
                                 <span class="modal__application-number">{item}</span>
@@ -254,7 +380,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Print" edges="curved" design="bo-primary"></Button>
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler(item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
@@ -270,6 +396,50 @@ export default () => {
           </Row>
         </Padding>
       </Page>
+
+      <div onClick={closeNotification}>
+        <Modal trigger={printed()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
+          <Padding top={1} bottom={1} left={2} right={2}>
+            <Column>
+              <Row gap={4}>
+                <FaSolidThumbsUp size={75} />
+                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
+                  <span class="approval">Printed</span>
+                </Box>
+              </Row>
+              <Row padding="2rem 0 0 0">
+                <h2>{printedApplication()}</h2>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to proceed</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
+
+      <div onClick={() => setConnected(true)}>
+        <Modal trigger={connected() === false} background="#562020ff" color="#ffebebe6" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
+                  <h2>Connection Error</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }

src/pages/IndexPage/Index.sass

@@ -30,29 +30,29 @@ h1
     gap: 0.5rem
 
   &__main
-    font-size: 3.25rem
+    font-size: 2.75rem
     margin: 0 1rem 0 0
 
     @media only screen and (max-width: views.$tablet)
       padding: 2rem 0 0 0
-      font-size: 2.25rem
+      font-size: 1.25rem
       margin: 0 1rem 0 0
 
   &__sub
     font-weight: 700
-    font-size: 2.75rem
+    font-size: 2rem
 
     @media only screen and (max-width: views.$tablet)
       font-weight: 700
-      font-size: 1.75rem
+      font-size: 1.5rem
 
   &__paragraph
     padding: 4rem 0 0 0
-    font-size: 1.25rem
+    font-size: 1rem
 
     @media only screen and (max-width: views.$tablet)
       padding: 3.25rem 0 0 0
-      font-size: 1rem
+      font-size: 0.75rem
 
 .mobile-buttons
   padding: 2rem 0 0 0

src/pages/IndexPage/Index.tsx

@@ -1,5 +1,5 @@
 import './Index.sass'
-import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image } from '../../components'
+import { Button, Page, Padding, Display, Row, Logo, Footer, Copyright, Column, Image, Box } from '../../components'
 import { onMount } from 'solid-js'
 import { ofetch } from 'ofetch'
 import ocboAvif from '../../assets/images/optimized/ocbologo.avif'
@@ -50,7 +50,7 @@ export default () => {
   return (
     <>
       <Page>
-        <Display desktop tablet>
+        <Display desktop>
           <Padding left={4.75} right={4.75} top={0} bottom={0}>
             <Row content="split">
               <Row content="left" gap={2}>
@@ -58,22 +58,26 @@ export default () => {
                 <h1>OCBO e-Sign</h1>
               </Row>
 
-              <Row content="left" gap={1}>
-                <Button label="Login" edges="curved" design="bo-link" to="/login" />
-                <Button label="Register" edges="curved" design="bo-primary" to="/register" />
-              </Row>
+              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
+                <Row content="left" gap={1}>
+                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
+                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+                </Row>
+              </Box>
             </Row>
 
             <Row content="split">
-              <section class="title">
-                <h1 class="title__main">Secure e-Signature</h1>
-                <span class="title__sub">for Office of the City Building Official</span>
-                <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
-              </section>
+              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
+                <section class="title">
+                  <h1 class="title__main">Secure e-Signature</h1>
+                  <span class="title__sub">for Office of the City Building Official</span>
+                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+                </section>
+              </Box>
 
               <Display desktop>
                 <Column padding="3rem 0 0 0">
-                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={450}></Image>
+                  <Image avif={pageLogoAvif} webp={pageLogoWebp} size={410}></Image>
                 </Column>
               </Display>
             </Row>
@@ -82,7 +86,7 @@ export default () => {
           <Footer>
             <Row content="split">
               <Row gap={0.5}>
-                <Image avif={ocboAvif} webp={ocboWebp} size={30}></Image>
+                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
                 <Row gap={0.25}>
                   <Copyright year="2025" name="Office of the City Building Official" />
                   <span>Davao City, Philippines</span>
@@ -91,7 +95,57 @@ export default () => {
 
               <Row gap={0.25}>
                 <span>Developed by:</span>
-                <Image avif={patAvif} webp={patWebp} size={90}></Image>
+                <Image avif={patAvif} webp={patWebp} size={70}></Image>
+                <span>Pat Alcala</span>
+              </Row>
+            </Row>
+          </Footer>
+        </Display>
+
+        <Display tablet>
+          <Padding left={4.75} right={4.75} top={0} bottom={0}>
+            <Row content="split">
+              <Row content="left" gap={2}>
+                <Logo size={150} />
+                <h1>OCBO e-Sign</h1>
+              </Row>
+
+              <Box curved thickness={0} padding="0.75rem 1.25rem" background="#0f131d56">
+                <Row content="left" gap={1}>
+                  <Button label="Login" edges="curved" design="bo-link" to="/login" />
+                  <Button label="Register" edges="curved" design="bo-primary" to="/register" />
+                </Row>
+              </Box>
+            </Row>
+
+            <Row content="split">
+              <Box curved thickness={0} padding="2.75rem 2rem" background="#0f131d56">
+                <section class="title">
+                  <h1 class="title__main">Secure e-Signature</h1>
+                  <span class="title__sub">for Office of the City Building Official</span>
+                  <p class="title__paragraph">A paperless and effortless solution on signing permits</p>
+                </section>
+              </Box>
+
+              <Column padding="3rem 0 0 0">
+                <Image avif={pageLogoAvif} webp={pageLogoWebp} size={110}></Image>
+              </Column>
+            </Row>
+          </Padding>
+
+          <Footer>
+            <Row content="split">
+              <Row gap={0.5}>
+                <Image avif={ocboAvif} webp={ocboWebp} size={20}></Image>
+                <Row gap={0.25}>
+                  <Copyright year="2025" name="Office of the City Building Official" />
+                  <span>Davao City, Philippines</span>
+                </Row>
+              </Row>
+
+              <Row gap={0.25}>
+                <span>Developed by:</span>
+                <Image avif={patAvif} webp={patWebp} size={70}></Image>
                 <span>Pat Alcala</span>
               </Row>
             </Row>
@@ -109,18 +163,6 @@ export default () => {
               <Button wide label="Register" edges="curved" design="bo-primary" to="/register" />
             </section>
           </Column>
-
-          <Footer>
-            <Column gap={0.25} width="100%">
-              <Copyright year="2025" name="Office of the City Building Official" />
-              <span>Davao City, Philippines</span>
-
-              <Row gap={0.25}>
-                <span>Developed by:</span> <Image avif={patAvif} webp={patWebp} size={60}></Image>
-                <span>Pat Alcala</span>
-              </Row>
-            </Column>
-          </Footer>
         </Display>
       </Page>
     </>

src/pages/LoginPage/Login.tsx

@@ -102,7 +102,7 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding="2.25rem" color="#2f465cd7" background="#04040660">
+              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
                 {/* <section class="box"> */}
                 <Row>
                   <span class="box-title">Login</span>

src/pages/MainPage/Main.tsx

@@ -1,5 +1,5 @@
 import './Main.sass'
-import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components/'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column, Clickable } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
@@ -8,29 +8,30 @@ import dayjs from 'dayjs'
 import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
-// @ts-ignore
-// import * as openssl from 'openssl-nodejs'
+import { useNavigate } from '@solidjs/router'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
 const ID = import.meta.env.VITE_HEADID
 
 export default () => {
+  const navigate = useNavigate()
+
   const [totalOp, setTotalOp] = createSignal(0)
   const [assessor, setAssessor] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
   const [applicationId, setApplicationId] = createSignal(0)
-  const [assessorId, setAssessorId] = createSignal(0)
+  // const [assessorId, setAssessorId] = createSignal(0)
 
-  const [gflgu, setGflgu] = createSignal<number[]>([])
-  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
-  const [tfbo, setTfbo] = createSignal<number[]>([])
+  // const [gflgu, setGflgu] = createSignal<number[]>([])
+  // const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
+  // const [tfbo, setTfbo] = createSignal<number[]>([])
 
-  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
-  const [amountList, setAmountList] = createSignal<string[]>([])
-  const [dateOpList, setDateOpList] = createSignal<string[]>([])
+  // const [descriptionList, setDescriptionList] = createSignal<string[]>([])
+  // const [amountList, setAmountList] = createSignal<string[]>([])
+  // const [dateOpList, setDateOpList] = createSignal<string[]>([])
 
   const [applicationList, setApplicationList] = createSignal<string[]>([])
   const [nameList, setNameList] = createSignal<string[]>([])
@@ -40,6 +41,9 @@ export default () => {
   const [approved, setApproved] = createSignal(false)
   const [approvedApplication, setApprovedApplication] = createSignal('')
 
+  const [employeeId, setEmployeeId] = createSignal(0)
+  const [employeeName, setEmployeeName] = createSignal('')
+
   const getListForApproval = async () => {
     try {
       const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
@@ -67,13 +71,13 @@ export default () => {
     setType(op.result6[0])
     setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
     setApplicationId(op.result11[0])
-    setAssessorId(op.result12[0])
+    // setAssessorId(op.result12[0])
     setTotalOp(calculateTotal(op.result9))
 
-    setDescriptionList(op.result8)
-    setAmountList(op.result9)
-    setDateOpList(op.result10)
-    calculateAmounts()
+    // setDescriptionList(op.result8)
+    // setAmountList(op.result9)
+    // setDateOpList(op.result10)
+    // calculateAmounts()
   }
 
   const calculateTotal = (list: number[]) => {
@@ -124,7 +128,7 @@ export default () => {
 
   const updateOp = async () => {
     try {
-      await ofetch(API + 'update-op-electrical', {
+      await ofetch(API + 'update-opapproved-electrical', {
         method: 'POST',
         body: { data: parseInt(applicationId().toString()) },
       })
@@ -134,30 +138,30 @@ export default () => {
     }
   }
 
-  const calculateAmounts = () => {
-    const amounts: string[] = amountList()
-    let gflguList: number[] = []
-    let gfdpwhList: number[] = []
-    let tfboList: number[] = []
+  // const calculateAmounts = () => {
+  //   const amounts: string[] = amountList()
+  //   let gflguList: number[] = []
+  //   let gfdpwhList: number[] = []
+  //   let tfboList: number[] = []
 
-    for (let i = 0; i < amounts.length; i++) {
-      const gflgu = parseFloat(amounts[i]) * 0.8
-      const gfdpwh = parseFloat(amounts[i]) * 0.05
-      const tfbo = parseFloat(amounts[i]) * 0.15
+  //   for (let i = 0; i < amounts.length; i++) {
+  //     const gflgu = parseFloat(amounts[i]) * 0.8
+  //     const gfdpwh = parseFloat(amounts[i]) * 0.05
+  //     const tfbo = parseFloat(amounts[i]) * 0.15
 
-      const roundedGflgu = parseFloat(gflgu.toFixed(2))
-      const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
-      const roundedTfbo = parseFloat(tfbo.toFixed(2))
+  //     const roundedGflgu = parseFloat(gflgu.toFixed(2))
+  //     const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
+  //     const roundedTfbo = parseFloat(tfbo.toFixed(2))
 
-      gflguList.push(roundedGflgu)
-      gfdpwhList.push(roundedGfdpwh)
-      tfboList.push(roundedTfbo)
-    }
+  //     gflguList.push(roundedGflgu)
+  //     gfdpwhList.push(roundedGfdpwh)
+  //     tfboList.push(roundedTfbo)
+  //   }
 
-    setGflgu(gflguList)
-    setGfdpwh(gfdpwhList)
-    setTfbo(tfboList)
-  }
+  //   setGflgu(gflguList)
+  //   setGfdpwh(gfdpwhList)
+  //   setTfbo(tfboList)
+  // }
 
   const closeNotification = async () => {
     setApproved(false)
@@ -168,8 +172,36 @@ export default () => {
     createPdf()
   }
 
+  const removeEmployee = () => {
+    sessionStorage.removeItem('id')
+    sessionStorage.removeItem('name')
+  }
+
+  const checkLogged = async () => {
+    const idStore = sessionStorage.getItem('id')
+    const nameStore = sessionStorage.getItem('name')
+    setEmployeeId(parseInt(idStore!))
+    setEmployeeName(nameStore!)
+
+    if (employeeId() === 0 || employeeId().toString() === 'NaN') {
+      removeEmployee()
+      navigate('/', { replace: true })
+      return false
+    }
+    return true
+  }
+
+  const logout = async () => {
+    removeEmployee()
+    navigate('/')
+  }
+
   onMount(async () => {
-    await load()
+    const logged = await checkLogged()
+
+    if (logged) {
+      await load()
+    }
   })
 
   return (
@@ -185,13 +217,15 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{_employeeName.get()}</span>
-              <Link to="/">
+              <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
+                <span class="name">{employeeName()}</span>
+              </Box>
+              <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
                   <span>Logout</span>
                 </Row>
-              </Link>
+              </Clickable>
             </Row>
           </Row>
           <Row content="center">
@@ -213,7 +247,10 @@ export default () => {
 
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Building Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>
@@ -231,7 +268,10 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>

src/pages/RegisterPage/Register.tsx

@@ -161,7 +161,7 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding="2.25rem" color="#2f465cd7" background="#04040660">
+              <Box curved thickness={2} padding="2.25rem" color="#253849be" background="#04040660">
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
@@ -195,9 +195,17 @@ export default () => {
 
                     <Padding top={2} bottom={0} left={0} right={0}>
                       <Show when={file() && password()}>
-                        <Row>
-                          <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
-                        </Row>
+                        <Show when={file() && password() && password().length >= 4}>
+                          <Row>
+                            <Button edges="curved" design="bo-primary" label="Register" onClick={generateSignature} wide />
+                          </Row>
+                        </Show>
+
+                        <Show when={file() && password() && password().length < 4}>
+                          <Row>
+                            <span class="already-registered">Password too short</span>
+                          </Row>
+                        </Show>
                       </Show>
 
                       <Show when={!file() && !password()}>

src/utils/functions/createPdf.ts

@@ -1,18 +1,48 @@
 import jsPDF from 'jspdf'
+// @ts-ignore
+import jspdfBarcode from 'jspdf-barcode'
 
 export default () => {
+  const OPTN = 'M25-000123'
+  const APPLICATION = '25-000123'
+  const DATE = 'October 8, 2025'
+  const NAME = 'BRUCE WAYNE'
+  const LOCATION = 'DAVAO CITY'
+  const TYPE = 'RESIDENTIAL - NEW INSTALLATION'
+
+  const init = async () => {
+    console.log('yeah')
+  }
+
+  init()
+
   const doc = new jsPDF({
     orientation: 'p',
     unit: 'mm',
     format: 'letter',
   })
 
+  const getTextWidth = (text: string, fontSize: number) => {
+    doc.setFontSize(fontSize)
+    return doc.getStringUnitWidth(text) * fontSize * 0.35
+  }
+
+  const pageWidth = doc.internal.pageSize.getWidth()
+
   const lungsod = new Image()
-  lungsod.src = 'src/assets/images/lungsod2.png'
+  lungsod.src = 'src/assets/images/lungsod.png'
 
   const ocbo = new Image()
   ocbo.src = 'src/assets/images/ocbologo.png'
 
+  jspdfBarcode(doc, APPLICATION, {
+    fontSize: 32,
+    textColor: '#000000',
+    x: pageWidth - 35,
+    y: 40,
+    textOptions: { align: 'center' }, // optional text options
+  })
+
   // const lungsodItem = document.getElementById('lungsod')
   // const lungsodSrc = lungsodItem?.getAttribute('src')
   // const lungsodLink = document.createElement('a')
@@ -23,55 +53,94 @@ export default () => {
   // const ocboLink = document.createElement('a')
   // ocboLink.href = ocboSrc ?? ''
 
-  const getTextWidth = (text: string, fontSize: number) => {
-    doc.setFontSize(fontSize)
-    return doc.getStringUnitWidth(text) * fontSize * 0.35
-  }
-
-  const pageWidth = doc.internal.pageSize.getWidth()
-
   const republicText = 'Republic of the Philippines'
-  const republicTextWidth = getTextWidth(republicText, 10)
+  const republicTextWidth = getTextWidth(republicText, 9)
   const officeText = 'OFFICE OF THE CITY BUILDING OFFICIAL'
-  const officeTextWidth = getTextWidth(officeText, 11)
+  const officeTextWidth = getTextWidth(officeText, 10)
   const cityText = 'City of Davao'
-  const cityTextWidth = getTextWidth(cityText, 10)
+  const cityTextWidth = getTextWidth(cityText, 9)
 
   const republicTextX = (pageWidth - republicTextWidth) / 2
   const officeTextX = (pageWidth - officeTextWidth) / 2
   const cityTextX = (pageWidth - cityTextWidth) / 2
 
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(10)
+  doc.setFontSize(9)
   doc.text(republicText, republicTextX, 14)
   doc.setFont('helvetica', 'bold')
-  doc.setFontSize(11)
+  doc.setFontSize(10)
   doc.text(officeText, officeTextX, 19)
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(10)
+  doc.setFontSize(9)
   doc.text(cityText, cityTextX, 24)
 
-  doc.addImage(lungsod, 'PNG', 12, 8, 20, 20, 'lungsod', 'NONE', 0)
-  doc.addImage(ocbo, 'PNG', pageWidth - 36, 8, 20, 20, 'ocbo', 'NONE', 0)
-
-  // doc.setLineWidth(0.9)
-  // doc.line(10, 34, pageWidth - 10, 34)
+  doc.addImage(lungsod, 'PNG', 14, 8, 18, 18, 'lungsod', 'NONE', 0)
+  doc.addImage(ocbo, 'PNG', pageWidth - 34, 8, 18, 18, 'ocbo', 'NONE', 0)
 
   const opText = 'ORDER OF PAYMENT'
-  const opTextWidth = getTextWidth(opText, 10)
+  const opTextWidth = getTextWidth(opText, 8.75)
   const opTextX = (pageWidth - opTextWidth) / 2
-
   doc.setFont('helvetica', 'bold')
-  doc.setFontSize(10)
-  doc.text(opText, opTextX, 34)
+  doc.setFontSize(9)
+  doc.text(opText, opTextX, 36)
 
   const divisionText = 'ELECTRICAL PERMIT'
-  const divisionTextWidth = getTextWidth(divisionText, 9)
+  const divisionTextWidth = getTextWidth(divisionText, 7.25)
   const divisionTextX = (pageWidth - divisionTextWidth) / 2
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(8)
+  doc.text(divisionText, divisionTextX, 40)
+
+  const optnText = 'OPTN:'
+  const optnTextX = 16
+  doc.setFont('helvetica', 'bold')
+  doc.setFontSize(8)
+  doc.text(optnText, optnTextX, 48)
+
+  const optnContentX = 25
+  doc.setFontSize(8)
+  doc.text(OPTN, optnContentX, 48)
+
+  const toText = `TO: The City Treasurer's Office`
+  const toTextX = 16
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(8)
+  doc.text(toText, toTextX, 52)
+
+  doc.text('Please accept payment for fee specified herunder', 16, 56)
+
+  doc.text('Application No. :', pageWidth - 60, 48)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(APPLICATION, pageWidth - 38, 48)
 
   doc.setFont('helvetica', 'normal')
-  doc.setFontSize(9)
-  doc.text(divisionText, divisionTextX, 39)
+  doc.text('Approved Date :', pageWidth - 60, 52)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(DATE, pageWidth - 38, 52)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Name of Applicant :', 23.4, 64)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(NAME, 50, 64)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Location of Construction :', 16, 68)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(LOCATION, 50, 68)
+
+  doc.setFont('helvetica', 'normal')
+  doc.text('Type of Use :', 31.2, 72)
+
+  doc.setFont('helvetica', 'bold')
+  doc.text(TYPE, 50, 72)
+
+  doc.text('ACCOUNT DESCRIPTION', 16, 84)
+  doc.text('ACCOUNT CODE', getTextWidth('ACCOUNT DESCRIPTION', 8) + 40, 84)
+  doc.text('AMOUNT', getTextWidth('ACCOUNT DESCRIPTION', 8) + getTextWidth('ACCOUNT CODE', 8) + 65, 84)
 
   doc.save('Sample')
 }

src/utils/functions/generateFavicon.ts

@@ -1,15 +0,0 @@
-import { Jimp } from 'jimp'
-
-export default async () => {
-  const inputSrc = 'src/assets/images/logo.png'
-  const favicon = 'public/favicon.png'
-
-  try {
-    const image = await Jimp.read(inputSrc)
-    image.resize({ w: 90 })
-    await image.write(favicon)
-    console.log('Favicon generated successfully')
-  } catch (error) {
-    console.error('Error generating favicon:', error)
-  }
-}

src/utils/scripts/generateFavicon.js

@@ -0,0 +1,21 @@
+import sharp from 'sharp'
+import * as fs from 'fs'
+import * as path from 'path'
+import { consola } from 'consola'
+;(async () => {
+  try {
+    const dirPath = path.resolve('../../../public')
+
+    if (fs.existsSync(dirPath)) {
+      const inputSrc = '../../assets/images/logo.png'
+      const favicon = dirPath + '/favicon.png'
+      const faviconBuffer = await sharp(inputSrc).png({ quality: 90 }).resize(50).toBuffer()
+      await sharp(faviconBuffer).toFile(favicon)
+      consola.success('Favicon generated successfully')
+    } else {
+      consola.error('Directory does not exist:', dirPath)
+    }
+  } catch (error) {
+    consola.error('Error generating favicon:', error)
+  }
+})()

vite.config.ts

@@ -1,6 +1,12 @@
 import { defineConfig } from 'vite'
 import solid from 'vite-plugin-solid'
+import { compression } from 'vite-plugin-compression2'
 
 export default defineConfig({
-  plugins: [solid()],
+  plugins: [
+    solid(),
+    compression({
+      algorithms: ['brotliCompress'],
+    }),
+  ],
 })