Updated main page
This commit is contained in:
parent
dbeef882ab
commit
ab2ba8bb20
2 changed files with 258 additions and 5 deletions
|
|
@ -14,3 +14,101 @@ h1
|
|||
|
||||
.name
|
||||
font-size: 1.25rem
|
||||
|
||||
.tabs
|
||||
width: 100%
|
||||
|
||||
&[data-orientation="vertical"]
|
||||
display: flex
|
||||
|
||||
&__list
|
||||
position: relative
|
||||
display: flex
|
||||
|
||||
&__list[data-orientation="horizontal"]
|
||||
align-items: center
|
||||
|
||||
&__list[data-orientation="vertical"]
|
||||
flex-direction: column
|
||||
align-items: stretch
|
||||
|
||||
&__indicator
|
||||
position: absolute
|
||||
background-color: hsl(200 98% 39%)
|
||||
transition: all 250ms
|
||||
|
||||
&__indicator[data-orientation="horizontal"]
|
||||
bottom: -1px
|
||||
height: 2px
|
||||
|
||||
&__indicator[data-orientation="vertical"]
|
||||
right: -1px
|
||||
width: 2px
|
||||
|
||||
&__trigger
|
||||
display: inline-block
|
||||
padding: 8px 16px
|
||||
outline: none
|
||||
cursor: pointer
|
||||
|
||||
&__trigger:hover
|
||||
background-color: hsl(0 0% 98%)
|
||||
color: hsl(240 5% 34%)
|
||||
|
||||
&__trigger:focus-visible
|
||||
background-color: hsl(240 5% 96%)
|
||||
|
||||
.tabs__trigger[data-disabled],
|
||||
.tabs__trigger[data-disabled]:hover
|
||||
opacity: 0.5
|
||||
background-color: transparent
|
||||
|
||||
.tabs__content
|
||||
padding: 16px
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
border-collapse: collapse
|
||||
margin: 2rem
|
||||
|
||||
th, td
|
||||
border: 1px solid vars.$tableBorderColor
|
||||
padding: 0.75rem
|
||||
text-align: left
|
||||
font-size: 1.1rem
|
||||
|
||||
td:nth-child(1)
|
||||
width: 12rem
|
||||
|
||||
td:nth-child(3)
|
||||
width: 9rem
|
||||
|
||||
th
|
||||
background-color: vars.$tableHeaderBackground
|
||||
color: white
|
||||
|
||||
.modal
|
||||
font-weight: 500
|
||||
|
||||
&__application-number
|
||||
font-size: 1.75rem
|
||||
|
||||
&__name
|
||||
padding: 1rem 0 0 0
|
||||
font-size: 1rem
|
||||
|
||||
&__row
|
||||
display: flex
|
||||
flex-direction: column
|
||||
flex-wrap: wrap
|
||||
justify-content: flex-start
|
||||
align-items: flex-start
|
||||
gap: 0.5rem
|
||||
padding: 2rem 0 0 0
|
||||
|
||||
&__label
|
||||
font-size: 0.75rem
|
||||
|
||||
&__detail
|
||||
font-size: 1rem
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,102 @@
|
|||
import './Main.sass'
|
||||
import { Logo, Link, Page, Row, Padding, Table } from '../../components/'
|
||||
import { Logo, Link, Page, Row, Padding, ModalButton, Box, Column } from '../../components/'
|
||||
import { FiLogOut } from 'solid-icons/fi'
|
||||
// import { ofetch } from 'ofetch'
|
||||
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
|
||||
|
||||
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 getListForApproval = async () => {
|
||||
try {
|
||||
const response = await ofetch(API + 'get-listopapproval-electrical', { parseResponse: JSON.parse })
|
||||
return response.result
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
const getListOfReadyForApprovalFiltered = async (list: number[]) => {
|
||||
let newList: number[] = []
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const response = await ofetch(API + 'get-laststatus-electrical/' + list[i], { parseResponse: JSON.parse })
|
||||
if (response.result === 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL') {
|
||||
newList.push(list[i])
|
||||
}
|
||||
}
|
||||
|
||||
return [...newList]
|
||||
}
|
||||
|
||||
const getApplicationById = async (list: number[]) => {
|
||||
let applicationList: string[] = []
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
const response = await ofetch(API + 'get-applicationbyid-electrical/' + list[i], { parseResponse: JSON.parse })
|
||||
applicationList.push(response.result)
|
||||
}
|
||||
|
||||
setUpdatedList([...applicationList])
|
||||
}
|
||||
|
||||
const load = async () => {
|
||||
// const listForApproval = await getListForApproval()
|
||||
// const listOfReadyForApprovalFiltered = await getListOfReadyForApprovalFiltered(listForApproval)
|
||||
// await getApplicationById(listOfReadyForApprovalFiltered)
|
||||
|
||||
// console.log(listOfReadyForApprovalFiltered)
|
||||
await getopdetails()
|
||||
}
|
||||
|
||||
const getopdetails = async () => {
|
||||
const op = await ofetch(API + 'get-opdetails-electrical/23512', { parseResponse: JSON.parse })
|
||||
setTotalOp(calculateTotal(op.result4))
|
||||
setAssessor(await getEmployeeName(op.result[0]))
|
||||
setApprover(await getEmployeeName(op.result2[0]))
|
||||
setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
|
||||
}
|
||||
|
||||
const calculateTotal = (list: number[]) => {
|
||||
let total = 0
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
total += parseInt(list[i].toString())
|
||||
}
|
||||
return total
|
||||
}
|
||||
|
||||
const getEmployeeName = async (id: string) => {
|
||||
try {
|
||||
const response = await ofetch(API + 'get-employeename/' + id, { parseResponse: JSON.parse })
|
||||
const result = response.result
|
||||
return result
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
const getPaymentName = async (id: string) => {
|
||||
try {
|
||||
const response = await ofetch(API + 'get-paymentname/' + id, { parseResponse: JSON.parse })
|
||||
const result = response.result
|
||||
return result
|
||||
} catch {
|
||||
return ''
|
||||
}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await load()
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
<Page alignment="column">
|
||||
|
|
@ -24,10 +117,72 @@ export default () => {
|
|||
</Row>
|
||||
</Row>
|
||||
<Row content="center">
|
||||
<h2>List of Ready to Approve and Sign OP (Order of Payments)</h2>
|
||||
</Row>
|
||||
<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>
|
||||
<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>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Application Number</th>
|
||||
<th>Name</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>111</td>
|
||||
<td>11</td>
|
||||
<td>
|
||||
<ModalButton class="modal" label="Show Details" design="bo-link" background="#111d29e1" color="#ffffffec">
|
||||
<Padding top={0} left={2} right={2} bottom={0}>
|
||||
<Column>
|
||||
<Box curved thickness={1} padding={1}>
|
||||
<span class="modal__application-number">25-0000000123</span>
|
||||
</Box>
|
||||
<span class="modal__name">Sample Name</span>
|
||||
|
||||
<Table />
|
||||
<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">P {totalOp().toFixed(2)}</span>
|
||||
</section>
|
||||
</Column>
|
||||
</Padding>
|
||||
</ModalButton>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Tabs.Content>
|
||||
</Tabs>
|
||||
</Row>
|
||||
</Padding>
|
||||
</Page>
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue