Updated assessor page

src/pages/AssessorPage/Assessor.tsx

@@ -2,7 +2,8 @@ import './Assessor.sass'
 import { Logo, Page, Row, Padding, ModalButton, Button, Clickable, Link, Modal, Column, Box, Input } from '../../components'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
-import { onMount, createSignal, Show, createEffect } from 'solid-js'
+import { onMount, createSignal, createEffect } from 'solid-js'
+import { Show } from 'solid-js/web'
 import dayjs from 'dayjs'
 import { checkConnection, createPdfOccupancy, createPdfElectrical } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
@@ -27,6 +28,13 @@ export default () => {
   const [applicationList, setApplicationList] = createSignal<string[]>([])
   const [nameList, setNameList] = createSignal<string[]>([])
 
+  const [applicationListElectrical, setApplicationListElectrical] = createSignal<string[]>([])
+  const [nameListElectrical, setNameListElectrical] = createSignal<string[]>([])
+  const [applicationListOccupancy, setApplicationListOccupancy] = createSignal<string[]>([])
+  const [nameListOccupancy, setNameListOccupancy] = createSignal<string[]>([])
+  const [applicationListBuilding, setApplicationListBuilding] = createSignal<string[]>([])
+  const [nameListBuilding, setNameListBuilding] = createSignal<string[]>([])
+
   const [errorMessage, setErrorMessage] = createSignal('')
   const [connected, setConnected] = createSignal(true)
   const [printed, setPrinted] = createSignal(false)
@@ -202,12 +210,31 @@ export default () => {
         const filteredApplications = response.result.filter((item: string) => item.includes(filter()))
         const filteredIndices = response.result.map((item: string, index: number) => (item.includes(filter()) ? index : -1)).filter((index: number) => index !== -1)
         const filteredNames = filteredIndices.map((index: number) => response.result2[index])
-        setApplicationList(filteredApplications)
+
-        setNameList(filteredNames)
+        if (division === 'electrical') {
+          setApplicationListElectrical(filteredApplications)
+          setNameListElectrical(filteredNames)
+        } else if (division === 'occupancy') {
+          setApplicationListOccupancy(filteredApplications)
+          setNameListOccupancy(filteredNames)
+        } else {
+          setApplicationlistBuilding(filteredApplications)
+          setNameListBuilding(filteredNames)
+        }
         return
       }
-      setApplicationList(response.result)
+     
-      setNameList(response.result2)
+      if (division === 'electrical') {
+        setApplicationListElectrical(response.result)
+        setNameListElectrical(response.result2)
+      } else if (division === 'occupancy') {
+        setApplicationListOccupancy(response.result)
+        setNameListOccupancy(response.result2)
+      } else {
+        setApplicationListBuilding(response.result)
+        setNameListBuilding(response.result2)
+      }
+
     } catch (error) {
       console.error(error)
     }
@@ -379,22 +406,21 @@ export default () => {
       await checkDivision()
       if (isBuilding()) await getListForPrinting('building')
       if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isElectrical()) await getListForPrinting('electrical')
+      //   if (isElectrical()) await getListForPrinting('electrical')
     }
   })
 
-  createEffect(async () => {
+  // createEffect(async () => {
-    if (filter() !== '') {
+  //   if (filter() !== '') {
-      console.log('empty')
+  //     if (isBuilding()) await getListForPrinting('building')
-      if (isBuilding()) await getListForPrinting('building')
+  //     if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isOccupancy()) await getListForPrinting('occupancy')
+  //     if (isElectrical()) await getListForPrinting('electrical')
-      if (isElectrical()) await getListForPrinting('electrical')
+  //   } else if (filter() === '') {
-    } else if (filter() === '') {
+  //     if (isBuilding()) await getListForPrinting('building')
-      if (isBuilding()) await getListForPrinting('building')
+  //     if (isOccupancy()) await getListForPrinting('occupancy')
-      if (isOccupancy()) await getListForPrinting('occupancy')
+  //     if (isElectrical()) await getListForPrinting('electrical')
-      if (isElectrical()) await getListForPrinting('electrical')
+  //   }
-    }
+  // })
-  })
 
   return (
     <>
@@ -448,32 +474,97 @@ 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>
-                  <Padding top={2} bottom={0} left={0} right={0}>
-                    <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
-                      <h2>Under Development</h2>
-                    </Box>
-                  </Padding>
                 </Row>
 
+                <Padding top={0} bottom={0} right={10} left={10}>
+                  <Row content="split">
+                    <Input value={filter()} onChange={setFilter} placeholder="Filter Application Number" />
+                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
+                  </Row>
+                </Padding>
+
                 <Row>
                   <table class="table">
                     <thead>
-                      {/* <tr>
+                      <tr>
                         <th>Application Number</th>
                         <th>Name</th>
                         <th style="text-align: center">Show Details</th>
-                      </tr> */}
+                      </tr>
                     </thead>
-                    <tbody></tbody>
+                    <tbody>
+                      {applicationListBuilding().map((item: string, index: number) => (
+                        <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('building', 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().toLocaleString('en-US', {
+                                        minimumFractionDigits: 2,
+                                      })}
+                                    </span>
+                                  </section>
+                                </Padding>
+
+                                <Row padding="2rem 0 0 0">
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('building', item)}></Button>
+                                  <span class="modal__cancel">Click anywhere to cancel</span>
+                                </Row>
+                              </Padding>
+                            </ModalButton>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
                   </table>
                 </Row>
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="occupancy">
                 <Row>
-                  {/* <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
-                    <h2>Under Development</h2>
-                  </Box> */}{' '}
                   <h2>List of Ready to Print in Occupancy Order of Payments</h2>
                 </Row>
 
@@ -494,7 +585,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationList().map((item, index) => (
+                      {applicationListOccupancy().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameList()[index]}</td>
@@ -585,7 +676,7 @@ export default () => {
                       </tr>
                     </thead>
                     <tbody>
-                      {applicationList().map((item, index) => (
+                      {applicationListElectrical().map((item: string, index: number) => (
                         <tr>
                           <td>{item}</td>
                           <td>{nameList()[index]}</td>