ocbo-esign/src/pages/AssessorPage/Assessor.tsx

275 lines
10 KiB
TypeScript

import './Assessor.sass'
import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link } from '../../components'
import { FiLogOut } from 'solid-icons/fi'
import { Tabs } from '@kobalte/core/tabs'
import { ofetch } from 'ofetch'
import { onMount, createSignal, Show } from 'solid-js'
// import dayjs from 'dayjs'
// import { checkConnection, createPdf } from '../../utils/functions'
// import { FaSolidThumbsUp } from 'solid-icons/fa'
import { _employeeName, _employeeId } from '../../stores/employee'
import { useNavigate } from '@solidjs/router'
const API = import.meta.env.VITE_BACKEND
const PESO = import.meta.env.VITE_PESO
export default () => {
const navigate = useNavigate()
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 [errorMessage, setErrorMessage] = createSignal('')
const [connected, setConnected] = createSignal(true)
const [approved, setApproved] = createSignal(false)
const [approvedApplication, setApprovedApplication] = createSignal('')
const [isBuilding, setIsBuilding] = createSignal(false)
const [isOccupancy, setIsOccupancy] = createSignal(false)
const [isElectrical, setIsElectrical] = createSignal(false)
const [employeeId, setEmployeeId] = createSignal(0)
const [employeeName, setEmployeeName] = createSignal('')
const checkAccess = async (access: string) => {
try {
const response = await ofetch(`${API}check-access/${access}/${employeeId()}`)
const result = response.result
if (result > 0) return true
else return false
} catch {
return false
}
}
const checkDivision = async () => {
const building = await checkAccess('BUILDING ORDER OF PAYMENT')
setIsBuilding(building)
const occupancy = await checkAccess('OCCUPANCY ORDER OF PAYMENT')
setIsOccupancy(occupancy)
const electrical = await checkAccess('ELECTRICAL ASSESSMENT')
setIsElectrical(electrical)
}
const getListForPrinting = async () => {
try {
const response = await ofetch(API + 'get-listopprinting-electrical', { parseResponse: JSON.parse })
setApplicationList(response.result)
setNameList(response.result2)
} catch (error) {
console.error(error)
}
}
const removeEmployee = () => {
sessionStorage.removeItem('id')
sessionStorage.removeItem('name')
}
const checkLogged = async () => {
const idStore = sessionStorage.getItem('id')
const nameStore = sessionStorage.getItem('name')
setEmployeeId(parseInt(idStore!))
setEmployeeName(nameStore!)
}
const logout = async () => {
removeEmployee()
navigate('/')
// console.log('yeah')
}
onMount(async () => {
checkLogged()
await checkDivision()
await getListForPrinting()
})
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">{employeeName()}</span>
<Clickable onClick={logout}>
<Row gap={0.5}>
<FiLogOut size={25} />
<span>Logout</span>
</Row>
</Clickable>
</Row>
</Row>
<Row content="center">
<Tabs aria-label="Main navigation" class="tabs">
<Row>
<Tabs.List class="tabs__list">
<Show when={isBuilding()}>
<Tabs.Trigger class="tabs__trigger" value="building">
Building
</Tabs.Trigger>
</Show>
<Show when={isOccupancy()}>
<Tabs.Trigger class="tabs__trigger" value="occupancy">
Occupancy
</Tabs.Trigger>
</Show>
<Show when={isElectrical()}>
<Tabs.Trigger class="tabs__trigger" value="electrical">
Electrical
</Tabs.Trigger>
</Show>
<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>
<Row>
<table class="table">
<thead>
{/* <tr>
<th>Application Number</th>
<th>Name</th>
<th style="text-align: center">Show Details</th>
</tr> */}
</thead>
<tbody></tbody>
</table>
</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>
<Row>
<table class="table">
<thead>
{/* <tr>
<th>Application Number</th>
<th>Name</th>
<th style="text-align: center">Show Details</th>
</tr> */}
</thead>
<tbody></tbody>
</table>
</Row>
</Tabs.Content>
<Tabs.Content class="tabs__content" value="electrical">
<Row>
<h2>List of Ready to Print in 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}>
<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">{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>
</Padding>
<Row padding="2rem 0 0 0">
<Button wide label="Print" edges="curved" design="bo-primary"></Button>
<span class="modal__cancel">Click anywhere to cancel</span>
</Row>
</Padding>
</ModalButton>
</td>
</tr>
))}
</tbody>
</table>
</Row>
</Tabs.Content>
</Tabs>
</Row>
</Padding>
</Page>
</>
)
}