Removed table

.env

@@ -1,3 +1,4 @@
 VITE_BACKEND=http://localhost:4320/api/
 VITE_HEAD=ARCH. KHASHAYAR L. TOGHYANI
-VITE_PESO=₱
+VITE_PESO=₱
+VITE_HEADID=276

backend/main.go

@@ -100,7 +100,7 @@ func connect() {
 			array2 := []string{}
 
 			results, err := db.Query(`SELECT IFNULL(e.electricalno, '') AS result, IF(c.firstName IS NULL OR c.firstName = '', c.lastName, CONCAT(c.firstName, ' ', IF(c.middleInitial IS NULL OR c.middleInitial = '', '', CONCAT(c.middleInitial, '. ')), c.lastName) ) AS result2 
-                                FROM iips.electrical e JOIN iips.customer c ON e.customerid = c.customerid JOIN iips.ref_elec_occupancy ec ON e.ref_elec_occupancyid = ec.ref_elec_occupancyid JOIN iips.electricaldocflowtxn ed ON e.electricalid = ed.electricalid JOIN (SELECT electricalid, MAX(electricaldocflowtxnid) AS latest_electricaldocflowtxnid FROM electricaldocflowtxn GROUP BY electricalid) latest_doc ON ed.electricalid = latest_doc.electricalid  AND ed.electricaldocflowtxnid = latest_doc.latest_electricaldocflowtxnid WHERE  remarks = ? ORDER BY e.electricalno ASC`, "FOR ELECTRICAL ORDER OF PAYMENT APPROVAL")
+                                FROM iips.electrical e JOIN iips.customer c ON e.customerid = c.customerid JOIN iips.ref_elec_occupancy ec ON e.ref_elec_occupancyid = ec.ref_elec_occupancyid JOIN iips.electricaldocflowtxn ed ON e.electricalid = ed.electricalid JOIN (SELECT electricalid, MAX(electricaldocflowtxnid) AS latest_electricaldocflowtxnid FROM electricaldocflowtxn GROUP BY electricalid) latest_doc ON ed.electricalid = latest_doc.electricalid  AND ed.electricaldocflowtxnid = latest_doc.latest_electricaldocflowtxnid WHERE  remarks = ? AND is_approve = 0 ORDER BY e.electricalno ASC`, "FOR ELECTRICAL ORDER OF PAYMENT APPROVAL")
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)
 				c.String(http.StatusBadRequest, err.Error())
@@ -184,37 +184,6 @@ func connect() {
 				"result": array,
 			})
 
-		case "get-listopapproval-electrical2":
-			var status string
-			array := []string{}
-
-			results, err := db.Query("SELECT DISTINCT IFNULL(electricalid, 0) AS result FROM electricaldocflowtxn WHERE remarks = ?", "FOR ELECTRICAL ORDER OF PAYMENT APPROVAL")
-			if err != nil {
-				c.AbortWithError(http.StatusBadRequest, err)
-				c.String(http.StatusBadRequest, err.Error())
-			}
-			for results.Next() {
-				var result string
-				err = results.Scan(&result)
-				if err != nil {
-					c.AbortWithError(http.StatusBadRequest, err)
-					c.String(http.StatusBadRequest, err.Error())
-				}
-				err = db.QueryRow("SELECT IFNULL(remarks, '') AS status FROM electricaldocflowtxn WHERE electricaldocflowtxnid = (SELECT MAX(electricaldocflowtxnid) FROM electricaldocflowtxn WHERE electricalid = ?)", result).Scan(&status)
-				if err != nil {
-					c.AbortWithError(http.StatusBadRequest, err)
-					c.String(http.StatusBadRequest, err.Error())
-					return
-				}
-
-				if status == "FOR ELECTRICAL ORDER OF PAYMENT APPROVAL" {
-					array = append(array, result)
-				}
-			}
-			c.JSON(http.StatusOK, gin.H{
-				"result": array,
-			})
-
 		}
 
 	})
@@ -554,7 +523,7 @@ func connect() {
 			})
 
 		case "get-opdetails-electrical":
-			var result2, result3, result4, result5, result6, result7, result8, result9, result10 string
+			var result2, result3, result4, result5, result6, result7, result8, result9, result10, result11, result12 string
 			array := []string{}
 			array2 := []string{}
 			array3 := []string{}
@@ -565,15 +534,17 @@ func connect() {
 			array8 := []string{}
 			array9 := []string{}
 			array10 := []string{}
+			array11 := []string{}
+			array12 := []string{}
 
-			results, err := db.Query(`SELECT IFNULL(e.electricalNo, '') AS result, IFNULL(c.firstName, '') AS result2, IFNULL(c.middleInitial, '') AS result3, IFNULL(c.lastName, '') AS result4, IFNULL(e.locationofinstallation, '') AS result5, IFNULL(re.type, '') AS result6, IFNULL(em.employeename, '') AS result7, IFNULL(rb.accountdescription, '') AS result8, IFNULL(o.amount, '') AS result9, IFNULL(o.opDate, '') AS result10 
+			results, err := db.Query(`SELECT IFNULL(e.electricalNo, '') AS result, IFNULL(c.firstName, '') AS result2, IFNULL(c.middleInitial, '') AS result3, IFNULL(c.lastName, '') AS result4, IFNULL(e.locationofinstallation, '') AS result5, IFNULL(re.type, '') AS result6, IFNULL(em.employeename, '') AS result7, IFNULL(rb.accountdescription, '') AS result8, IFNULL(o.amount, '') AS result9, IFNULL(o.opDate, '') AS result10, IFNULL(e.electricalid, 0) AS result11, IFNULL(o.assessedbyid, 0) AS result12
                                 FROM electrical e, customer c, electrical_orderofpayment_new o, ref_electrical_type re, ref_bldgcomputationsheet rb, employee em WHERE e.customerid = c.customerid AND e.electricalid = o.electricalid AND e.ref_electrical_typeid = re.ref_electrical_typeid AND o.ref_bldgcomputationsheetid = rb.ref_bldgcomputationsheetid AND o.assessedbyid = em.employeeid AND e.electricalNo = ?`, data)
 			if err != nil {
 				c.AbortWithError(http.StatusBadRequest, err)
 				c.String(http.StatusBadRequest, err.Error())
 			}
 			for results.Next() {
-				err = results.Scan(&result, &result2, &result3, &result4, &result5, &result6, &result7, &result8, &result9, &result10)
+				err = results.Scan(&result, &result2, &result3, &result4, &result5, &result6, &result7, &result8, &result9, &result10, &result11, &result12)
 				if err != nil {
 					c.AbortWithError(http.StatusBadRequest, err)
 					c.String(http.StatusBadRequest, err.Error())
@@ -588,6 +559,8 @@ func connect() {
 				array8 = append(array8, result8)
 				array9 = append(array9, result9)
 				array10 = append(array10, result10)
+				array11 = append(array11, result11)
+				array12 = append(array12, result12)
 
 			}
 			c.JSON(http.StatusOK, gin.H{
@@ -601,6 +574,8 @@ func connect() {
 				"result8":  array8,
 				"result9":  array9,
 				"result10": array10,
+				"result11": array11,
+				"result12": array12,
 			})
 
 		case "get-paymentname":
@@ -667,10 +642,6 @@ func connect() {
 			Data3 string `json:"data3"`
 			Data4 string `json:"data4"`
 			Data5 string `json:"data5"`
-			Data6 string `json:"data6"`
-			Data7 string `json:"data7"`
-			Data8 string `json:"data8"`
-			Data9 string `json:"data9"`
 		}
 		var registrationData RegistrationData
 		if err := c.ShouldBindJSON(&registrationData); err != nil {
@@ -685,14 +656,14 @@ func connect() {
 		c.Writer.Header().Set("X-Download-Options", "noopen")
 		c.Writer.Header().Set("Referrer-Policy", "no-referrer")
 
-		dbpost, err := db.Prepare(`INSERT INTO electrical_orderofpayment_new (electrical_orderofpayment_newid, electricalid, assessedbyid, reviewedbyid, ref_bldgcomputationsheetid, amount, orNo, is_approve, for_approval, is_release, is_paid, popstransmitted, opDate, amt_Gflgu, amt_Gfdpwh, amt_Tfbo, optn, datePaid, is_delete, securitycode, barcode)
+		dbpost, err := db.Prepare(`INSERT INTO electricaldocflowtxn (electricaldocflowtxnid, electricalid, txndate, remarks, comments, is_tag, tagword, is_approve, employeeid, is_delete) 
-                              VALUES (NULL, ?, ?, ?, ?, ?, NULL, 1, 1, 0, 0, 0, ?, ?, ?, ?, NULL, NULL, 0, NULL, NULL)`)
+                              VALUES (NULL, ?, ?, NULL, ?, ?, 0, ?, 0)`)
 		if err != nil {
 			panic(err.Error())
 		}
 		defer dbpost.Close()
 
-		exec, err := dbpost.Exec(registrationData.Data, registrationData.Data2, registrationData.Data3, registrationData.Data4, registrationData.Data5, registrationData.Data6, registrationData.Data7, registrationData.Data8, registrationData.Data9)
+		exec, err := dbpost.Exec(registrationData.Data, registrationData.Data2, registrationData.Data3, registrationData.Data4, registrationData.Data5)
 		if err != nil {
 			panic(err.Error())
 		}

src/assets/images/svg/background.svg

@@ -18,22 +18,24 @@
        height="1734.7687"
        x="-313.60806"
        y="-317.57779" /></g><g
-     id="layer3"><text
+     id="layer3"
+     style="display:inline"
+     transform="matrix(0.84905245,0,0,0.84905245,147.2801,58.567587)"><text
        xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:149.314px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334c65;fill-opacity:1;stroke-width:10.9326"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:139.172px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334c65;fill-opacity:1;stroke-width:10.1901"
-       x="958.40466"
+       x="960.53656"
-       y="312.0582"
+       y="331.00674"
        id="text9"><tspan
          id="tspan9"
-         x="958.40466"
+         x="960.53656"
-         y="312.0582"
+         y="331.00674"
-         style="fill:#334c65;fill-opacity:1;stroke-width:10.9326">Office of the City Building Officials</tspan></text><text
+         style="fill:#334c65;fill-opacity:1;stroke-width:10.1901">Office of the City Building Officials</tspan></text><text
        xml:space="preserve"
-       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:242.169px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334d66;fill-opacity:1;stroke-width:17.7313"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:218.194px;font-family:Ballet;-inkscape-font-specification:Ballet;text-align:center;writing-mode:lr-tb;direction:ltr;text-anchor:middle;opacity:0.25;fill:#334d66;fill-opacity:1;stroke-width:15.9759"
-       x="966.625"
+       x="958.34998"
-       y="777.97443"
+       y="712.8595"
        id="text10"><tspan
          id="tspan10"
-         x="966.625"
+         x="958.34998"
-         y="777.97443"
+         y="712.8595"
-         style="fill:#334d66;fill-opacity:1;stroke-width:17.7313">e-Sign Application</tspan></text></g></svg>
+         style="fill:#334d66;fill-opacity:1;stroke-width:15.9759">e-Sign Application</tspan></text></g></svg>

src/components/Table/Table.sass

@@ -1,23 +1,23 @@
-@use '/src/styles/variables.sass' as vars
+// @use '/src/styles/variables.sass' as vars
-@use 'sass:color'
+// @use 'sass:color'
 
-.table
+// .table
-  width: 100%
+//   width: 10%
-  border-collapse: collapse
+//   border-collapse: collapse
-  margin: 2rem
+//   margin: 2rem
 
-  th, td
+//   th, td
-    border: 1px solid vars.$tableBorderColor
+//     border: 1px solid vars.$tableBorderColor
-    padding: 0.75rem
+//     padding: 0.75rem
-    text-align: left
+//     text-align: left
-    font-size: 1.1rem
+//     font-size: 1.1rem
 
-  td:nth-child(1)
+//   td:nth-child(1)
-    width: 12rem
+//     width: 12rem
 
-  td:nth-child(3)
+//   td:nth-child(3)
-    width: 9rem
+//     width: 9rem
 
-  th
+//   th
-    background-color: vars.$tableHeaderBackground
+//     background-color: vars.$tableHeaderBackground
-    color: white
+//     color: white

src/index.sass

@@ -9,11 +9,12 @@
   position: absolute
   top: 0
   left: 0
-  min-width: 90vw
+  min-width: 99vw
   min-height: 90vh
   object-fit: cover
   z-index: -1
   opacity: 1
+  background-attachment: fixed
 
 .close-text
   padding: 3rem 0 0 0

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 {
+  //   } else {
-      result = lastname
+  //     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' },
+      })
     }
-    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,18 +142,21 @@ export default () => {
           </Row>
           <Row content="center">
             <Tabs aria-label="Main navigation" class="tabs">
-              <Tabs.List class="tabs__list">
+              <Row>
-                <Tabs.Trigger class="tabs__trigger" value="building">
+                <Tabs.List class="tabs__list">
-                  Building
+                  <Tabs.Trigger class="tabs__trigger" value="building">
-                </Tabs.Trigger>
+                    Building
-                <Tabs.Trigger class="tabs__trigger" value="occupancy">
+                  </Tabs.Trigger>
-                  Occupancy
+                  <Tabs.Trigger class="tabs__trigger" value="occupancy">
-                </Tabs.Trigger>
+                    Occupancy
-                <Tabs.Trigger class="tabs__trigger" value="electrical">
+                  </Tabs.Trigger>
-                  Electrical
+                  <Tabs.Trigger class="tabs__trigger" value="electrical">
-                </Tabs.Trigger>
+                    Electrical
-                <Tabs.Indicator class="tabs__indicator" />
+                  </Tabs.Trigger>
-              </Tabs.List>
+                  <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,72 +171,81 @@ export default () => {
                 <Row>
                   <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
-                <table class="table">
+
-                  <thead>
+                <Row>
-                    <tr>
+                  <table class="table">
-                      <th>Application Number</th>
+                    <thead>
-                      <th>Name</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {applicationList().map((item, index) => (
                       <tr>
-                        <td>{item}</td>
+                        <th>Application Number</th>
-                        <td>{nameList()[index]}</td>
+                        <th>Name</th>
-
+                        <th style="text-align: center">Show Details</th>
-                        <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">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>
-                              </section>
-
-                              <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>
-                    ))}
+                    </thead>
-                  </tbody>
+                    <tbody>
-                </table>
+                      {applicationList().map((item, index) => (
+                        <tr>
+                          <td>{item}</td>
+                          <td>{nameList()[index]}</td>
+
+                          <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">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>
+                                </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">
+                                    {PESO} {totalOp().toFixed(2)}
+                                  </span>
+                                </section>
+
+                                <Row gap={12} padding="2rem 0 0 0">
+                                  <Button label="Cancel" edges="curved" design="bo-danger"></Button>
+                                  <Button label="Approve" edges="curved" design="bo-primary"></Button>
+                                </Row>
+                              </Padding>
+                            </ModalButton>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </Row>
               </Tabs.Content>
             </Tabs>
           </Row>