Updated assessor page

src/pages/AssessorPage/Assessor.tsx

@@ -1,12 +1,12 @@
 import './Assessor.sass'
-import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link } from '../../components'
+import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link, Modal, Column, Box } 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 dayjs from 'dayjs'
-// import { checkConnection, createPdf } from '../../utils/functions'
+import { checkConnection, createPdf } from '../../utils/functions'
-// import { FaSolidThumbsUp } from 'solid-icons/fa'
+import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName, _employeeId } from '../../stores/employee'
 import { useNavigate } from '@solidjs/router'
 
@@ -22,23 +22,23 @@ export default () => {
   const [location, setLocation] = createSignal('')
   const [type, setType] = createSignal('')
   const [applicationId, setApplicationId] = createSignal(0)
-  const [assessorId, setAssessorId] = createSignal(0)
+  // const [assessorId, setAssessorId] = createSignal(0)
 
-  const [gflgu, setGflgu] = createSignal<number[]>([])
+  // const [gflgu, setGflgu] = createSignal<number[]>([])
-  const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
+  // const [gfdpwh, setGfdpwh] = createSignal<number[]>([])
-  const [tfbo, setTfbo] = createSignal<number[]>([])
+  // const [tfbo, setTfbo] = createSignal<number[]>([])
 
-  const [descriptionList, setDescriptionList] = createSignal<string[]>([])
+  // const [descriptionList, setDescriptionList] = createSignal<string[]>([])
-  const [amountList, setAmountList] = createSignal<string[]>([])
+  // const [amountList, setAmountList] = createSignal<string[]>([])
-  const [dateOpList, setDateOpList] = 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 [printed, setPrinted] = createSignal(false)
-  const [approvedApplication, setApprovedApplication] = createSignal('')
+  const [printedApplication, setPrintedApplication] = createSignal('')
 
   const [isBuilding, setIsBuilding] = createSignal(false)
   const [isOccupancy, setIsOccupancy] = createSignal(false)
@@ -58,6 +58,37 @@ export default () => {
     }
   }
 
+  // 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)
+  // }
+
+  const closeNotification = async () => {
+    setPrinted(false)
+    await checkDivision()
+    await getListForPrinting()
+  }
+
   const checkDivision = async () => {
     console.log('AAAA')
     const building = await checkAccess('BUILDING ORDER OF PAYMENT')
@@ -70,6 +101,27 @@ export default () => {
     setIsElectrical(electrical)
   }
 
+  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'))
+    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 getListForPrinting = async () => {
     console.log('BBB')
     try {
@@ -100,6 +152,59 @@ export default () => {
     return true
   }
 
+  const printHandler = async (application: string) => {
+    let signed: boolean = false
+    let forprinting: boolean = false
+    let updateOrderofpayment: boolean = false
+
+    setConnected(await checkConnection())
+    if (connected() === false) {
+      setErrorMessage('No Connection on Server')
+      return
+    }
+
+    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT PRINTED', '171', 'ELECOPPRINTED')
+    if (!signed) return
+
+    forprinting = await setNewStatus('FOR ELECTRICAL OFFICIAL RECEIPT VALIDATION', '98', 'ELECORVALIDATE')
+    if (!forprinting) return
+
+    updateOrderofpayment = await updateOp()
+
+    if (updateOrderofpayment) {
+      setPrintedApplication(application)
+      setPrinted(true)
+    }
+  }
+
+  const updateOp = async () => {
+    try {
+      await ofetch(API + 'update-opprinted-electrical', {
+        method: 'POST',
+        body: { data: parseInt(applicationId().toString()) },
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
+
+  const setNewStatus = async (status: string, tag: string, tagword: string) => {
+    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(employeeId().toString()) },
+      })
+      return true
+    } catch {
+      return false
+    }
+  }
+
   const logout = async () => {
     removeEmployee()
     navigate('/')
@@ -127,7 +232,9 @@ export default () => {
             </Link>
 
             <Row content="left" gap={1}>
-              <span class="name">{employeeName()}</span>
+              <Box curved thickness={0} padding="1.25rem 2.25rem" background="#0f131d56">
+                <span class="name">{employeeName()}</span>
+              </Box>
               <Clickable onClick={logout}>
                 <Row gap={0.5}>
                   <FiLogOut size={25} />
@@ -162,7 +269,10 @@ export default () => {
 
               <Tabs.Content class="tabs__content" value="building">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Building Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Building Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>
@@ -180,7 +290,10 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2>
+                  {/* <h2>List of Ready to Approve and Sign Occupancy Order of Payments</h2> */}
+                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                    <h2>Under Development</h2>
+                  </Box>
                 </Row>
 
                 <Row>
@@ -198,7 +311,9 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                  <Clickable onClick={() => createPdf()}>
+                    <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                  </Clickable>
                 </Row>
 
                 <Row>
@@ -223,9 +338,9 @@ export default () => {
                               design="bo-link"
                               background="#121e2acc"
                               color="#ffffffec"
-                              // function={async () => {
+                              function={async () => {
-                              //   await getopdetails(item)
+                                await getopdetails(item)
-                              // }}
+                              }}
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
                                 <span class="modal__application-number">{item}</span>
@@ -265,7 +380,7 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Print" edges="curved" design="bo-primary"></Button>
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler(item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
@@ -281,6 +396,50 @@ export default () => {
           </Row>
         </Padding>
       </Page>
+
+      <div onClick={closeNotification}>
+        <Modal trigger={printed()} background="#123220ff" color="#cdfbe1f0" opacity={0.8}>
+          <Padding top={1} bottom={1} left={2} right={2}>
+            <Column>
+              <Row gap={4}>
+                <FaSolidThumbsUp size={75} />
+                <Box curved thickness={3} color="#cdfbe1f0" padding="1rem">
+                  <span class="approval">Printed</span>
+                </Box>
+              </Row>
+              <Row padding="2rem 0 0 0">
+                <h2>{printedApplication()}</h2>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to proceed</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
+
+      <div onClick={() => setConnected(true)}>
+        <Modal trigger={connected() === false} background="#562020ff" color="#ffebebe6" opacity={0.8}>
+          <Padding top={1} bottom={1} left={4} right={4}>
+            <Column>
+              <Row>
+                <Box curved thickness={3} color="#ffebebe6" padding="1rem">
+                  <h2>Connection Error</h2>
+                </Box>
+              </Row>
+
+              <Row>
+                <h3>{errorMessage()}</h3>
+              </Row>
+
+              <Row>
+                <span class="close-text">Click anywhere to close</span>
+              </Row>
+            </Column>
+          </Padding>
+        </Modal>
+      </div>
     </>
   )
 }