Updated main page

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>