From ab2ba8bb207891188ab230460e0a10a9894c0c3f Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 30 Sep 2025 16:54:15 +0800
Subject: [PATCH] Updated main page

---
 src/pages/MainPage/Main.sass |  98 +++++++++++++++++++++
 src/pages/MainPage/Main.tsx  | 165 +++++++++++++++++++++++++++++++++--
 2 files changed, 258 insertions(+), 5 deletions(-)

diff --git a/src/pages/MainPage/Main.sass b/src/pages/MainPage/Main.sass
index f52d846..7e66e00 100644
--- a/src/pages/MainPage/Main.sass
+++ b/src/pages/MainPage/Main.sass
@@ -14,3 +14,101 @@ h1
 
 .name
   font-size: 1.25rem
+
+.tabs
+  width: 100%
+
+  &[data-orientation="vertical"]
+    display: flex
+
+  &__list
+    position: relative
+    display: flex
+
+  &__list[data-orientation="horizontal"]
+    align-items: center
+
+  &__list[data-orientation="vertical"]
+    flex-direction: column
+    align-items: stretch
+
+  &__indicator
+    position: absolute
+    background-color: hsl(200 98% 39%)
+    transition: all 250ms
+
+  &__indicator[data-orientation="horizontal"]
+    bottom: -1px
+    height: 2px
+
+  &__indicator[data-orientation="vertical"]
+    right: -1px
+    width: 2px
+
+  &__trigger
+    display: inline-block
+    padding: 8px 16px
+    outline: none
+    cursor: pointer
+
+  &__trigger:hover
+    background-color: hsl(0 0% 98%)
+    color: hsl(240 5% 34%)
+
+  &__trigger:focus-visible
+    background-color: hsl(240 5% 96%)
+
+.tabs__trigger[data-disabled],
+.tabs__trigger[data-disabled]:hover
+  opacity: 0.5
+  background-color: transparent
+
+.tabs__content
+  padding: 16px
+
+.table
+  width: 100%
+  border-collapse: collapse
+  margin: 2rem
+
+  th, td
+    border: 1px solid vars.$tableBorderColor
+    padding: 0.75rem
+    text-align: left
+    font-size: 1.1rem
+
+  td:nth-child(1)
+    width: 12rem
+
+  td:nth-child(3)
+    width: 9rem
+
+  th
+    background-color: vars.$tableHeaderBackground
+    color: white
+
+.modal
+  font-weight: 500
+
+  &__application-number
+    font-size: 1.75rem
+
+  &__name
+    padding: 1rem 0 0 0
+    font-size: 1rem
+
+  &__row
+    display: flex
+    flex-direction: column
+    flex-wrap: wrap
+    justify-content: flex-start
+    align-items: flex-start
+    gap: 0.5rem
+    padding: 2rem 0 0 0
+
+    &__label
+      font-size: 0.75rem
+
+    &__detail
+      font-size: 1rem
+
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 6d60518..3543735 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -1,9 +1,102 @@
 import './Main.sass'
-import { Logo, Link, Page, Row, Padding, Table } from '../../components/'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Column } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
-// import { ofetch } from 'ofetch'
+import { Tabs } from '@kobalte/core/tabs'
+import { ofetch } from 'ofetch'
+import { onMount, createSignal } from 'solid-js'
+import dayjs from 'dayjs'
+
+const API = import.meta.env.VITE_BACKEND
 
 export default () => {
+  const [updatedList, setUpdatedList] = createSignal<string[]>([])
+  const [totalOp, setTotalOp] = createSignal(0)
+  const [assessor, setAssessor] = createSignal('')
+  const [approver, setApprover] = createSignal('')
+  const [dateOp, setDateOp] = createSignal('')
+
+  const getListForApproval = async () => {
+    try {
+      const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
+      return response.result
+    } catch (error) {
+      console.error(error)
+    }
+  }
+
+  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])
+      }
+    }
+
+    return [...newList]
+  }
+
+  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)
+    }
+
+    setUpdatedList([...applicationList])
+  }
+
+  const load = async () => {
+    // const listForApproval = await getListForApproval()
+    // const listOfReadyForApprovalFiltered = await getListOfReadyForApprovalFiltered(listForApproval)
+    // await getApplicationById(listOfReadyForApprovalFiltered)
+
+    // console.log(listOfReadyForApprovalFiltered)
+    await getopdetails()
+  }
+
+  const getopdetails = async () => {
+    const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
+    setTotalOp(calculateTotal(op.result4))
+    setAssessor(await getEmployeeName(op.result[0]))
+    setApprover(await getEmployeeName(op.result2[0]))
+    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
+  }
+
+  const calculateTotal = (list: number[]) => {
+    let total = 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 ''
+    }
+  }
+
+  onMount(async () => {
+    await load()
+  })
+
   return (
     <>
       <Page alignment="column">
@@ -24,10 +117,72 @@ export default () => {
             </Row>
           </Row>
           <Row content="center">
-            <h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
-          </Row>
+            <Tabs aria-label="Main navigation" class="tabs">
+              <Tabs.List class="tabs__list">
+                <Tabs.Trigger class="tabs__trigger" value="building">
+                  Building
+                </Tabs.Trigger>
+                <Tabs.Trigger class="tabs__trigger" value="occupancy">
+                  Occupancy
+                </Tabs.Trigger>
+                <Tabs.Trigger class="tabs__trigger" value="electrical">
+                  Electrical
+                </Tabs.Trigger>
+                <Tabs.Indicator class="tabs__indicator" />
+              </Tabs.List>
+              <Tabs.Content class="tabs__content" value="building">
+                <Row>
+                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
+                </Row>
+              </Tabs.Content>
+              <Tabs.Content class="tabs__content" value="occupancy">
+                <Row>
+                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
+                </Row>
+              </Tabs.Content>
+              <Tabs.Content class="tabs__content" value="electrical">
+                <Row>
+                  <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
+                </Row>
+                <table class="table">
+                  <thead>
+                    <tr>
+                      <th>Application Number</th>
+                      <th>Name</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <td>111</td>
+                      <td>11</td>
+                      <td>
+                        <ModalButton class="modal" label="Show Details" design="bo-link" background="#111d29e1" color="#ffffffec">
+                          <Padding top={0} left={2} right={2} bottom={0}>
+                            <Column>
+                              <Box curved thickness={1} padding={1}>
+                                <span class="modal__application-number">25-0000000123</span>
+                              </Box>
+                              <span class="modal__name">Sample Name</span>
 
-          <Table />
+                              <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">Total Fee:</span>
+                                <span class="modal__row__detail">P {totalOp().toFixed(2)}</span>
+                              </section>
+                            </Column>
+                          </Padding>
+                        </ModalButton>
+                      </td>
+                    </tr>
+                  </tbody>
+                </table>
+              </Tabs.Content>
+            </Tabs>
+          </Row>
         </Padding>
       </Page>
     </>