Updated sass class

backend/main.go

@@ -1453,6 +1453,19 @@ func connect() {
 				"result": result,
 			})
 
+		case "check-statuspops-local":
+			var resultInt, resultCount int
+			err := dbpop.QueryRow(`SELECT COUNT(OrderPayId) AS resultInt, COUNT(AFNum) AS resultCount FROM orderpaydetail WHERE oprefid = ?`, data).Scan(&resultInt, &resultCount)
+			if err != nil {
+				c.AbortWithError(http.StatusBadRequest, err)
+				c.String(http.StatusBadRequest, err.Error())
+				return
+			}
+			c.JSON(http.StatusOK, gin.H{
+				"result":  resultInt,
+				"result2": resultCount,
+			})
+
 		}
 	})
 
@@ -2322,6 +2335,50 @@ func connect() {
 		}
 	})
 
+	// router.POST("/api/return-approval-electrical", middleware.TokenChecker(), func(c *gin.Context) {
+	// 	type returnApprovalData struct {
+	// 		Data string `json:"data"` //electricalNo
+	// 	}
+	// 	var returnapprovalData returnApprovalData
+	// 	if err := c.ShouldBindJSON(&returnapprovalData); 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")
+	// 	c.Writer.Header().Set("Content-Security-Policy", "default-src 'self'; img-src 'self';")
+	// 	c.Writer.Header().Set("X-Server", "OCBO Server")
+
+	// 	dbpost, err := db.Prepare("INSERT INTO esign_lock (esign_lockid, referenceNo, lock_code) VALUES (NULL, ?, ?)")
+	// 	if err != nil {
+	// 		c.AbortWithError(http.StatusInternalServerError, err)
+	// 		c.String(http.StatusInternalServerError, "Internal Server Error")
+	// 		return
+	// 	}
+	// 	defer dbpost.Close()
+
+	// 	exec, err := dbpost.Exec(returnapprovalData.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 Saving Lock Data")
+	// 	} else {
+	// 		c.String(http.StatusInternalServerError, "Failed on Saving Lock Data")
+	// 	}
+	// })
+
 	router.DELETE("/api/delete-orderofpayment-electrical", middleware.TokenChecker(), func(c *gin.Context) {
 		type DeleteOP struct {
 			Data int `json:"data"`
@@ -2455,8 +2512,8 @@ func connect() {
 		c.Writer.Header().Set("Content-Security-Policy", "default-src 'self'; img-src 'self';")
 		c.Writer.Header().Set("X-Server", "OCBO Server")
 
-		var resultCount int
+		var resultId, resultCount int
-		checkErr := dbpop.QueryRow("SELECT COUNT(AFNum) AS resultCount FROM orderpaydetail WHERE OPRefId = ?", deleteOpLocal.Data).Scan(&resultCount)
+		checkErr := dbpop.QueryRow("SELECT COUNT(OrderPayId) AS resultId, COUNT(AFNum) AS resultCount FROM orderpaydetail WHERE OPRefId = ?", deleteOpLocal.Data).Scan(&resultId, &resultCount)
 		if checkErr != nil {
 			c.AbortWithError(http.StatusInternalServerError, checkErr)
 			c.String(http.StatusInternalServerError, "Internal Server Error")
@@ -2464,33 +2521,36 @@ func connect() {
 		}
 
 		if resultCount > 0 {
-			c.String(http.StatusBadRequest, "Error! Payment already exist.")
+			c.String(http.StatusForbidden, "Error! Payment already exist.")
 			return
 		}
 
-		dbpost, err := dbpop.Prepare("DELETE FROM orderpaydetail WHERE OPRefId = ?")
+		if resultId > 0 {
-		if err != nil {
+			dbpost, err := dbpop.Prepare("DELETE FROM orderpaydetail WHERE OPRefId = ?")
-			c.AbortWithError(http.StatusInternalServerError, err)
+			if err != nil {
-			c.String(http.StatusInternalServerError, "Internal Server Error")
+				c.AbortWithError(http.StatusInternalServerError, err)
-			return
+				c.String(http.StatusInternalServerError, "Internal Server Error")
-		}
+				return
-		defer dbpost.Close()
+			}
+			defer dbpost.Close()
 
-		exec, err := dbpost.Exec(deleteOpLocal.Data)
+			exec, err := dbpost.Exec(deleteOpLocal.Data)
-		if err != nil {
+			if err != nil {
-			panic(err.Error())
+				panic(err.Error())
+			}
+
+			affect, err := exec.RowsAffected()
+			if err != nil {
+				panic(err.Error())
+			}
+
+			if affect > 0 {
+				c.String(http.StatusOK, "Success on Deleting POPS Local")
+			} else {
+				c.String(http.StatusInternalServerError, "Failed on Deleting POPS Local")
+			}
 		}
 
-		affect, err := exec.RowsAffected()
-		if err != nil {
-			panic(err.Error())
-		}
-
-		if affect > 0 {
-			c.String(http.StatusOK, "Success on Deleting POPS Local")
-		} else {
-			c.String(http.StatusInternalServerError, "Failed on Deleting POPS Local")
-		}
 	})
 
 	router.DELETE("/api/delete-esigntransactions", func(c *gin.Context) {

src/pages/AssessorPage/Assessor.tsx

@@ -33,6 +33,7 @@ import {
   _units,
 } from '../../stores/pdfinfo.ts'
 import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, getDateTime, postApi, saveNewName, saveNewPassword, securePassword, statusPopsApi, voidPopsApi } from '../../utils/functions/index.ts'
+import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
 import './Assessor.sass'
 
 const PESO = import.meta.env.VITE_PESO
@@ -82,6 +83,7 @@ export default () => {
   const [selectedType, setSelectedType] = createSignal('Print')
 
   const [voidError, setVoidError] = createSignal(false)
+  const [isLoading, setIsLoading] = createSignal(false)
 
   let bldgadditional = false
 
@@ -246,6 +248,8 @@ export default () => {
   }
 
   const getListForPrinting = async (division: string) => {
+    setIsLoading(true)
+
     try {
       let response: any
 
@@ -283,6 +287,8 @@ export default () => {
     } catch (error) {
       console.error(error)
     }
+
+    setIsLoading(false)
   }
 
   const removeEmployee = () => {
@@ -506,6 +512,11 @@ export default () => {
     return true
   }
 
+  const checkStatusPopsLocal = async (application: string) => {
+    const response = await getApi('check-statuspops-local', application)
+    return response
+  }
+
   const statusPopsOp = async (application: string) => {
     const response = await statusPopsApi(application)
     return response
@@ -866,87 +877,98 @@ export default () => {
                 </Padding>
 
                 <Row>
-                  <table class="table">
+                  <Show when={isLoading()}>
-                    <thead>
+                    <Padding top={2} bottom={0} right={10} left={10}>
-                      <tr>
+                      <Column gap={1}>
-                        <th>Application Number</th>
+                        <AiOutlineLoading3Quarters class="loading-spinner" size={42} opacity={0.8} />
-                        <th>Name</th>
+                        <span>Downloading Data</span>
-                        <th style="text-align: center">Show Details</th>
+                      </Column>
-                      </tr>
+                    </Padding>
-                    </thead>
+                  </Show>
-                    <tbody>
+
-                      {applicationListElectrical().map((item: string, index: number) => (
+                  <Show when={!isLoading()}>
+                    <table class="table">
+                      <thead>
                         <tr>
-                          <td>{item}</td>
+                          <th>Application Number</th>
-                          <td>{nameListElectrical()[index]}</td>
+                          <th>Name</th>
-
+                          <th style="text-align: center">Show Details</th>
-                          <td>
-                            <ModalButton
-                              class="modal"
-                              label="Show Details"
-                              design="bo-link"
-                              background="#121e2acc"
-                              color="#ffffffec"
-                              function={async () => {
-                                await getopdetails('electrical', item)
-                              }}
-                            >
-                              <Padding top={0} left={2} right={2} bottom={0}>
-                                <span class="modal__application-number">{item}</span>
-
-                                <Padding top={1} left={0} right={0} bottom={0}>
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Name of Applicant:</span>
-                                    <span class="modal__row__detail">{nameListElectrical()[index]}</span>
-                                  </section>
-
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Location:</span>
-                                    <span class="modal__row__detail">{location()}</span>
-                                  </section>
-
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Type:</span>
-                                    <span class="modal__row__detail">{type().toUpperCase()}</span>
-                                  </section>
-
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Assessed By:</span>
-                                    <span class="modal__row__detail">{assessor()}</span>
-                                  </section>
-
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Date Assessed:</span>
-                                    <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
-                                  </section>
-
-                                  <section class="modal__row">
-                                    <span class="modal__row__label">Total Fee:</span>
-                                    <span class="modal__row__detail__price">
-                                      {PESO}{' '}
-                                      {totalOp().toLocaleString('en-US', {
-                                        minimumFractionDigits: 2,
-                                      })}
-                                    </span>
-                                  </section>
-                                </Padding>
-
-                                <Row padding="2rem 0 0 0">
-                                  <Show when={selectedType() === 'Print'}>
-                                    <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
-                                  </Show>
-                                  <Show when={selectedType() !== 'Print'}>
-                                    <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('electrical', item)}></Button>
-                                  </Show>
-                                  <span class="modal__cancel">Click anywhere to cancel</span>
-                                </Row>
-                              </Padding>
-                            </ModalButton>
-                          </td>
                         </tr>
-                      ))}
+                      </thead>
-                    </tbody>
+                      <tbody>
-                  </table>
+                        {applicationListElectrical().map((item: string, index: number) => (
+                          <tr>
+                            <td>{item}</td>
+                            <td>{nameListElectrical()[index]}</td>
+
+                            <td>
+                              <ModalButton
+                                class="modal"
+                                label="Show Details"
+                                design="bo-link"
+                                background="#121e2acc"
+                                color="#ffffffec"
+                                function={async () => {
+                                  await getopdetails('electrical', item)
+                                }}
+                              >
+                                <Padding top={0} left={2} right={2} bottom={0}>
+                                  <span class="modal__application-number">{item}</span>
+
+                                  <Padding top={1} left={0} right={0} bottom={0}>
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Name of Applicant:</span>
+                                      <span class="modal__row__detail">{nameListElectrical()[index]}</span>
+                                    </section>
+
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Location:</span>
+                                      <span class="modal__row__detail">{location()}</span>
+                                    </section>
+
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Type:</span>
+                                      <span class="modal__row__detail">{type().toUpperCase()}</span>
+                                    </section>
+
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Assessed By:</span>
+                                      <span class="modal__row__detail">{assessor()}</span>
+                                    </section>
+
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Date Assessed:</span>
+                                      <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
+                                    </section>
+
+                                    <section class="modal__row">
+                                      <span class="modal__row__label">Total Fee:</span>
+                                      <span class="modal__row__detail__price">
+                                        {PESO}{' '}
+                                        {totalOp().toLocaleString('en-US', {
+                                          minimumFractionDigits: 2,
+                                        })}
+                                      </span>
+                                    </section>
+                                  </Padding>
+
+                                  <Row padding="2rem 0 0 0">
+                                    <Show when={selectedType() === 'Print'}>
+                                      <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
+                                    </Show>
+                                    <Show when={selectedType() !== 'Print'}>
+                                      <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('electrical', item)}></Button>
+                                    </Show>
+                                    <span class="modal__cancel">Click anywhere to cancel</span>
+                                  </Row>
+                                </Padding>
+                              </ModalButton>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </Show>
                 </Row>
               </Tabs.Content>
             </Tabs>

src/pages/MainPage/Main.sass

@@ -112,4 +112,3 @@ h1
     
   &__error
     color: #c85656
-

src/pages/MainPage/Main.tsx

@@ -7,12 +7,14 @@ import { VsRefresh } from 'solid-icons/vs'
 import { createEffect, createSignal, onMount } from 'solid-js'
 import { Show } from 'solid-js/web'
 import { Box, Button, Clickable, Column, Input, Link, Logo, Modal, ModalButton, Padding, Page, Row } from '../../components/'
-import { checkConnection, deleteApi, getApi, getApiMulti, getDateTime, lockData, postApi, saveNewName, saveNewPassword, securePassword, voidPopsApi } from '../../utils/functions'
+import { checkConnection, deleteApi, getApi, getApiMulti, getDateTime, lockData, postApi, saveNewName, saveNewPassword, securePassword, voidPopsApi, voidApi, statusPopsApi } from '../../utils/functions'
+import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
 import './Main.sass'
 
 const PESO = import.meta.env.VITE_PESO
 const ID = sessionStorage.getItem('id')!
 const PUBLICIP = import.meta.env.VITE_PUBLICIP
+const BACKEND = import.meta.env.VITE_BACKEND
 
 export default () => {
   const navigate = useNavigate()
@@ -59,6 +61,7 @@ export default () => {
 
   const [configNotification, setConfigNotification] = createSignal(false)
   const [isIncomplete, setIsIncomplete] = createSignal(false)
+  const [isLoading, setIsLoading] = createSignal(false)
 
   let bldgadditional = false
 
@@ -73,15 +76,19 @@ export default () => {
   }
 
   const getListForApprovalElectrical = async () => {
+    // setIsLoading(true)
     const responseE = await getApiMulti('get-listopapproval-electrical')
     setApplicationListElectrical(responseE.result)
     setNameListElectrical(responseE.result2)
+    // setIsLoading(false)
   }
 
   const getListForApprovalOccupancy = async () => {
+    // setIsLoading(true)
     const responseO = await getApiMulti('get-listopapproval-occupancy')
     setApplicationListOccupancy(responseO.result)
     setNameListOccupancy(responseO.result2)
+    // setIsLoading(false)
   }
 
   const load = async (division: string) => {
@@ -90,6 +97,7 @@ export default () => {
       setErrorMessage('Could not gather list of applications')
       return
     }
+    setIsLoading(true)
 
     await getPassword()
 
@@ -101,6 +109,7 @@ export default () => {
     } else {
       await getListForApproval()
     }
+    setIsLoading(false)
   }
 
   const getopdetails = async (division: string, applicationNo: string) => {
@@ -148,6 +157,9 @@ export default () => {
     let forprinting: boolean = false
     let updateOrderofpayment: boolean = false
 
+    let popsExist: boolean = false
+    let popsPaid: boolean = false
+
     setConnected(await checkConnection())
     if (connected() === false) {
       setErrorMessage('No Connection on Server')
@@ -155,7 +167,35 @@ export default () => {
     }
 
     if (division === 'electrical') {
-      await voidPopsOp(application)
+      // const isPaid = BACKEND.includes('localhost') ? await checkStatusPopsLocal(application) : await statusPopsOp(application)
+      // let isPaid
+
+      if (BACKEND.includes('localhost')) {
+        const status = await checkStatusPopsLocal(application)
+        if (status.result > 0) popsExist = true
+        if (status.result2 > 0) popsPaid = true
+      } else {
+        const status = await await statusPopsOp(application)
+        if (status.message === 'Success') popsExist = true
+        if (status.pops_paid === true) popsPaid = true
+      }
+
+      if (popsExist) {
+        if (popsPaid) {
+          setPostError(true)
+          setErrorMessage('Application Already Paid')
+          return
+        } else {
+          const voidOP = BACKEND.includes('localhost') ? await voidPopsOpLocal(application) : await voidPopsOp(application)
+
+          if (!voidOP) {
+            setPostError(true)
+            setErrorMessage('POPS Record found but failed to void')
+            return
+          }
+        }
+      }
+
       await postPops(division, application)
       const popsResult = await checkPops(application)
       const lockResult = await lockOpData(division, application)
@@ -216,6 +256,37 @@ export default () => {
     }
   }
 
+  const approveElectrical = async (division: string, application: string) => {
+    let signed: boolean = false
+    let forprinting: boolean = false
+    let updateOrderofpayment: boolean = false
+
+    await postPops(division, application)
+    const popsResult = await checkPops(application)
+    const lockResult = await lockOpData(division, application)
+
+    if (popsResult && lockResult) {
+      signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+      updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+      if (!signed) return
+
+      forprinting = await setNewStatus(division, 'FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+      if (!forprinting) return
+
+      updateOrderofpayment = await updateOp(division)
+
+      if (updateOrderofpayment) {
+        postTransaction()
+        setApprovedApplication(application)
+        setApproved(true)
+      }
+    } else {
+      setPostError(true)
+      setErrorMessage('Error on posting on POPS Server, please try again')
+      return
+    }
+  }
+
   const lockOpData = async (division: string, application: string) => {
     const dataToLock = await getApi(`get-opdata-${division}`, application)
     const lockedData = await lockData(dataToLock)
@@ -230,6 +301,21 @@ export default () => {
     return true
   }
 
+  const voidPopsOpLocal = async (application: string) => {
+    const response = await voidApi('void-op-local', { data: application })
+    return response
+  }
+
+  const checkStatusPopsLocal = async (application: string) => {
+    const response = await getApiMulti('check-statuspops-local', application)
+    return response
+  }
+
+  const statusPopsOp = async (application: string) => {
+    const response = await statusPopsApi(application)
+    return response
+  }
+
   const returnAssessment = async (division: string, application: string) => {
     const id = await getApplicationById(division, application)
     setApplicationId(id)
@@ -680,107 +766,117 @@ export default () => {
                 </Padding>
 
                 <Row>
-                  <table class="table">
+                  <Show when={isLoading()}>
-                    <thead>
+                    <Padding top={2} bottom={0} right={10} left={10}>
-                      <tr>
+                      <Column gap={1}>
-                        <th>Application Number</th>
+                        <AiOutlineLoading3Quarters class="loading-spinner" size={42} opacity={0.8} />
-                        <th>Name</th>
+                        <span>Downloading Data</span>
-                        <th style="text-align: center">Show Details</th>
+                      </Column>
-                      </tr>
+                    </Padding>
-                    </thead>
+                  </Show>
-                    <tbody>
+                  <Show when={!isLoading()}>
-                      {applicationListElectrical().map((item: string, index: number) => (
+                    <table class="table">
+                      <thead>
                         <tr>
-                          <td>{item}</td>
+                          <th>Application Number</th>
-                          <td>{nameListElectrical()[index]}</td>
+                          <th>Name</th>
-
+                          <th style="text-align: center">Show Details</th>
-                          <td>
-                            <ModalButton
-                              class="modal"
-                              label="Show Details"
-                              design="bo-link"
-                              background="#121e2acc"
-                              color="#ffffffec"
-                              function={async () => {
-                                await getopdetails('electrical', item)
-                              }}
-                            >
-                              <Show when={isIncomplete()}>
-                                <Padding top={0} left={2} right={2} bottom={0}>
-                                  <span class="modal__application-number">{item}</span>
-
-                                  <Padding top={1} left={0} right={0} bottom={0}>
-                                    <Column padding="0 0 1rem 0">
-                                      <Box curved thickness={3} color="#c85656" padding="1rem">
-                                        <h2 class="incomplete__error">Signing Error</h2>
-                                      </Box>
-                                      <h3 class="incomplete__error">Missing Data Detected</h3>
-                                    </Column>
-
-                                    <div class="incomplete">
-                                      <Column>
-                                        <span class="incomplete__text">Some required information is missing from the application details</span>
-                                        <span class="incomplete__text">Please return to Assessment to complete the required fields</span>
-                                      </Column>
-                                    </div>
-                                  </Padding>
-                                  <Column padding="1rem 0 0 0">
-                                    <Button wide label="Return to Assessment" edges="curved" design="bo-primary" onClick={() => returnAssessment('electrical', item)} />
-                                    <span class="modal__cancel">Click anywhere to cancel</span>
-                                  </Column>
-                                </Padding>
-                              </Show>
-
-                              <Show when={!isIncomplete()}>
-                                <Padding top={0} left={2} right={2} bottom={0}>
-                                  <span class="modal__application-number">{item}</span>
-
-                                  <Padding top={1} left={0} right={0} bottom={0}>
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Name of Applicant:</span>
-                                      <span class="modal__row__detail">{nameListElectrical()[index]}</span>
-                                    </section>
-
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Location:</span>
-                                      <span class="modal__row__detail">{location()}</span>
-                                    </section>
-
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Type:</span>
-                                      <span class="modal__row__detail">{type().toUpperCase()}</span>
-                                    </section>
-
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Assessed By:</span>
-                                      <span class="modal__row__detail">{assessor()}</span>
-                                    </section>
-
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Date Assessed:</span>
-                                      <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
-                                    </section>
-
-                                    <section class="modal__row">
-                                      <span class="modal__row__label">Total Fee:</span>
-                                      <span class="modal__row__detail__price">
-                                        {PESO} {totalOp()}
-                                      </span>
-                                    </section>
-                                  </Padding>
-
-                                  <Column padding="2rem 0 0 0">
-                                    <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)} />
-                                    <span class="modal__cancel">Click anywhere to cancel</span>
-                                  </Column>
-                                </Padding>
-                              </Show>
-                            </ModalButton>
-                          </td>
                         </tr>
-                      ))}
+                      </thead>
-                    </tbody>
+                      <tbody>
-                  </table>
+                        {applicationListElectrical().map((item: string, index: number) => (
+                          <tr>
+                            <td>{item}</td>
+                            <td>{nameListElectrical()[index]}</td>
+
+                            <td>
+                              <ModalButton
+                                class="modal"
+                                label="Show Details"
+                                design="bo-link"
+                                background="#121e2acc"
+                                color="#ffffffec"
+                                function={async () => {
+                                  await getopdetails('electrical', item)
+                                }}
+                              >
+                                <Show when={isIncomplete()}>
+                                  <Padding top={0} left={2} right={2} bottom={0}>
+                                    <span class="modal__application-number">{item}</span>
+
+                                    <Padding top={1} left={0} right={0} bottom={0}>
+                                      <Column padding="0 0 1rem 0">
+                                        <Box curved thickness={3} color="#c85656" padding="1rem">
+                                          <h2 class="incomplete__error">Signing Error</h2>
+                                        </Box>
+                                        <h3 class="incomplete__error">Missing Data Detected</h3>
+                                      </Column>
+
+                                      <div class="incomplete">
+                                        <Column>
+                                          <span class="incomplete__text">Some required information is missing from the application details</span>
+                                          <span class="incomplete__text">Please return to Assessment to complete the required fields</span>
+                                        </Column>
+                                      </div>
+                                    </Padding>
+                                    <Column padding="1rem 0 0 0">
+                                      <Button wide label="Return to Assessment" edges="curved" design="bo-primary" onClick={() => returnAssessment('electrical', item)} />
+                                      <span class="modal__cancel">Click anywhere to cancel</span>
+                                    </Column>
+                                  </Padding>
+                                </Show>
+
+                                <Show when={!isIncomplete()}>
+                                  <Padding top={0} left={2} right={2} bottom={0}>
+                                    <span class="modal__application-number">{item}</span>
+
+                                    <Padding top={1} left={0} right={0} bottom={0}>
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Name of Applicant:</span>
+                                        <span class="modal__row__detail">{nameListElectrical()[index]}</span>
+                                      </section>
+
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Location:</span>
+                                        <span class="modal__row__detail">{location()}</span>
+                                      </section>
+
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Type:</span>
+                                        <span class="modal__row__detail">{type().toUpperCase()}</span>
+                                      </section>
+
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Assessed By:</span>
+                                        <span class="modal__row__detail">{assessor()}</span>
+                                      </section>
+
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Date Assessed:</span>
+                                        <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
+                                      </section>
+
+                                      <section class="modal__row">
+                                        <span class="modal__row__label">Total Fee:</span>
+                                        <span class="modal__row__detail__price">
+                                          {PESO} {totalOp()}
+                                        </span>
+                                      </section>
+                                    </Padding>
+
+                                    <Column padding="2rem 0 0 0">
+                                      <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)} />
+                                      <span class="modal__cancel">Click anywhere to cancel</span>
+                                    </Column>
+                                  </Padding>
+                                </Show>
+                              </ModalButton>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </Show>
                 </Row>
               </Tabs.Content>
             </Tabs>
@@ -921,7 +1017,7 @@ export default () => {
             <Column>
               <Row>
                 <Box curved thickness={3} color="#ffebebe6" padding="1rem">
-                  <h2>Signing Error</h2>
+                  <h2>Approval and Signing Error</h2>
                 </Box>
               </Row>
 

src/styles/classes.sass

@@ -123,6 +123,16 @@
     @extend .table
     cursor: not-allowed
 
+.loading-spinner
+  display: inline-block
+  animation: rotate 2s linear infinite
+
+@keyframes rotate
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
+
 .required-config
   padding: 0.75rem 1rem
   border-radius: 8px

src/utils/functions/index.ts

@@ -12,3 +12,4 @@ export { default as saveNewPassword } from './saveNewPassword.ts'
 export { default as getDateTime } from './getDateTime.ts'
 export { default as deleteApi } from './deleteApi.ts'
 export { default as lockData } from './lockData.ts'
+export { default as voidApi } from './voidApi.ts'

src/utils/functions/voidApi.ts

@@ -0,0 +1,36 @@
+import { ofetch } from 'ofetch'
+import dayjs from 'dayjs'
+import encryptRsa from './encryptRsa'
+
+const API = import.meta.env.VITE_BACKEND
+
+export default async (api: string, body: Object) => {
+  const today = new Date()
+  const todayUnix = dayjs(today).unix()
+  const expiration = todayUnix + 9
+  const aes = await encryptRsa(`${api.toString()}-${todayUnix.toString()}-${expiration.toString()}`)
+
+  const hash = `ocbo=${aes}token`
+  try {
+    let data
+    await ofetch(API + api, {
+      headers: {
+        Accept: 'application/json',
+        'Cache-Control': 'no-cache',
+        'OCBO-Token': hash,
+      },
+      async onResponse({ response }) {
+        data = response.ok
+      },
+      retry: 3,
+      retryDelay: 500,
+      retryStatusCodes: [400, 404, 405, 500, 502],
+      method: 'DELETE',
+      body: body,
+    })
+
+    return data
+  } catch {
+    return 'error'
+  }
+}