src/pages/MainPage/Main.sass

@@ -84,7 +84,6 @@ h1
   width: 90%
   border-collapse: collapse
   margin: 2rem
-  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
 
   th, td
     // border: 1px solid vars.$tableBorderColor
@@ -121,16 +120,12 @@ h1
   font-weight: 500
 
   &__application-number
-    padding: 1rem 0
-    border-radius: 8px
     font-size: 1.75rem
-    font-weight: 800
+    font-weight: 700
     display: flex
     flex-direction: column
     flex-wrap: wrap
     align-items: center
-    background: #16212C
-    box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d
 
   &__name
     padding: 1rem 0 0 0
@@ -143,11 +138,7 @@ h1
     justify-content: flex-start
     align-items: flex-start
     gap: 0.5rem
-    padding: 1.25rem 1rem
+    padding: 2rem 0 0 0
-    // box-shadow: 5px 5px 10px #10171f, -5px -5px 10px #1c2b39
-    // border: 1px solid white
-    // border-radius: 8px
-    // margin: 0.5rem
 
     &__label
       font-size: 0.75rem
@@ -158,13 +149,3 @@ h1
       &__price
         font-size: 1.75rem
         font-weight: 700
-
-  &__cancel
-    font-size: 0.75rem
-    padding: 0.5rem 0 0 0
-    font-weight: 400
-
-.approval
-  font-size: 1.75rem
-  font-weight: 700
-  padding: 0.5rem 1rem

src/pages/MainPage/Main.tsx

@@ -1,12 +1,11 @@
 import './Main.sass'
-import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column } from '../../components/'
+import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection } from '../../utils/functions'
-import { FaSolidThumbsUp } from 'solid-icons/fa'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
@@ -34,8 +33,6 @@ export default () => {
 
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
-  const [approved, setApproved] = createSignal(false)
-  const [approvedApplication, setApprovedApplication] = createSignal('')
 
   const getListForApproval = async () => {
     try {
@@ -93,24 +90,15 @@ export default () => {
   //   return result
   // }
 
-  const approveHandler = async (application: string) => {
+  const approveHandler = async () => {
     let signed: boolean = false
     let forprinting: boolean = false
 
-    setConnected(await checkConnection())
-    if (connected() === false) {
-      setErrorMessage('No Connection on Server')
-      return
-    }
-
     signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED')
-    if (!signed) return
+    if (signed) {
-
       forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT')
-
+    }
     if (forprinting) {
-      setApprovedApplication(application)
-      setApproved(true)
     }
   }
 
@@ -155,11 +143,6 @@ export default () => {
     setTfbo(tfboList)
   }
 
-  const closeNotification = async () => {
-    setApproved(false)
-    await load()
-  }
-
   onMount(async () => {
     await load()
   })
@@ -268,9 +251,9 @@ export default () => {
                               }}
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
+                                <Box curved thickness={1} padding="1rem">
                                   <span class="modal__application-number">{item}</span>
-
+                                </Box>
-                                <Padding top={1} left={0} right={0} bottom={0}>
                                 <section class="modal__row">
                                   <span class="modal__row__label">Name of Applicant:</span>
                                   <span class="modal__row__detail">{nameList()[index]}</span>
@@ -302,11 +285,10 @@ export default () => {
                                     {PESO} {totalOp().toFixed(2)}
                                   </span>
                                 </section>
-                                </Padding>
 
-                                <Row padding="2rem 0 0 0">
+                                <Row gap={12} padding="2rem 0 0 0">
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
+                                  <Button label="Cancel" edges="curved" design="bo-danger"></Button>
-                                  <span class="modal__cancel">To cancel click anywhere</span>
+                                  <Button label="Approve" edges="curved" design="bo-primary" onClick={approveHandler}></Button>
                                 </Row>
                               </Padding>
                             </ModalButton>
@@ -321,50 +303,6 @@ export default () => {
           </Row>
         </Padding>
       </Page>
-
-      <div onClick={() => setApproved(false)}>
-        <Modal trigger={approved()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
-          <Padding top={1} bottom={1} left={2} right={2}>
-            <Column>
-              <Row gap={4}>
-                <FaSolidThumbsUp size={75} />
-                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
-                  <span class="approval">Approved</span>
-                </Box>
-              </Row>
-              <Row padding="2rem 0 0 0">
-                <h2>{approvedApplication()}</h2>
-              </Row>
-
-              <Row>
-                <span class="close-text">Click anywhere to proceed</span>
-              </Row>
-            </Column>
-          </Padding>
-        </Modal>
-      </div>
-
-      <div onClick={closeNotification}>
-        <Modal trigger={approved()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
-          <Padding top={1} bottom={1} left={2} right={2}>
-            <Column>
-              <Row gap={4}>
-                <FaSolidThumbsUp size={75} />
-                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
-                  <span class="approval">Approved</span>
-                </Box>
-              </Row>
-              <Row padding="2rem 0 0 0">
-                <h2>{approvedApplication()}</h2>
-              </Row>
-
-              <Row>
-                <span class="close-text">Click anywhere to proceed</span>
-              </Row>
-            </Column>
-          </Padding>
-        </Modal>
-      </div>
     </>
   )
 }