PatAlcala9/ocbo-esign
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated main page

Browse source
This commit is contained in:
Patrick Alvin Alcala 2026-03-06 16:54:35 +08:00
parent bbca186ab9
commit f8fbcebcb4
1 changed files with 151 additions and 124 deletions
Download patch file Download diff file Expand all files Collapse all files

275
src/pages/MainPage/Main.tsx
View file

@ -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 { 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 { checkConnection, deleteApi, getApi, getApiMulti, getDateTime, lockData, postApi, saveNewName, saveNewPassword, securePassword, voidPopsApi, voidApi, statusPopsApi } from '../../utils/functions'
import { AiOutlineLoading3Quarters } from 'solid-icons/ai' import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
import { RiDocumentFileCloseFill } from 'solid-icons/ri'
import './Main.sass' import './Main.sass'
const PESO = import.meta.env.VITE_PESO const PESO = import.meta.env.VITE_PESO
@ -77,19 +78,15 @@ export default () => {
} }
const getListForApprovalElectrical = async () => { const getListForApprovalElectrical = async () => {
// setIsLoading(true)
const responseE = await getApiMulti('get-listopapproval-electrical') const responseE = await getApiMulti('get-listopapproval-electrical')
setApplicationListElectrical(responseE.result) setApplicationListElectrical(responseE.result)
setNameListElectrical(responseE.result2) setNameListElectrical(responseE.result2)
// setIsLoading(false)
} }
const getListForApprovalOccupancy = async () => { const getListForApprovalOccupancy = async () => {
// setIsLoading(true)
const responseO = await getApiMulti('get-listopapproval-occupancy') const responseO = await getApiMulti('get-listopapproval-occupancy')
setApplicationListOccupancy(responseO.result) setApplicationListOccupancy(responseO.result)
setNameListOccupancy(responseO.result2) setNameListOccupancy(responseO.result2)
// setIsLoading(false)
} }
const load = async (division: string) => { const load = async (division: string) => {
@ -98,8 +95,9 @@ export default () => {
setErrorMessage('Could not gather list of applications') setErrorMessage('Could not gather list of applications')
return return
} }
setIsLoading(true) setIsLoading(true)
setLoadingText('Downloading Data') setLoadingText('Getting List to Approve')
await getPassword() await getPassword()
@ -169,7 +167,7 @@ export default () => {
} }
setIsLoading(true) setIsLoading(true)
setLoadingText('Processing Data') setLoadingText('Checking POPS record')
if (division === 'electrical') { if (division === 'electrical') {
if (BACKEND.includes('localhost')) { if (BACKEND.includes('localhost')) {
@ -184,6 +182,7 @@ export default () => {
if (popsExist) { if (popsExist) {
if (popsPaid) { if (popsPaid) {
setIsLoading(false)
setPostError(true) setPostError(true)
setErrorMessage('Application Already Paid') setErrorMessage('Application Already Paid')
return return
@ -192,14 +191,17 @@ export default () => {
const voidOP = await voidPopsOpLocal(application) const voidOP = await voidPopsOpLocal(application)
if (!voidOP) { if (!voidOP) {
setIsLoading(false)
setPostError(true) setPostError(true)
setErrorMessage('POPS Record found but failed to void') setErrorMessage('POPS Record found but failed to void')
return return
} }
} else { } else {
setLoadingText('Clearing unpaid POPS record')
const voidOP = await voidPopsOp(application) const voidOP = await voidPopsOp(application)
if (voidOP.toUpper().includes('ERROR')) { if (voidOP.toUpper().includes('ERROR')) {
setIsLoading(false)
setPostError(true) setPostError(true)
setErrorMessage('POPS Record found but failed to void') setErrorMessage('POPS Record found but failed to void')
return return
@ -208,11 +210,14 @@ export default () => {
} }
} }
setLoadingText('Posting new record to POPS')
await postPops(division, application) await postPops(division, application)
// const popsResult = await checkPops(application) // const popsResult = await checkPops(application)
setLoadingText(`Approving ${application}`)
const dataLocked = await lockOpData(division, application) const dataLocked = await lockOpData(division, application)
if (dataLocked) { if (dataLocked) {
setLoadingText(`Pushing ${application} for printing`)
signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1) signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') updateDocflow(division, application, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
if (!signed) return if (!signed) return
@ -228,6 +233,7 @@ export default () => {
setApproved(true) setApproved(true)
} }
} else { } else {
setIsLoading(false)
setPostError(true) setPostError(true)
setErrorMessage('Error on posting on POPS Server, please try again') setErrorMessage('Error on posting on POPS Server, please try again')
return return
@ -641,24 +647,28 @@ export default () => {
</Row> </Row>
<Row content="center"> <Row content="center">
<Tabs aria-label="Main navigation" class="tabs"> <Tabs aria-label="Main navigation" class="tabs">
<Row> <Padding top={1} bottom={0} right={0} left={0}>
<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" />
</Row> </Tabs.List>
</Row>
</Padding>
<Tabs.Content class="tabs__content" value="building"> <Tabs.Content class="tabs__content" value="building">
<Row> <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}> <Padding top={2} bottom={0} left={0} right={0}>
<Box curved thickness={0} background="#602a2abf" padding="1rem 2rem"> <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
<h2>Under Development</h2> <h2>Under Development</h2>
@ -681,10 +691,12 @@ export default () => {
</Tabs.Content> </Tabs.Content>
<Tabs.Content class="tabs__content" value="occupancy"> <Tabs.Content class="tabs__content" value="occupancy">
<Row> <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> </Row>
<Padding top={0} bottom={0} right={10} left={0}> <Padding top={0} bottom={0} right={9} left={0}>
<Row content="right"> <Row content="right">
<Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('occupancy')}></Button> <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('occupancy')}></Button>
</Row> </Row>
@ -768,10 +780,12 @@ export default () => {
</Tabs.Content> </Tabs.Content>
<Tabs.Content class="tabs__content" value="electrical"> <Tabs.Content class="tabs__content" value="electrical">
<Row> <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> </Row>
<Padding top={0} bottom={0} right={10} left={0}> <Padding top={0} bottom={0} right={9} left={0}>
<Row content="right"> <Row content="right">
<Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('electrical')}></Button> <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={() => refresh('electrical')}></Button>
</Row> </Row>
@ -787,107 +801,120 @@ export default () => {
</Padding> </Padding>
</Show> </Show>
<Show when={!isLoading()}> <Show when={!isLoading()}>
<table class="table"> <Show when={applicationListElectrical().length > 0}>
<thead> <table class="table">
<tr> <thead>
<th>Application Number</th>
<th>Name</th>
<th style="text-align: center">Show Details</th>
</tr>
</thead>
<tbody>
{applicationListElectrical().map((item: string, index: number) => (
<tr> <tr>
<td>{item}</td> <th>Application Number</th>
<td>{nameListElectrical()[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('electrical', item)
}}
>
<Show when={isIncomplete()}>
<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}>
<Column padding="0 0 1rem 0">
<Box curved thickness={3} color="#c85656" padding="1rem">
<h2 class="incomplete__error">Signing Error</h2>
</Box>
<h3 class="incomplete__error">Missing Data Detected</h3>
</Column>
<div class="incomplete">
<Column>
<span class="incomplete__text">Some required information is missing from the application details</span>
<span class="incomplete__text">Please return to Assessment to complete the required fields</span>
</Column>
</div>
</Padding>
<Column padding="1rem 0 0 0">
<Button wide label="Return to Assessment" edges="curved" design="bo-primary" onClick={() => returnAssessment('electrical', item)} />
<span class="modal__cancel">Click anywhere to cancel</span>
</Column>
</Padding>
</Show>
<Show when={!isIncomplete()}>
<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}>
<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> </tr>
))} </thead>
</tbody> <tbody>
</table> {applicationListElectrical().map((item: string, index: number) => (
<tr>
<td>{item}</td>
<td>{nameListElectrical()[index]}</td>
<td>
<ModalButton
class="modal"
label="Show Details"
design="bo-link"
background="#121e2acc"
color="#ffffffec"
function={async () => {
await getopdetails('electrical', item)
}}
>
<Show when={isIncomplete()}>
<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}>
<Column padding="0 0 1rem 0">
<Box curved thickness={3} color="#c85656" padding="1rem">
<h2 class="incomplete__error">Signing Error</h2>
</Box>
<h3 class="incomplete__error">Missing Data Detected</h3>
</Column>
<div class="incomplete">
<Column>
<span class="incomplete__text">Some required information is missing from the application details</span>
<span class="incomplete__text">Please return to Assessment to complete the required fields</span>
</Column>
</div>
</Padding>
<Column padding="1rem 0 0 0">
<Button wide label="Return to Assessment" edges="curved" design="bo-primary" onClick={() => returnAssessment('electrical', item)} />
<span class="modal__cancel">Click anywhere to cancel</span>
</Column>
</Padding>
</Show>
<Show when={!isIncomplete()}>
<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}>
<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>
))}
</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> </Show>
</Row> </Row>
</Tabs.Content> </Tabs.Content>