Updated main page
This commit is contained in:
parent
55977852f2
commit
73fa7abb83
2 changed files with 203 additions and 109 deletions
|
|
@ -24,6 +24,8 @@ h1
|
|||
&__list
|
||||
position: relative
|
||||
display: flex
|
||||
gap: 5rem
|
||||
|
||||
|
||||
&__list[data-orientation="horizontal"]
|
||||
align-items: center
|
||||
|
|
@ -34,29 +36,42 @@ h1
|
|||
|
||||
&__indicator
|
||||
position: absolute
|
||||
background-color: hsl(200 98% 39%)
|
||||
background-color: color.adjust(vars.$background, $lightness: 20%)
|
||||
transition: all 250ms
|
||||
|
||||
&__indicator[data-orientation="horizontal"]
|
||||
bottom: -1px
|
||||
height: 2px
|
||||
height: 3px
|
||||
|
||||
&__indicator[data-orientation="vertical"]
|
||||
right: -1px
|
||||
width: 2px
|
||||
|
||||
&__trigger
|
||||
// display: inline-block
|
||||
// padding: 8px 16px
|
||||
// outline: none
|
||||
// cursor: pointer
|
||||
background-color: vars.$background
|
||||
border: none
|
||||
border-radius: 6px 6px 0 0
|
||||
color: vars.$textColor
|
||||
padding: 0.75rem 1.75rem
|
||||
width: 10rem
|
||||
text-align: center
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
padding: 8px 16px
|
||||
outline: none
|
||||
font-size: 1rem
|
||||
font-weight: 500
|
||||
cursor: pointer
|
||||
// transition: all 0.2s ease-out
|
||||
|
||||
&__trigger:hover
|
||||
background-color: hsl(0 0% 98%)
|
||||
color: hsl(240 5% 34%)
|
||||
background-color: color.adjust(vars.$background, $lightness: 20%)
|
||||
// color: hsl(240 5% 34%)
|
||||
|
||||
&__trigger:focus-visible
|
||||
background-color: hsl(240 5% 96%)
|
||||
// background-color: hsl(240 5% 96%)
|
||||
|
||||
.tabs__trigger[data-disabled],
|
||||
.tabs__trigger[data-disabled]:hover
|
||||
|
|
@ -67,25 +82,40 @@ h1
|
|||
padding: 16px
|
||||
|
||||
.table
|
||||
width: 100%
|
||||
width: 90%
|
||||
border-collapse: collapse
|
||||
margin: 2rem
|
||||
|
||||
th, td
|
||||
border: 1px solid vars.$tableBorderColor
|
||||
// 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
|
||||
font-size: 1rem
|
||||
|
||||
th
|
||||
background-color: vars.$tableHeaderBackground
|
||||
color: white
|
||||
color: vars.$textColor
|
||||
padding: 1rem
|
||||
|
||||
th:nth-child(1)
|
||||
text-align: center
|
||||
border-radius: 1rem 0 0 0
|
||||
|
||||
th:nth-child(3)
|
||||
border-radius: 0 1rem 0 0
|
||||
|
||||
td
|
||||
background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
|
||||
|
||||
td:nth-child(1)
|
||||
width: 10rem
|
||||
text-align: center
|
||||
|
||||
td:nth-child(3)
|
||||
width: 8.75rem
|
||||
|
||||
tbody tr:nth-child(even)
|
||||
background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
|
||||
|
||||
.modal
|
||||
font-weight: 500
|
||||
|
|
|
|||
|
|
@ -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}`
|
||||
// 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' },
|
||||
})
|
||||
}
|
||||
} else {
|
||||
result = lastname
|
||||
}
|
||||
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,6 +142,7 @@ export default () => {
|
|||
</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
|
||||
|
|
@ -102,6 +155,8 @@ export default () => {
|
|||
</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,11 +171,14 @@ export default () => {
|
|||
<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>
|
||||
|
|
@ -164,6 +222,11 @@ export default () => {
|
|||
<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">
|
||||
|
|
@ -172,7 +235,7 @@ export default () => {
|
|||
</section>
|
||||
|
||||
<Row gap={12} padding="2rem 0 0 0">
|
||||
<Button label="Disapprove" edges="curved" design="bo-danger"></Button>
|
||||
<Button label="Cancel" edges="curved" design="bo-danger"></Button>
|
||||
<Button label="Approve" edges="curved" design="bo-primary"></Button>
|
||||
</Row>
|
||||
</Padding>
|
||||
|
|
@ -182,6 +245,7 @@ export default () => {
|
|||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</Row>
|
||||
</Tabs.Content>
|
||||
</Tabs>
|
||||
</Row>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue