Updated main page

src/pages/MainPage/Main.sass

@@ -116,3 +116,7 @@ h1
 
     &__detail
       font-size: 1rem
+
+      &__price
+        font-size: 1.75rem
+        font-weight: 700

src/pages/MainPage/Main.tsx

@@ -18,40 +18,43 @@ export default () => {
   const [client, setClient] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
-  const [applicationNo, setApplicationNo] = createSignal('')
+
+  const [applicationList, setApplicationList] = createSignal<string[]>([])
+  const [nameList, setNameList] = createSignal<string[]>([])
 
   const getListForApproval = async () => {
     try {
       const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
-      return response.result
+      setApplicationList(response.result)
+      setNameList(response.result2)
     } catch (error) {
       console.error(error)
     }
   }
 
-  const getListOfReadyForApprovalFiltered = async (list: number[]) => {
+  // const getListOfReadyForApprovalFiltered = async (list: number[]) => {
-    let newList: number[] = []
+  //   let newList: number[] = []
 
-    for (let i = 0; i < list.length; i++) {
+  //   for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
-      if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
+  //     if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
-        newList.push(list[i])
+  //       newList.push(list[i])
-      }
+  //     }
-    }
+  //   }
 
-    return [...newList]
+  //   return [...newList]
-  }
+  // }
 
-  const getApplicationById = async (list: number[]) => {
+  // const getApplicationById = async (list: number[]) => {
-    let applicationList: string[] = []
+  //   let applicationList: string[] = []
 
-    for (let i = 0; i < list.length; i++) {
+  //   for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
-      applicationList.push(response.result)
+  //     applicationList.push(response.result)
-    }
+  //   }
 
-    setUpdatedList([...applicationList])
+  //   setUpdatedList([...applicationList])
-  }
+  // }
 
   const load = async () => {
     // const listForApproval = await getListForApproval()
@@ -59,12 +62,11 @@ export default () => {
     // await getApplicationById(listOfReadyForApprovalFiltered)
 
     // console.log(listOfReadyForApprovalFiltered)
-    await getopdetails()
+    await getListForApproval()
   }
 
-  const getopdetails = async () => {
+  const getopdetails = async (applicationNo: string) => {
-    const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
+    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
-    setApplicationNo(op.result[0])
     setAssessor(op.result7[0])
     setLocation(op.result5[0])
     setType(op.result6[0])
@@ -74,33 +76,10 @@ export default () => {
   }
 
   const calculateTotal = (list: number[]) => {
-    let total = 0
+    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
-    for (let i = 0; i < list.length; i++) {
-      total += parseInt(list[i].toString())
-    }
     return total
   }
 
-  const getEmployeeName = async (id: string) => {
-    try {
-      const response = await ofetch(API + 'get-employeename/' + id, { parseResponse: JSON.parse })
-      const result = response.result
-      return result
-    } catch {
-      return ''
-    }
-  }
-
-  const getPaymentName = async (id: string) => {
-    try {
-      const response = await ofetch(API + 'get-paymentname/' + id, { parseResponse: JSON.parse })
-      const result = response.result
-      return result
-    } catch {
-      return ''
-    }
-  }
-
   const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
     let result
     if (firstname.length > 0) {
@@ -174,18 +153,29 @@ export default () => {
                     </tr>
                   </thead>
                   <tbody>
+                    {applicationList().map((item, index) => (
                       <tr>
-                      <td>111</td>
+                        <td>{item}</td>
-                      <td>11</td>
+                        <td>{nameList()[index]}</td>
+
                         <td>
-                        <ModalButton class="modal" label="Show Details" design="bo-link" background="#121e2acc" color="#ffffffec">
+                          <ModalButton
+                            class="modal"
+                            label="Show Details"
+                            design="bo-link"
+                            background="#121e2acc"
+                            color="#ffffffec"
+                            function={async () => {
+                              await getopdetails(item)
+                            }}
+                          >
                             <Padding top={0} left={2} right={2} bottom={0}>
                               <Box curved thickness={1} padding="1rem">
-                              <span class="modal__application-number">{applicationNo()}</span>
+                                <span class="modal__application-number">{item}</span>
                               </Box>
                               <section class="modal__row">
                                 <span class="modal__row__label">Name of Applicant:</span>
-                              <span class="modal__row__detail">{client()}</span>
+                                <span class="modal__row__detail">{nameList()[index]}</span>
                               </section>
 
                               <section class="modal__row">
@@ -205,12 +195,12 @@ export default () => {
 
                               <section class="modal__row">
                                 <span class="modal__row__label">Total Fee:</span>
-                              <span class="modal__row__detail">
+                                <span class="modal__row__detail__price">
                                   {PESO} {totalOp().toFixed(2)}
                                 </span>
                               </section>
 
-                            <Row gap={1} padding="1rem 0 0 0">
+                              <Row gap={12} padding="2rem 0 0 0">
                                 <Button label="Disapprove" edges="curved" design="bo-danger"></Button>
                                 <Button label="Approve" edges="curved" design="bo-primary"></Button>
                               </Row>
@@ -218,6 +208,7 @@ export default () => {
                           </ModalButton>
                         </td>
                       </tr>
+                    ))}
                   </tbody>
                 </table>
               </Tabs.Content>