From f67721abff833438ec4f06b3055f0ff775a022d3 Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 3 Mar 2026 16:39:14 +0800
Subject: [PATCH] Updated assessor page

---
 src/pages/AssessorPage/Assessor.sass |  10 ++
 src/pages/AssessorPage/Assessor.tsx  | 180 +++++++++++++++------------
 2 files changed, 111 insertions(+), 79 deletions(-)

diff --git a/src/pages/AssessorPage/Assessor.sass b/src/pages/AssessorPage/Assessor.sass
index 894a243..6dc3e9a 100644
--- a/src/pages/AssessorPage/Assessor.sass
+++ b/src/pages/AssessorPage/Assessor.sass
@@ -80,3 +80,13 @@
 
   &__button
     padding: 1rem 0 0 0
+
+.loading-spinner
+  display: inline-block
+  animation: rotate 2s linear infinite
+        
+@keyframes rotate
+  from
+    transform: rotate(0deg)
+  to
+    transform: rotate(360deg)
\ No newline at end of file
diff --git a/src/pages/AssessorPage/Assessor.tsx b/src/pages/AssessorPage/Assessor.tsx
index 193cd6f..a2f685a 100644
--- a/src/pages/AssessorPage/Assessor.tsx
+++ b/src/pages/AssessorPage/Assessor.tsx
@@ -33,6 +33,7 @@ import {
   _units,
 } from '../../stores/pdfinfo.ts'
 import { checkConnection, createPdfElectrical, createPdfOccupancy, getApi, getApiMulti, getDateTime, postApi, saveNewName, saveNewPassword, securePassword, statusPopsApi, voidPopsApi } from '../../utils/functions/index.ts'
+import { AiOutlineLoading3Quarters } from 'solid-icons/ai'
 import './Assessor.sass'
 
 const PESO = import.meta.env.VITE_PESO
@@ -82,6 +83,7 @@ export default () => {
   const [selectedType, setSelectedType] = createSignal('Print')
 
   const [voidError, setVoidError] = createSignal(false)
+  const [isLoading, setIsLoading] = createSignal(false)
 
   let bldgadditional = false
 
@@ -246,6 +248,8 @@ export default () => {
   }
 
   const getListForPrinting = async (division: string) => {
+    setIsLoading(true)
+
     try {
       let response: any
 
@@ -283,6 +287,8 @@ export default () => {
     } catch (error) {
       console.error(error)
     }
+
+    setIsLoading(false)
   }
 
   const removeEmployee = () => {
@@ -506,6 +512,11 @@ export default () => {
     return true
   }
 
+  const checkStatusPopsLocal = async (application: string) => {
+    const response = await getApi('check-statuspops-local', application)
+    return response
+  }
+
   const statusPopsOp = async (application: string) => {
     const response = await statusPopsApi(application)
     return response
@@ -866,87 +877,98 @@ export default () => {
                 </Padding>
 
                 <Row>
-                  <table class="table">
-                    <thead>
-                      <tr>
-                        <th>Application Number</th>
-                        <th>Name</th>
-                        <th style="text-align: center">Show Details</th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {applicationListElectrical().map((item: string, index: number) => (
+                  <Show when={isLoading()}>
+                    <Padding top={2} bottom={0} right={10} left={10}>
+                      <Column gap={1}>
+                        <AiOutlineLoading3Quarters class="loading-spinner" size={42} opacity={0.8} />
+                        <span>Downloading Data</span>
+                      </Column>
+                    </Padding>
+                  </Show>
+
+                  <Show when={!isLoading()}>
+                    <table class="table">
+                      <thead>
                         <tr>
-                          <td>{item}</td>
-                          <td>{nameListElectrical()[index]}</td>
-
-                          <td>
-                            <ModalButton
-                              class="modal"
-                              label="Show Details"
-                              design="bo-link"
-                              background="#121e2acc"
-                              color="#ffffffec"
-                              function={async () => {
-                                await getopdetails('electrical', 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">{nameListElectrical()[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">
-                                  <Show when={selectedType() === 'Print'}>
-                                    <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
-                                  </Show>
-                                  <Show when={selectedType() !== 'Print'}>
-                                    <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('electrical', item)}></Button>
-                                  </Show>
-                                  <span class="modal__cancel">Click anywhere to cancel</span>
-                                </Row>
-                              </Padding>
-                            </ModalButton>
-                          </td>
+                          <th>Application Number</th>
+                          <th>Name</th>
+                          <th style="text-align: center">Show Details</th>
                         </tr>
-                      ))}
-                    </tbody>
-                  </table>
+                      </thead>
+                      <tbody>
+                        {applicationListElectrical().map((item: string, index: number) => (
+                          <tr>
+                            <td>{item}</td>
+                            <td>{nameListElectrical()[index]}</td>
+
+                            <td>
+                              <ModalButton
+                                class="modal"
+                                label="Show Details"
+                                design="bo-link"
+                                background="#121e2acc"
+                                color="#ffffffec"
+                                function={async () => {
+                                  await getopdetails('electrical', 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">{nameListElectrical()[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">
+                                    <Show when={selectedType() === 'Print'}>
+                                      <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
+                                    </Show>
+                                    <Show when={selectedType() !== 'Print'}>
+                                      <Button wide label="Reprint" edges="curved" design="bo-primary" onClick={() => rePrintHandler('electrical', item)}></Button>
+                                    </Show>
+                                    <span class="modal__cancel">Click anywhere to cancel</span>
+                                  </Row>
+                                </Padding>
+                              </ModalButton>
+                            </td>
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </Show>
                 </Row>
               </Tabs.Content>
             </Tabs>