Updated main page

src/pages/MainPage/Main.sass

@@ -24,6 +24,8 @@ h1
   &__list
     position: relative
     display: flex
+    gap: 5rem
+    
 
   &__list[data-orientation="horizontal"]
     align-items: center
@@ -34,29 +36,42 @@ h1
 
   &__indicator
     position: absolute
-    background-color: hsl(200 98% 39%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
     transition: all 250ms
 
   &__indicator[data-orientation="horizontal"]
     bottom: -1px
-    height: 2px
+    height: 3px
 
   &__indicator[data-orientation="vertical"]
     right: -1px
     width: 2px
 
   &__trigger
+    // display: inline-block
+    // padding: 8px 16px
+    // outline: none
+    // cursor: pointer
+    background-color: vars.$background
+    border: none
+    border-radius: 6px 6px 0 0
+    color: vars.$textColor
+    padding: 0.75rem 1.75rem
+    width: 10rem
+    text-align: center
+    text-decoration: none
     display: inline-block
-    padding: 8px 16px
+    font-size: 1rem
-    outline: none
+    font-weight: 500
     cursor: pointer
+    // transition: all 0.2s ease-out
 
   &__trigger:hover
-    background-color: hsl(0 0% 98%)
+    background-color: color.adjust(vars.$background, $lightness: 20%)
-    color: hsl(240 5% 34%)
+    // color: hsl(240 5% 34%)
 
   &__trigger:focus-visible
-    background-color: hsl(240 5% 96%)
+    // background-color: hsl(240 5% 96%)
 
 .tabs__trigger[data-disabled],
 .tabs__trigger[data-disabled]:hover
@@ -67,25 +82,40 @@ h1
   padding: 16px
 
 .table
-  width: 100%
+  width: 90%
   border-collapse: collapse
   margin: 2rem
 
   th, td
-    border: 1px solid vars.$tableBorderColor
+    // border: 1px solid vars.$tableBorderColor
     padding: 0.75rem
     text-align: left
-    font-size: 1.1rem
+    font-size: 1rem
-
-  td:nth-child(1)
-    width: 12rem
-
-  td:nth-child(3)
-    width: 9rem
 
   th
     background-color: vars.$tableHeaderBackground
-    color: white
+    color: vars.$textColor
+    padding: 1rem
+
+  th:nth-child(1)
+    text-align: center
+    border-radius: 1rem 0 0 0
+
+  th:nth-child(3)
+    border-radius: 0 1rem 0 0
+
+  td
+    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
+
+  td:nth-child(1)
+    width: 10rem
+    text-align: center
+
+  td:nth-child(3)
+    width: 8.75rem
+
+  tbody tr:nth-child(even) 
+    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
 
 .modal
   font-weight: 500

src/pages/MainPage/Main.tsx

@@ -8,16 +8,24 @@ import dayjs from 'dayjs'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
+const ID = import.meta.env.VITE_ID
 
 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 [client, setClient] = createSignal('')
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
+  const [applicationId, setApplicationId] = createSignal(0)
+  const [assessorId, setAssessorId] = createSignal(0)
+
+  const [gflgu, setGflgu] = createSignal<number[]>([])
+  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
+  const [tfbo, setTfbo] = createSignal<number[]>([])
+
+  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
+  const [amountList, setAmountList] = createSignal<string[]>([])
+  const [dateOpList, setDateOpList] = createSignal<string[]>([])
 
   const [applicationList, setApplicationList] = createSignal<string[]>([])
   const [nameList, setNameList] = createSignal<string[]>([])
@@ -41,9 +49,16 @@ export default () => {
     setAssessor(op.result7[0])
     setLocation(op.result5[0])
     setType(op.result6[0])
-    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
+    setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-    setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
+    // setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
+    setApplicationId(op.result11[0])
+    setAssessorId(op.result12[0])
     setTotalOp(calculateTotal(op.result9))
+
+    setDescriptionList(op.result8)
+    setAmountList(op.result9)
+    setDateOpList(op.result10)
+    calculateAmounts()
   }
 
   const calculateTotal = (list: number[]) => {
@@ -51,18 +66,55 @@ export default () => {
     return total
   }
 
-  const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
+  // const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
-    let result
+  //   let result
-    if (firstname.length > 0) {
+  //   if (firstname.length > 0) {
-      if (middleinitial.length > 0) {
+  //     if (middleinitial.length > 0) {
-        result = `${firstname} ${middleinitial}. ${lastname}`
+  //       result = `${firstname} ${middleinitial}. ${lastname}`
-      } else {
+  //     } else {
-        result = `${firstname} ${lastname}`
+  //       result = `${firstname} ${lastname}`
+  //     }
+  //   } else {
+  //     result = lastname
+  //   }
+  //   return result
+  // }
+
+  const approveHandler = async () => {
+    const today = new Date()
+    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+
+    for (let i = 0; i < applicationList().length; i++) {
+      await ofetch(API + 'post-newstatus-electrical', {
+        method: 'POST',
+        body: { data: applicationId(), data2: formattedDate, data3: ID, data4: descriptionList()[i], data5: 'json' },
+      })
     }
-    } else {
-      result = lastname
   }
-    return result
+
+  const calculateAmounts = () => {
+    const amounts: string[] = amountList()
+    let gflguList: number[] = []
+    let gfdpwhList: number[] = []
+    let tfboList: number[] = []
+
+    for (let i = 0; i < amounts.length; i++) {
+      const gflgu = parseFloat(amounts[i]) * 0.8
+      const gfdpwh = parseFloat(amounts[i]) * 0.05
+      const tfbo = parseFloat(amounts[i]) * 0.15
+
+      const roundedGflgu = parseFloat(gflgu.toFixed(2))
+      const roundedGfdpwh = parseFloat(gfdpwh.toFixed(2))
+      const roundedTfbo = parseFloat(tfbo.toFixed(2))
+
+      gflguList.push(roundedGflgu)
+      gfdpwhList.push(roundedGfdpwh)
+      tfboList.push(roundedTfbo)
+    }
+
+    setGflgu(gflguList)
+    setGfdpwh(gfdpwhList)
+    setTfbo(tfboList)
   }
 
   onMount(async () => {
@@ -90,6 +142,7 @@ export default () => {
           </Row>
           <Row content="center">
             <Tabs aria-label="Main navigation" class="tabs">
+              <Row>
                 <Tabs.List class="tabs__list">
                   <Tabs.Trigger class="tabs__trigger" value="building">
                     Building
@@ -102,6 +155,8 @@ export default () => {
                   </Tabs.Trigger>
                   <Tabs.Indicator class="tabs__indicator" />
                 </Tabs.List>
+              </Row>
+
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
                   <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
@@ -116,11 +171,14 @@ export default () => {
                 <Row>
                   <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
+
+                <Row>
                   <table class="table">
                     <thead>
                       <tr>
                         <th>Application Number</th>
                         <th>Name</th>
+                        <th style="text-align: center">Show Details</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -164,6 +222,11 @@ export default () => {
                                   <span class="modal__row__detail">{assessor()}</span>
                                 </section>
 
+                                <section class="modal__row">
+                                  <span class="modal__row__label">Date Assessed:</span>
+                                  <span class="modal__row__detail">{dateOp().toUpperCase()}</span>
+                                </section>
+
                                 <section class="modal__row">
                                   <span class="modal__row__label">Total Fee:</span>
                                   <span class="modal__row__detail__price">
@@ -172,7 +235,7 @@ export default () => {
                                 </section>
 
                                 <Row gap={12} padding="2rem 0 0 0">
-                                <Button label="Disapprove" edges="curved" design="bo-danger"></Button>
+                                  <Button label="Cancel" edges="curved" design="bo-danger"></Button>
                                   <Button label="Approve" edges="curved" design="bo-primary"></Button>
                                 </Row>
                               </Padding>
@@ -182,6 +245,7 @@ export default () => {
                       ))}
                     </tbody>
                   </table>
+                </Row>
               </Tabs.Content>
             </Tabs>
           </Row>