256 lines
9.5 KiB
TypeScript
256 lines
9.5 KiB
TypeScript
import './Main.sass'
|
|
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'
|
|
|
|
const API = import.meta.env.VITE_BACKEND
|
|
const PESO = import.meta.env.VITE_PESO
|
|
const ID = import.meta.env.VITE_ID
|
|
|
|
export default () => {
|
|
const [totalOp, setTotalOp] = createSignal(0)
|
|
const [assessor, setAssessor] = createSignal('')
|
|
const [dateOp, setDateOp] = 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[]>([])
|
|
|
|
const getListForApproval = async () => {
|
|
try {
|
|
const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
|
|
setApplicationList(response.result)
|
|
setNameList(response.result2)
|
|
} catch (error) {
|
|
console.error(error)
|
|
}
|
|
}
|
|
|
|
const load = async () => {
|
|
await getListForApproval()
|
|
}
|
|
|
|
const getopdetails = async (applicationNo: string) => {
|
|
const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
|
|
setAssessor(op.result7[0])
|
|
setLocation(op.result5[0])
|
|
setType(op.result6[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[]) => {
|
|
const total = list.map((item) => parseFloat(item.toString())).reduce((acc, curr) => acc + curr, 0)
|
|
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
|
|
// }
|
|
// 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' },
|
|
})
|
|
}
|
|
}
|
|
|
|
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 () => {
|
|
await load()
|
|
})
|
|
|
|
return (
|
|
<>
|
|
<Page alignment="column">
|
|
<Padding left={4.75} right={4.75} top={0} bottom={0}>
|
|
<Row content="split">
|
|
<Link to="/">
|
|
<Row content="left" gap={2}>
|
|
<Logo size={200} />
|
|
<h1>OCBO e-Sign</h1>
|
|
</Row>
|
|
</Link>
|
|
|
|
<Row content="left" gap={1}>
|
|
<span class="name">Login Name</span>
|
|
<Link to="/">
|
|
<FiLogOut size={25} />
|
|
</Link>
|
|
</Row>
|
|
</Row>
|
|
<Row content="center">
|
|
<Tabs aria-label="Main navigation" class="tabs">
|
|
<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>
|
|
</Row>
|
|
</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="occupancy">
|
|
<Row>
|
|
<h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
|
|
</Row>
|
|
</Tabs.Content>
|
|
<Tabs.Content class="tabs__content" value="electrical">
|
|
<Row>
|
|
<h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
|
|
</Row>
|
|
|
|
<Row>
|
|
<table class="table">
|
|
<thead>
|
|
<tr>
|
|
<th>Application Number</th>
|
|
<th>Name</th>
|
|
<th style="text-align: center">Show Details</th>
|
|
</tr>
|
|
</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>
|
|
</Padding>
|
|
</Page>
|
|
</>
|
|
)
|
|
}
|