Updated register page

backend/main.go

@@ -536,28 +536,38 @@ func connect() {
 		case "get-employeename":
 			err := db.QueryRow("SELECT IFNULL(employeename, '') AS result FROM employee WHERE employeeid = ?", data).Scan(&result)
 			if err != nil {
-				c.AbortWithError(http.StatusBadRequest, err)
+				if err == sql.ErrNoRows {
-				c.String(http.StatusBadRequest, err.Error())
+					result = "0"
+				} else {
+					c.AbortWithError(http.StatusBadRequest, err)
+					c.String(http.StatusBadRequest, err.Error())
+				}
 			}
 			c.JSON(http.StatusOK, gin.H{
 				"result": result,
 			})
 
 		case "get-opdetails-electrical":
-			var result2, result3, result4, result5 string
+			var result2, result3, result4, result5, result6, result7, result8, result9, result10 string
 			array := []string{}
 			array2 := []string{}
 			array3 := []string{}
 			array4 := []string{}
 			array5 := []string{}
+			array6 := []string{}
+			array7 := []string{}
+			array8 := []string{}
+			array9 := []string{}
+			array10 := []string{}
 
-			results, err := db.Query("SELECT IFNULL(assessedbyid, 0) AS result, IFNULL(reviewedbyid, 0) AS result2, IFNULL(ref_bldgcomputationsheetid, 0) AS result3, IFNULL(amount, 0) AS result4, IFNULL(opDate, '') AS result5 FROM electrical_orderofpayment_new WHERE electricalid = ?", data)
+			results, err := db.Query(`SELECT IFNULL(e.electricalNo, '') AS result, IFNULL(c.firstName, '') AS result2, IFNULL(c.middleInitial, '') AS result3, IFNULL(c.lastName, '') AS result4, IFNULL(e.locationofinstallation, '') AS result5, IFNULL(re.type, '') AS result6, IFNULL(em.employeename, '') AS result7, IFNULL(rb.accountdescription, '') AS result8, IFNULL(o.amount, '') AS result9, IFNULL(o.opDate, '') AS result10 
+                                FROM electrical e, customer c, electrical_orderofpayment_new o, ref_electrical_type re, ref_bldgcomputationsheet rb, employee em WHERE e.customerid = c.customerid AND e.electricalid = o.electricalid AND e.ref_electrical_typeid = re.ref_electrical_typeid AND o.ref_bldgcomputationsheetid = rb.ref_bldgcomputationsheetid AND o.assessedbyid = em.employeeid AND e.electricalid = ?`, data)
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)
 				c.String(http.StatusBadRequest, err.Error())
 			}
 			for results.Next() {
-				err = results.Scan(&result, &result2, &result3, &result4, &result5)
+				err = results.Scan(&result, &result2, &result3, &result4, &result5, &result6, &result7, &result8, &result9, &result10)
 				if err != nil {
 					c.AbortWithError(http.StatusBadRequest, err)
 					c.String(http.StatusBadRequest, err.Error())
@@ -567,17 +577,27 @@ func connect() {
 				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)
+				array10 = append(array10, result10)
 
 			}
 			c.JSON(http.StatusOK, gin.H{
-				"result":  array,
+				"result":   array,
-				"result2": array2,
+				"result2":  array2,
-				"result3": array3,
+				"result3":  array3,
-				"result4": array4,
+				"result4":  array4,
-				"result5": array5,
+				"result5":  array5,
+				"result6":  array6,
+				"result7":  array7,
+				"result8":  array8,
+				"result9":  array9,
+				"result10": array10,
 			})
 
-    case "get-paymentname":
+		case "get-paymentname":
 			err := db.QueryRow("SELECT IFNULL(accountdescription, '') AS result FROM ref_bldgcomputationsheet WHERE ref_bldgcomputationsheetid = ?", data).Scan(&result)
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)

src/components/Box/Box.tsx

@@ -6,7 +6,7 @@ interface Props {
   color?: string
   children: JSXElement
   curved?: boolean
-  padding?: number
+  padding?: string
   background?: string
 }
 
@@ -14,7 +14,7 @@ export default (props: Props) => {
   const boxClass = createMemo(() => (props.curved ? 'curvedbox' : 'box'))
 
   return (
-    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding}rem; background-color: ${props.background || 'none'}`}>
+    <section class={boxClass()} style={`border: ${props.thickness}px solid ${props.color || 'white'}; padding: ${props.padding || 0}; background-color: ${props.background || 'none'}`}>
       {props.children}
     </section>
   )

src/components/Column/Column.tsx

@@ -5,12 +5,13 @@ interface Props {
   children: JSXElement
   content?: 'top' | 'center' | 'bottom' | 'split' | 'spaced'
   gap?: number
+  padding?: string
 }
 
 export default (props: Props) => {
   return (
     <>
-      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem`}>
+      <section class={`column-${props.content || 'center'}`} style={`gap: ${props.gap}rem; padding: ${props.padding || 0}`}>
         {props.children}
       </section>
     </>

src/pages/LoginPage/Login.tsx

@@ -76,7 +76,7 @@ export default () => {
 
           <Padding top={2} left={0} right={0} bottom={0}>
             <Row>
-              <Box curved thickness={2} padding={2} color="#2f465cd7" background="#04040654">
+              <Box curved thickness={2} padding="2rem" color="#2f465cd7" background="#04040654">
                 <Row>
                   <span class="box-title">Login</span>
                 </Row>
@@ -132,7 +132,7 @@ export default () => {
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>
               <Row>
-                <Box curved thickness={3} color="white" padding={1}>
+                <Box curved thickness={3} color="white" padding="1rem">
                   <h2>Login Successful</h2>
                 </Box>
               </Row>
@@ -150,7 +150,7 @@ export default () => {
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>
               <Row>
-                <Box curved thickness={3} color="white" padding={1}>
+                <Box curved thickness={3} color="white" padding="1rem">
                   <h2>Login Failed</h2>
                 </Box>
               </Row>

src/pages/MainPage/Main.sass

@@ -92,6 +92,11 @@ h1
 
   &__application-number
     font-size: 1.75rem
+    font-weight: 700
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    align-items: center
 
   &__name
     padding: 1rem 0 0 0
@@ -111,4 +116,3 @@ h1
 
     &__detail
       font-size: 1rem
-

src/pages/MainPage/Main.tsx

@@ -15,6 +15,10 @@ export default () => {
   const [assessor, setAssessor] = createSignal('')
   const [approver, setApprover] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
+  const [client, setClient] = createSignal('')
+  const [location, setLocation] = createSignal('')
+  const [type, setType] = createSignal('')
+  const [applicationNo, setApplicationNo] = createSignal('')
 
   const getListForApproval = async () => {
     try {
@@ -60,10 +64,13 @@ export default () => {
 
   const getopdetails = async () => {
     const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
-    setTotalOp(calculateTotal(op.result4))
+    setApplicationNo(op.result[0])
-    setAssessor(await getEmployeeName(op.result[0]))
+    setAssessor(op.result7[0])
-    setApprover(await getEmployeeName(op.result2[0]))
+    setLocation(op.result5[0])
+    setType(op.result6[0])
     setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
+    setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
+    setTotalOp(calculateTotal(op.result9))
   }
 
   const calculateTotal = (list: number[]) => {
@@ -94,6 +101,20 @@ export default () => {
     }
   }
 
+  const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
+    let result
+    if (firstname.length > 0) {
+      if (middleinitial.length > 0) {
+        result = `${firstname} ${middleinitial}. ${lastname}`
+      } else {
+        result = `${firstname} ${lastname}`
+      }
+    } else {
+      result = lastname
+    }
+    return result
+  }
+
   onMount(async () => {
     await load()
   })
@@ -159,12 +180,24 @@ export default () => {
                       <td>
                         <ModalButton class="modal" label="Show Details" design="bo-link" background="#121e2acc" color="#ffffffec">
                           <Padding top={0} left={2} right={2} bottom={0}>
-                            <Box curved thickness={1} padding={1}>
+                            <Box curved thickness={1} padding="1rem">
-                              <span class="modal__application-number">25-0000000123</span>
+                              <span class="modal__application-number">{applicationNo()}</span>
                             </Box>
-                            <Row>
+                            <section class="modal__row">
-                              <span class="modal__name">Sample Name</span>
+                              <span class="modal__row__label">Name of Applicant:</span>
-                            </Row>
+                              <span class="modal__row__detail">{client()}</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>

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} color="#2f465cd7" background="#04040654">
+              <Box curved thickness={2} padding="2rem" color="#2f465cd7" background="#04040654">
                 <Row>
                   <span class="box-title">Registration</span>
                 </Row>
@@ -301,7 +301,7 @@ export default () => {
           <Padding top={1} bottom={1} left={4} right={4}>
             <Column>
               <Row>
-                <Box curved thickness={3} color="black" padding={1}>
+                <Box curved thickness={3} color="black" padding="1rem">
                   <h2>e-Sign Registration Completed</h2>
                 </Box>
               </Row>