Updated main page

src/pages/MainPage/Main.sass

@@ -102,3 +102,14 @@ h1
   opacity: 0.6
   text-align: center
   margin: 1rem 0 -0.75rem 0
+
+.incomplete
+  padding: 0.5rem 0 0.5rem 0
+
+  &__text
+    padding: 0 0 0.25rem 0
+    color: #c85656
+    
+  &__error
+    color: #c85656
+

src/pages/MainPage/Main.tsx

@@ -1,14 +1,13 @@
 import { Tabs } from '@kobalte/core/tabs'
 import { useNavigate } from '@solidjs/router'
 import dayjs from 'dayjs'
-import { FaSolidThumbsUp } from 'solid-icons/fa'
+import { FaSolidThumbsUp, FaSolidUserGear } from 'solid-icons/fa'
 import { FiLogOut } from 'solid-icons/fi'
 import { VsRefresh } from 'solid-icons/vs'
-import { createSignal, onMount, createEffect } from 'solid-js'
+import { createEffect, createSignal, onMount } from 'solid-js'
-import { Box, Button, Clickable, Column, Link, Logo, Modal, ModalButton, Padding, Page, Row, Input } from '../../components/'
-import { checkConnection, getApi, getApiMulti, getDateTime, postApi, saveNewName, saveNewPassword, securePassword } from '../../utils/functions'
-import { FaSolidUserGear } from 'solid-icons/fa'
 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 } from '../../utils/functions'
 import './Main.sass'
 
 const PESO = import.meta.env.VITE_PESO
@@ -131,7 +130,7 @@ export default () => {
   }
 
   const isDetailsComplete = (result: string[], result2: string[], result3: string[], result4: string[], result5: string[], result6: string[]) => {
-    return result.length > 0 && result2.length > 0 && result3.length > 0 && result4.length > 0 && result5.length > 0 && result6.length > 0 ? false : false
+    return result.length > 0 && result2.length > 0 && result3.length > 0 && result4.length > 0 && result5.length > 0 && result6.length > 0 ? true : false
   }
 
   const calculateTotal = (list: number[]) => {
@@ -139,6 +138,11 @@ export default () => {
     return total
   }
 
+  // const sample = async () => {
+  //   const data = await lockData('asdasdsadsad')
+  //   console.log(data)
+  // }
+
   const approveHandler = async (division: string, application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
@@ -151,10 +155,12 @@ export default () => {
     }
 
     if (division === 'electrical') {
+      await voidPopsOp(application)
       await postPops(division, application)
       const popsResult = await checkPops(application)
+      const lockResult = await lockOpData(division, application)
 
-      if (popsResult) {
+      if (popsResult && lockResult) {
         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
@@ -174,17 +180,16 @@ export default () => {
         setErrorMessage('Error on posting on POPS Server, please try again')
         return
       }
-
     } else if (division === 'occupancy') {
       const additionalResult = await getApi('check-bldgadditional-approval', application)
       bldgadditional = additionalResult > 0
 
+      await voidPopsOp(application)
       await postPops(division, application)
       const popsResult = await checkPops(application)
+      const lockResult = await lockOpData(division, application)
 
-      console.log('popsResult', popsResult)
+      if (popsResult && lockResult) {
-
-      if (popsResult) {
         signed = await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
         updateDocflow(division, application, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
         if (bldgadditional) {
@@ -211,6 +216,54 @@ export default () => {
     }
   }
 
+  const lockOpData = async (division: string, application: string) => {
+    const dataToLock = await getApi(`get-opdata-${division}`, application)
+    const lockedData = await lockData(dataToLock)
+    const fixedLockedData = lockedData.replace(/\//g, '~')
+    const saveLockedData = await postApi('save-lockdata', { data: application, data2: fixedLockedData })
+    return saveLockedData
+  }
+
+  const voidPopsOp = async (application: string) => {
+    const response = await voidPopsApi(application)
+    if (response.includes('Error')) return false
+    return true
+  }
+
+  const returnAssessment = async (division: string, application: string) => {
+    const id = await getApplicationById(division, application)
+    setApplicationId(id)
+    let forassessment
+
+    if (division === 'electrical') {
+      forassessment = await setNewStatus(division, 'FOR ELECTRICAL ASSESSMENT', '88', 'ELECASSESSMENT', 0)
+    } else {
+      forassessment = await setNewStatus(division, 'OCCUPANCY ASSESSMENT', '21', 'OCASSESSMENT', 0)
+    }
+    if (!forassessment) return
+
+    if (division === 'electrical') {
+      updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+    } else {
+      updateDocflow(division, application, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
+    }
+
+    await deleteOrderofPayment(division, id)
+    await load('all')
+  }
+
+  const getApplicationById = async (division: string, application: string) => {
+    const id = await getApi(`get-idbyapplication-${division}`, application)
+    return parseInt(id)
+  }
+
+  const deleteOrderofPayment = async (division: string, id: number) => {
+    const deleteOp = await deleteApi(`delete-orderofpayment-${division}`, {
+      data: id,
+    })
+    return deleteOp
+  }
+
   const setNewStatus = async (division: string, status: string, tag: string, tagword: string, approved: number) => {
     // const today = new Date()
     const today = await getDateTime()
@@ -334,9 +387,9 @@ export default () => {
   const postTransaction = async () => {
     const id = await geteSignId()
     const today = await getDateTime()
-    const formatedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
+    const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
 
-    await postApi('post-esigntransaction', { data: parseInt(id), data2: approvedApplication(), data3: formatedDate })
+    await postApi('post-esigntransaction', { data: parseInt(id), data2: approvedApplication(), data3: formattedDate })
   }
 
   const updateDocflow = async (division: string, application: string, status: string) => {
@@ -375,7 +428,6 @@ export default () => {
         setConfigError('')
         encryptNewPassword()
       }
-
     } else {
       setConfigError('Invalid Password')
       setConfigNewEncPassword('')
@@ -404,7 +456,7 @@ export default () => {
   // const saveNewPassword = async (password: string) => {
   //   await postApi('update-password', {
   //     data: parseInt(ID),
-  //     data2: password 
+  //     data2: password
   //   })
   // }
 
@@ -653,48 +705,76 @@ export default () => {
                                 await getopdetails('electrical', item)
                               }}
                             >
-                              <Padding top={0} left={2} right={2} bottom={0}>
+                              <Show when={isIncomplete()}>
-                                <span class="modal__application-number">{item}</span>
+                                <Padding top={0} left={2} right={2} bottom={0}>
+                                  <span class="modal__application-number">{item}</span>
 
-                                <Padding top={1} left={0} right={0} bottom={0}>
+                                  <Padding top={1} left={0} right={0} bottom={0}>
-                                  <section class="modal__row">
+                                    <Column padding="0 0 1rem 0">
-                                    <span class="modal__row__label">Name of Applicant:</span>
+                                      <Box curved thickness={3} color="#c85656" padding="1rem">
-                                    <span class="modal__row__detail">{nameListElectrical()[index]}</span>
+                                        <h2 class="incomplete__error">Signing Error</h2>
-                                  </section>
+                                      </Box>
+                                      <h3 class="incomplete__error">Missing Data Detected</h3>
+                                    </Column>
 
-                                  <section class="modal__row">
+                                    <div class="incomplete">
-                                    <span class="modal__row__label">Location:</span>
+                                      <Column>
-                                    <span class="modal__row__detail">{location()}</span>
+                                        <span class="incomplete__text">Some required information is missing from the application details</span>
-                                  </section>
+                                        <span class="incomplete__text">Please return to Assessment to complete the required fields</span>
-
+                                      </Column>
-                                  <section class="modal__row">
+                                    </div>
-                                    <span class="modal__row__label">Type:</span>
+                                  </Padding>
-                                    <span class="modal__row__detail">{type().toUpperCase()}</span>
+                                  <Column padding="1rem 0 0 0">
-                                  </section>
+                                    <Button wide label="Return to Assessment" edges="curved" design="bo-primary" onClick={() => returnAssessment('electrical', item)} />
-
+                                    <span class="modal__cancel">Click anywhere to cancel</span>
-                                  <section class="modal__row">
+                                  </Column>
-                                    <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()}
-                                    </span>
-                                  </section>
                                 </Padding>
+                              </Show>
 
-                                <Row padding="2rem 0 0 0">
+                              <Show when={!isIncomplete()}>
-                                  <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)}></Button>
+                                <Padding top={0} left={2} right={2} bottom={0}>
-                                  <span class="modal__cancel">Click anywhere to cancel</span>
+                                  <span class="modal__application-number">{item}</span>
-                                </Row>
+
-                              </Padding>
+                                  <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">{nameListElectrical()[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()}
+                                      </span>
+                                    </section>
+                                  </Padding>
+
+                                  <Column padding="2rem 0 0 0">
+                                    <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler('electrical', item)} />
+                                    <span class="modal__cancel">Click anywhere to cancel</span>
+                                  </Column>
+                                </Padding>
+                              </Show>
                             </ModalButton>
                           </td>
                         </tr>
@@ -774,24 +854,24 @@ export default () => {
         </Modal>
       </div>
 
-      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8} width='30rem'>
+      <Modal trigger={openConfig()} background="#16212c" color="#ffffffed" opacity={0.8} width="30rem">
         <Padding top={1} bottom={1} left={4} right={4}>
-          <section class='config'>
+          <section class="config">
-            <div class='config__row'>
+            <div class="config__row">
               Name:
               <span>{employeeName()}</span>
             </div>
 
-            <div class='config__edit'>
+            <div class="config__edit">
-              <span class='config__edit__title'>Change Displayed Name</span>
+              <span class="config__edit__title">Change Displayed Name</span>
-              <Input value={configNewName()} onChange={setConfigNewName} placeholder='Enter new name' />
+              <Input value={configNewName()} onChange={setConfigNewName} placeholder="Enter new name" />
-              <span class='config__edit__info'>Leave blank to remain unchanged.</span>
+              <span class="config__edit__info">Leave blank to remain unchanged.</span>
             </div>
 
-            <div class='config__edit'>
+            <div class="config__edit">
-              <span class='config__edit__title'>Change Password</span>
+              <span class="config__edit__title">Change Password</span>
-              <Input isPassword value={configPassword()} onChange={setConfigPassword} placeholder='Enter current password' />
+              <Input isPassword value={configPassword()} onChange={setConfigPassword} placeholder="Enter current password" />
-              <Input isPassword value={configNewPassword()} onChange={setConfigNewPassword} placeholder='Enter new password' />
+              <Input isPassword value={configNewPassword()} onChange={setConfigNewPassword} placeholder="Enter new password" />
 
               <Show when={configNewPassword().length !== 0}>
                 <span style="padding: 1.75rem 0 0 0">Current Encrypted Password:</span>
@@ -804,18 +884,18 @@ export default () => {
 
             <Show when={configError() !== ''}>
               <span class="required-config">{configError()}</span>
-              <Button label='Cancel' edges='curved' design='bo-danger' onClick={() => setOpenConfig(false)} wide />
+              <Button label="Cancel" edges="curved" design="bo-danger" onClick={() => setOpenConfig(false)} wide />
             </Show>
 
-            <div class='config__button'>
+            <div class="config__button">
               <Show when={configError() === ''}>
-                <Button label='Confirm' edges='curved' design='bo-primary' onClick={saveConfig} wide />
+                <Button label="Confirm" edges="curved" design="bo-primary" onClick={saveConfig} wide />
-                <Button label='Cancel' edges='curved' design='bo-danger' onClick={() => setOpenConfig(false)} wide />
+                <Button label="Cancel" edges="curved" design="bo-danger" onClick={() => setOpenConfig(false)} wide />
               </Show>
             </div>
           </section>
         </Padding>
-      </Modal >
+      </Modal>
 
       <div onClick={closeConfig}>
         <Modal trigger={configNotification() === true} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
@@ -832,7 +912,7 @@ export default () => {
               </Row>
             </Column>
           </Padding>
-        </Modal >
+        </Modal>
       </div>
 
       <div onClick={() => setPostError(false)}>
@@ -856,32 +936,6 @@ export default () => {
           </Padding>
         </Modal>
       </div>
-
-      <div onClick={() => setIsIncomplete(false)}>
-        <Modal trigger={isIncomplete() === true} background="#562020ff" color="#ffebebe6" opacity={0.8}>
-          <Padding top={1} bottom={1} left={4} right={4}>
-            <Column>
-              <Row>
-                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
-                  <h2>Incomplete Data</h2>
-                </Box>
-              </Row>
-
-              <Row>
-                <h2>Some Data were missing</h2>
-              </Row>
-
-              <Row>
-                <h4>To avoid further error, application will be automatically pushed back on Assessment for correction</h4>
-              </Row>
-
-              <Row>
-                <span class="close-text">Click anywhere to close</span>
-              </Row>
-            </Column>
-          </Padding>
-        </Modal>
-      </div>
     </>
   )
 }