Updated main page
This commit is contained in:
parent
55977852f2
commit
73fa7abb83
2 changed files with 203 additions and 109 deletions
|
|
@ -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'))
|
||||
setClient(displayFullname(op.result2[0], op.result3[0], op.result4[0]))
|
||||
setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
|
||||
// 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) => {
|
||||
let result
|
||||
if (firstname.length > 0) {
|
||||
if (middleinitial.length > 0) {
|
||||
result = `${firstname} ${middleinitial}. ${lastname}`
|
||||
} else {
|
||||
result = `${firstname} ${lastname}`
|
||||
}
|
||||
} else {
|
||||
result = lastname
|
||||
// const displayFullname = (firstname: string, middleinitial: string, lastname: string) => {
|
||||
// let result
|
||||
// if (firstname.length > 0) {
|
||||
// if (middleinitial.length > 0) {
|
||||
// result = `${firstname} ${middleinitial}. ${lastname}`
|
||||
// } else {
|
||||
// result = `${firstname} ${lastname}`
|
||||
// }
|
||||
// } else {
|
||||
// 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">
|
||||
<Tabs.Trigger class="tabs__trigger" value="building">
|
||||
Building
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger class="tabs__trigger" value="occupancy">
|
||||
Occupancy
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger class="tabs__trigger" value="electrical">
|
||||
Electrical
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Indicator class="tabs__indicator" />
|
||||
</Tabs.List>
|
||||
<Row>
|
||||
<Tabs.List class="tabs__list">
|
||||
<Tabs.Trigger class="tabs__trigger" value="building">
|
||||
Building
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger class="tabs__trigger" value="occupancy">
|
||||
Occupancy
|
||||
</Tabs.Trigger>
|
||||
<Tabs.Trigger class="tabs__trigger" value="electrical">
|
||||
Electrical
|
||||
</Tabs.Trigger>
|
||||
<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>
|
||||
<tr>
|
||||
<th>Application Number</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{applicationList().map((item, index) => (
|
||||
|
||||
<Row>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<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">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>
|
||||
<th>Application Number</th>
|
||||
<th>Name</th>
|
||||
<th style="text-align: center">Show Details</th>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue