Updated global classes

src/pages/AssessorPage/Assessor.sass

@@ -51,3 +51,6 @@
   font-size: 1.75rem
   font-weight: 700
   padding: 0.5rem 1rem
+
+.profile
+  cursor: pointer

src/pages/AssessorPage/Assessor.tsx

@@ -222,7 +222,6 @@ export default () => {
   }
 
   const updateOp = async () => {
-    console.log(applicationId())
     try {
       await ofetch(API + 'update-opprinted-electrical', {
         method: 'POST',
@@ -326,6 +325,11 @@ export default () => {
     navigate('/')
   }
 
+  const gotoProfile = async () => {
+    sessionStorage.setItem('name', employeeName())
+    navigate('/profile')
+  }
+
   onMount(async () => {
     const logged = await checkLogged()
 
@@ -357,7 +361,9 @@ export default () => {
 
             <Row content="left" gap={1}>
               <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
-                <span class="name">{employeeName()}</span>
+                <span class="profile" onClick={gotoProfile}>
+                  {employeeName()}
+                </span>
               </Box>
               <Clickable onClick={logout}>
                 <Row gap={0.5}>

src/pages/MainPage/Main.tsx

@@ -5,12 +5,13 @@ import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
-import { checkConnection, getApi, getApiMulti } from '../../utils/functions'
+import { checkConnection, getApi, getApiMulti, postApi } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
 import { _applicationNo, _date, _optn, _name, _location, _type, _assessor, _feeList, _codeList, _amountList, _signatureAssessor, _signatureApprover, _assessorid, _approvedDate, _assessedDate } from '../../stores/pdfinfo'
 import { VsRefresh } from 'solid-icons/vs'
+import { BiRegularErrorAlt } from 'solid-icons/bi'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
@@ -21,7 +22,7 @@ const PUBLICIP = import.meta.env.VITE_PUBLICIP
 export default () => {
   const navigate = useNavigate()
 
-  const [totalOp, setTotalOp] = createSignal(0)
+  const [totalOp, setTotalOp] = createSignal('')
   const [assessor, setAssessor] = createSignal('')
   const [dateOp, setDateOp] = createSignal('')
   const [location, setLocation] = createSignal('')
@@ -50,6 +51,8 @@ export default () => {
   const [employeeId, setEmployeeId] = createSignal(0)
   const [employeeName, setEmployeeName] = createSignal('')
 
+  const [apology, setApology] = createSignal(false)
+
   const getListForApproval = async () => {
     const responseE = await getApiMulti('get-listopapproval-electrical')
     setApplicationListElectrical(responseE.result)
@@ -98,23 +101,24 @@ export default () => {
   }
 
   const getopdetails = async (division: string, applicationNo: string) => {
+    let op
     if (division === 'electrical') {
-      const op = await getApiMulti('get-opdetails-electrical', applicationNo)
-      setAssessor(op.result7[0])
-      setLocation(op.result5[0])
-      setType(op.result6[0])
-      setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-      setApplicationId(op.result11[0])
-      setTotalOp(calculateTotal(op.result9))
+      op = await getApiMulti('get-opdetails-electrical', applicationNo)
     } else if (division === 'occupancy') {
-      const op = await getApiMulti('get-opdetails-occupancy', applicationNo)
-      setAssessor(op.result7[0])
-      setLocation(op.result5[0])
-      setType(op.result6[0])
-      setDateOp(dayjs(op.result10[0]).format('MMMM DD, YYYY'))
-      setApplicationId(op.result11[0])
-      setTotalOp(calculateTotal(op.result9))
+      op = await getApiMulti('get-opdetails-occupancy', applicationNo)
     }
+
+    setLocation(op.result[0])
+    setType(op.result2[0])
+    setAssessor(op.result3[0])
+    const total = calculateTotal(op.result4)
+    const formattedTotal = new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(total)
+    setTotalOp(formattedTotal)
+    setDateOp(dayjs(op.result5[0]).format('MMMM DD, YYYY'))
+    setApplicationId(op.result6[0])
   }
 
   const calculateTotal = (list: number[]) => {
@@ -163,15 +167,15 @@ export default () => {
     }
 
     if (division === 'electrical') {
-      signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
+      signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT APPROVED AND SIGNED', '170', 'ELECOPAPPROVEDSIGNED', 1)
+      const approvedid = await getIdByApplication(division, application)
+      updateDocflow(division, approvedid, 'FOR ELECTRICAL ORDER OF PAYMENT APPROVAL')
       if (!signed) return
 
-      forprinting = await setNewStatus('FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
+      forprinting = await setNewStatus(division, 'FOR ELECTRICAL ORDER OF PAYMENT PRINTING', '95', 'ELECOPPRINT', 0)
       if (!forprinting) return
 
-      updateOrderofpayment = await updateOp()
+      updateOrderofpayment = await updateOp(division)
 
       if (updateOrderofpayment) {
         postTransaction()
@@ -180,43 +184,42 @@ export default () => {
         setApproved(true)
       }
     } else if (division === 'occupancy') {
-      signed = await setNewStatus('OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
-      const approvedid = await getIdByApplication(application)
-      updateDocflow(approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
+      signed = await setNewStatus(division, 'OCCUPANCY ORDER OF PAYMENT APPROVED AND SIGNED', '172', 'OCCOPAPPROVEDSIGNED', 1)
+      const approvedid = await getIdByApplication(division, application)
+      updateDocflow(division, approvedid, 'FOR OCCUPANCY RECOMMENDING APPROVAL')
       if (!signed) return
 
-      forprinting = await setNewStatus('APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
+      forprinting = await setNewStatus(division, 'APPROVED FOR PRINTING OF BUREAU OF FIRE AND ORDER OF PAYMENT', '23', 'OCORDEROFPAYMENT', 0)
       if (!forprinting) return
 
-      updateOrderofpayment = await updateOp()
+      updateOrderofpayment = await updateOp(division)
+
+      if (updateOrderofpayment) {
+        postTransaction()
+        postPops(division, application)
+        setApprovedApplication(application)
+        setApproved(true)
+      }
     }
   }
 
-  const setNewStatus = async (status: string, tag: string, tagword: string, approved: number) => {
+  const setNewStatus = async (division: string, status: string, tag: string, tagword: string, approved: number) => {
     const today = new Date()
     const formattedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
     const statusid = parseInt(applicationId().toString())
 
-    try {
-      await ofetch(API + 'post-newstatus-electrical', {
-        method: 'POST',
-        body: { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) },
-      })
-      return true
-    } catch {
-      return false
+    if (division === 'electrical') {
+      return await postApi('post-newstatus-electrical', { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) })
+    } else {
+      return await postApi('post-newstatus-occupancy', { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(ID) })
     }
   }
 
-  const updateOp = async () => {
-    try {
-      await ofetch(API + 'update-opapproved-electrical', {
-        method: 'POST',
-        body: { data: parseInt(applicationId().toString()) },
-      })
-      return true
-    } catch {
-      return false
+  const updateOp = async (division: string) => {
+    if (division === 'electrical') {
+      return await postApi('update-opapproved-electrical', { data: parseInt(applicationId().toString()) })
+    } else {
+      return await postApi('update-opapproved-occupancy', { data: parseInt(applicationId().toString()) })
     }
   }
 
@@ -338,20 +341,22 @@ export default () => {
     })
   }
 
-  const updateDocflow = async (electricalid: number, status: string) => {
-    await ofetch(API + 'update-docflow-electrical', {
-      method: 'POST',
-      body: { data: parseInt(electricalid.toString()), data2: status },
-    })
+  const updateDocflow = async (division: string, applicationid: number, status: string) => {
+    if (division === 'electrical') {
+      await postApi('update-docflow-electrical', { data: parseInt(applicationid.toString()), data2: status })
+    } else if (division === 'occupancy') {
+      await postApi('update-docflow-occupancy', { data: parseInt(applicationid.toString()), data2: status })
+    }
   }
 
-  const getIdByApplication = async (applicationNo: string) => {
-    try {
-      const response = await getApi('get-idbyapplication-electrical', applicationNo)
-      return parseInt(response)
-    } catch {
-      return 0
+  const getIdByApplication = async (division: string, applicationNo: string) => {
+    let response
+    if (division === 'electrical') {
+      response = await getApi('get-idbyapplication-electrical', applicationNo)
+    } else if (division === 'occupancy') {
+      response = await getApi('get-idbyapplication-occupancy', applicationNo)
     }
+    return parseInt(response)
   }
 
   const refresh = async (division: string) => {
@@ -451,7 +456,7 @@ export default () => {
                 </Padding>
 
                 <Row>
-                  <table class="table">
+                  <table class="table__disabled">
                     <thead>
                       <tr>
                         <th>Application Number</th>
@@ -466,13 +471,15 @@ export default () => {
                           <td>{nameListOccupancy()[index]}</td>
 
                           <td>
-                            <ModalButton
-                              class="modal"
+                            <Button
+                              // class="modal"
                               label="Show Details"
                               design="bo-link"
                               background="#121e2acc"
                               color="#ffffffec"
-                              function={async () => {
+                              onClick={async () => {
+                                setApology(true)
+                                setErrorMessage('Modification of Occupancy Printing has not yet finished')
                                 await getopdetails('occupancy', item)
                               }}
                             >
@@ -508,7 +515,7 @@ export default () => {
                                   <section class="modal__row">
                                     <span class="modal__row__label">Total Fee:</span>
                                     <span class="modal__row__detail__price">
-                                      {PESO} {totalOp().toFixed(2)}
+                                      {PESO} {totalOp()}
                                     </span>
                                   </section>
                                 </Padding>
@@ -518,7 +525,7 @@ export default () => {
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
-                            </ModalButton>
+                            </Button>
                           </td>
                         </tr>
                       ))}
@@ -595,7 +602,7 @@ export default () => {
                                   <section class="modal__row">
                                     <span class="modal__row__label">Total Fee:</span>
                                     <span class="modal__row__detail__price">
-                                      {PESO} {totalOp().toFixed(2)}
+                                      {PESO} {totalOp()}
                                     </span>
                                   </section>
                                 </Padding>
@@ -683,6 +690,35 @@ export default () => {
           </Padding>
         </Modal>
       </div>
+
+      <div onClick={() => setApology(false)}>
+        <Modal trigger={apology()} background="#562020ff" color="#ffebebe6" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row gap={2}>
+                <BiRegularErrorAlt size={90} color="#ffebebe6" />
+                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
+                  <h2>Delayed Release of Feature</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <Column gap={0.5}>
+                  <span>Occupancy Approval is delayed until Occupancy Printing is complete</span>
+                </Column>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }

src/pages/ProfilePage/Profile.sass

@@ -0,0 +1,11 @@
+.name
+  padding: 1rem 2rem
+  border-radius: 8px
+  font-size: 1.75rem
+  font-weight: 800
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  align-items: center
+  background: #16212C
+  box-shadow: 8px 8px 28px #0d141b, -8px -8px 28px #1f2e3d

src/pages/ProfilePage/Profile.tsx

@@ -0,0 +1,37 @@
+import './Profile.sass'
+import { Logo, Link, Page, Row, Padding, Combobox, Box, Button, Modal, Column, QR, Input, Display } from '../../components'
+import { IoChevronBack } from 'solid-icons/io'
+import { _employeeName, _employeeId } from '../../stores/employee'
+
+export default () => {
+  return (
+    <>
+      <Page>
+        <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>
+
+            <Link to="/">
+              <Row content="right">
+                <IoChevronBack size={45} />
+                <span class="back-button-text">Back</span>
+              </Row>
+            </Link>
+          </Row>
+          <Column>
+            <h1 class="name">{sessionStorage.getItem('name')}</h1>
+
+            <Row content="left">
+              <span>Role:</span>
+            </Row>
+          </Column>
+        </Padding>
+      </Page>
+    </>
+  )
+}

src/styles/classes.sass

@@ -114,3 +114,11 @@
 
   tbody tr:nth-child(even) 
     background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)
+
+  // &__electrical
+  //   @extend .table
+  //   box-shadow: inset 0 1px 2px #2c2c16, 0 2px 4px #4d572432, 0 4px 8px #5e65344e
+
+  &__disabled
+    @extend .table
+    cursor: not-allowed