Updated main page

src/pages/MainPage/Main.tsx

@@ -9,6 +9,7 @@ import { Show } from 'solid-js/web'
 import { Box, Button, Clickable, Column, Input, Link, Logo, Modal, ModalButton, Padding, Page, Row } from '../../components/'
 import { checkConnection, deleteApi, getApi, getApiMulti, getDateTime, lockData, postApi, saveNewName, saveNewPassword, securePassword, voidPopsApi, voidApi, statusPopsApi } from '../../utils/functions'
 import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
+import { RiDocumentFileCloseFill } from 'solid-icons/ri'
 import './Main.sass'
 
 const PESO = import.meta.env.VITE_PESO
@@ -77,19 +78,15 @@ export default () => {
   }
 
   const getListForApprovalElectrical = async () => {
-    // setIsLoading(true)
     const responseE = await getApiMulti('get-listopapproval-electrical')
     setApplicationListElectrical(responseE.result)
     setNameListElectrical(responseE.result2)
-    // setIsLoading(false)
   }
 
   const getListForApprovalOccupancy = async () => {
-    // setIsLoading(true)
     const responseO = await getApiMulti('get-listopapproval-occupancy')
     setApplicationListOccupancy(responseO.result)
     setNameListOccupancy(responseO.result2)
-    // setIsLoading(false)
   }
 
   const load = async (division: string) => {
@@ -98,8 +95,9 @@ export default () => {
       setErrorMessage('Could not gather list of applications')
       return
     }
+
     setIsLoading(true)
-    setLoadingText('Downloading Data')
+    setLoadingText('Getting List to Approve')
 
     await getPassword()
 
@@ -169,7 +167,7 @@ export default () => {
     }
 
     setIsLoading(true)
-    setLoadingText('Processing Data')
+    setLoadingText('Checking POPS record')
 
     if (division === 'electrical') {
       if (BACKEND.includes('localhost')) {
@@ -184,6 +182,7 @@ export default () => {
 
       if (popsExist) {
         if (popsPaid) {
+          setIsLoading(false)
           setPostError(true)
           setErrorMessage('Application Already Paid')
           return
@@ -192,14 +191,17 @@ export default () => {
             const voidOP = await voidPopsOpLocal(application)
 
             if (!voidOP) {
+              setIsLoading(false)
               setPostError(true)
               setErrorMessage('POPS Record found but failed to void')
               return
             }
           } else {
+            setLoadingText('Clearing unpaid POPS record')
             const voidOP = await voidPopsOp(application)
 
             if (voidOP.toUpper().includes('ERROR')) {
+              setIsLoading(false)
               setPostError(true)
               setErrorMessage('POPS Record found but failed to void')
               return
@@ -208,11 +210,14 @@ export default () => {
         }
       }
 
+      setLoadingText('Posting new record to POPS')
       await postPops(division, application)
       // const popsResult = await checkPops(application)
+      setLoadingText(`Approving ${application}`)
       const dataLocked = await lockOpData(division, application)
 
       if (dataLocked) {
+        setLoadingText(`Pushing ${application} for printing`)
         signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
         updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
         if (!signed) return
@@ -228,6 +233,7 @@ export default () => {
           setApproved(true)
         }
       } else {
+        setIsLoading(false)
         setPostError(true)
         setErrorMessage('Error on posting on POPS Server, please try again')
         return
@@ -641,6 +647,7 @@ export default () => {
           </Row>
           <Row content="center">
             <Tabs aria-label="Main navigation" class="tabs">
+              <Padding top={1} bottom={0} right={0} left={0}>
                 <Row>
                   <Tabs.List class="tabs__list">
                     <Tabs.Trigger class="tabs__trigger" value="building">
@@ -655,10 +662,13 @@ export default () => {
                     <Tabs.Indicator class="tabs__indicator" />
                   </Tabs.List>
                 </Row>
+              </Padding>
 
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
-                  {/* <h2>List of Ready to Approve and Sign Building Order of Payments</h2> */}
+                  {/*<Padding top={2} bottom={2} right={0} left={0}>
+                     <h3>Ready for Approval and Signing Building Order of Payments</h3>
+                  </Padding>*/}
                   <Padding top={2} bottom={0} left={0} right={0}>
                     <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
                       <h2>Under Development</h2>
@@ -681,10 +691,12 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  <h2>List of Ready to Approve and Sign in Occupancy Order of Payments</h2>
+                  <Padding top={2} bottom={2} right={0} left={0}>
+                    <h3>Ready for Approval and Signing Occupancy Order of Payments</h3>
+                  </Padding>
                 </Row>
 
-                <Padding top={0} bottom={0} right={10} left={0}>
+                <Padding top={0} bottom={0} right={9} left={0}>
                   <Row content="right">
                     <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('occupancy')}></Button>
                   </Row>
@@ -768,10 +780,12 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
+                  <Padding top={2} bottom={2} right={0} left={0}>
+                    <h3>Ready for Approval and Signing Electrical Order of Payments</h3>
+                  </Padding>
                 </Row>
 
-                <Padding top={0} bottom={0} right={10} left={0}>
+                <Padding top={0} bottom={0} right={9} left={0}>
                   <Row content="right">
                     <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('electrical')}></Button>
                   </Row>
@@ -787,6 +801,7 @@ export default () => {
                     </Padding>
                   </Show>
                   <Show when={!isLoading()}>
+                    <Show when={applicationListElectrical().length > 0}>
                       <table class="table">
                         <thead>
                           <tr>
@@ -889,6 +904,18 @@ export default () => {
                         </tbody>
                       </table>
                     </Show>
+
+                    <Show when={applicationListElectrical().length === 0}>
+                      <Padding top={2} bottom={0} left={0} right={0}>
+                        <Box thickness={1} padding="4rem 2rem" curved color="rgba(250, 250, 250, 0.3)">
+                          <Column gap={1}>
+                            <RiDocumentFileCloseFill size={50} />
+                            <span>No Application to Approve found</span>
+                          </Column>
+                        </Box>
+                      </Padding>
+                    </Show>
+                  </Show>
                 </Row>
               </Tabs.Content>
             </Tabs>