From 634bb6a20932fd60a087dc7f79b6532451312462 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Wed, 1 Oct 2025 16:18:50 +0800
Subject: [PATCH] Updated main page

---
 src/pages/MainPage/Main.sass |   4 +
 src/pages/MainPage/Main.tsx  | 165 +++++++++++++++++------------------
 2 files changed, 82 insertions(+), 87 deletions(-)

diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index 787c898..e3a9cc8 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -116,3 +116,7 @@ h1
 
     &__detail
       font-size: 1rem
+
+      &__price
+        font-size: 1.75rem
+        font-weight: 700
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index f87ef00..49b7943 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/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[]) => {
-    let newList: number[] = []
+  // const getListOfReadyForApprovalFiltered = async (list: number[]) => {
+  //   let newList: number[] = []
 
-    for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
-      if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
-        newList.push(list[i])
-      }
-    }
+  //   for (let i = 0; i < list.length; i++) {
+  //     const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
+  //       newList.push(list[i])
+  //     }
+  //   }
 
-    return [...newList]
-  }
+  //   return [...newList]
+  // }
 
-  const getApplicationById = async (list: number[]) => {
-    let applicationList: string[] = []
+  // const getApplicationById = async (list: number[]) => {
+  //   let applicationList: string[] = []
 
-    for (let i = 0; i < list.length; i++) {
-      const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
-      applicationList.push(response.result)
-    }
+  //   for (let i = 0; i < list.length; i++) {
+  //     const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
+  //     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 op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
-    setApplicationNo(op.result[0])
+  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])
@@ -74,33 +76,10 @@ export default () => {
   }
 
   const calculateTotal = (list: number[]) => {
-    let total = 0
-    for (let i = 0; i < list.length; i++) {
-      total += parseInt(list[i].toString())
-    }
+    const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
     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,50 +153,62 @@ export default () => {
                     </tr>
                   </thead>
                   <tbody>
-                    <tr>
-                      <td>111</td>
-                      <td>11</td>
-                      <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="1rem">
-                              <span class="modal__application-number">{applicationNo()}</span>
-                            </Box>
-                            <section class="modal__row">
-                              <span class="modal__row__label">Name of Applicant:</span>
-                              <span class="modal__row__detail">{client()}</span>
-                            </section>
+                    {applicationList().map((item, index) => (
+                      <tr>
+                        <td>{item}</td>
+                        <td>{nameList()[index]}</td>
 
-                            <section class="modal__row">
-                              <span class="modal__row__label">Location:</span>
-                              <span class="modal__row__detail">{location()}</span>
-                            </section>
+                        <td>
+                          <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">{item}</span>
+                              </Box>
+                              <section class="modal__row">
+                                <span class="modal__row__label">Name of Applicant:</span>
+                                <span class="modal__row__detail">{nameList()[index]}</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">Location:</span>
+                                <span class="modal__row__detail">{location()}</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">Type:</span>
+                                <span class="modal__row__detail">{type().toUpperCase()}</span>
+                              </section>
 
-                            <section class="modal__row">
-                              <span class="modal__row__label">Total Fee:</span>
-                              <span class="modal__row__detail">
-                                {PESO} {totalOp().toFixed(2)}
-                              </span>
-                            </section>
+                              <section class="modal__row">
+                                <span class="modal__row__label">Assessed By:</span>
+                                <span class="modal__row__detail">{assessor()}</span>
+                              </section>
 
-                            <Row gap={1} padding="1rem 0 0 0">
-                              <Button label="Disapprove" edges="curved" design="bo-danger"></Button>
-                              <Button label="Approve" edges="curved" design="bo-primary"></Button>
-                            </Row>
-                          </Padding>
-                        </ModalButton>
-                      </td>
-                    </tr>
+                              <section class="modal__row">
+                                <span class="modal__row__label">Total Fee:</span>
+                                <span class="modal__row__detail__price">
+                                  {PESO} {totalOp().toFixed(2)}
+                                </span>
+                              </section>
+
+                              <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>
+                            </Padding>
+                          </ModalButton>
+                        </td>
+                      </tr>
+                    ))}
                   </tbody>
                 </table>
               </Tabs.Content>