diff --git a/src/pages/AssessorPage/Assessor.tsx b/src/pages/AssessorPage/Assessor.tsx
index aa8c9c7..0de383d 100644
--- a/src/pages/AssessorPage/Assessor.tsx
+++ b/src/pages/AssessorPage/Assessor.tsx
@@ -2,7 +2,6 @@ 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 { ofetch } from 'ofetch'
 import { onMount, createSignal, Show, createEffect } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection, createPdf } from '../../utils/functions'
@@ -11,8 +10,8 @@ import { _employeeName, _employeeId } 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 { getApi, getApiMulti, postApi } from '../../utils/functions'
 
-const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
 
 export default () => {
@@ -43,18 +42,14 @@ export default () => {
   const [filter, setFilter] = createSignal('')
 
   const checkAccess = async (access: string) => {
-    try {
-      const response = await ofetch(`${API}check-access/${access}/${employeeId()}`)
-      const result = response.result
-      if (result > 0) return true
-      else return false
-    } catch {
-      return false
-    }
+    const response = await getApi('check-access', access, employeeId())
+    const result = response
+    if (result > 0) return true
+    else return false
   }
 
-  const getPrintDetails = async (id: number) => {
-    const response = await ofetch(API + 'get-printdetails-electrical/' + id)
+  const getPrintDetails = async (division: string, id: number) => {
+    const response = await getApiMulti(`get-printdetails-${division}`, id)
     const applicationno = response.result
     const date = response.result2
     const location = response.result3
@@ -72,8 +67,8 @@ export default () => {
     _assessorid.set(employeeId())
   }
 
-  const getPrintDetailsFees = async (id: number) => {
-    const response = await ofetch(API + 'get-printdetailsfees-electrical/' + id)
+  const getPrintDetailsFees = async (division: string, id: number) => {
+    const response = await getApiMulti(`get-printdetailsfees-${division}`, id)
     const feeList = response.result
     const accountCodeList = response.result2
     const amountList = response.result3
@@ -111,7 +106,9 @@ export default () => {
   const closeNotification = async () => {
     setPrinted(false)
     await checkDivision()
-    await getListForPrinting()
+    if (isBuilding()) await getListForPrinting('building')
+    if (isOccupancy()) await getListForPrinting('occupancy')
+    if (isElectrical()) await getListForPrinting('electrical')
   }
 
   const checkDivision = async () => {
@@ -125,8 +122,14 @@ export default () => {
     setIsElectrical(electrical)
   }
 
-  const getopdetails = async (applicationNo: string) => {
-    const op = await ofetch(API + 'get-opdetails-electrical/' + applicationNo, { parseResponse: JSON.parse })
+  const getopdetails = async (division: string, applicationNo: string) => {
+    // let op = []
+    // if (division === 'building') op = await getApiMulti('get-opdetails-building', applicationNo)
+    // if (division === 'occupancy') op = await getApiMulti('get-opdetails-occupancy', applicationNo)
+    // if (division === 'electrical') op = await getApiMulti('get-opdetails-electrical', applicationNo)
+
+    const op = await getApiMulti(`get-opdetails-${division}`, applicationNo)
+
     setLocation(op.result[0])
     setType(op.result2[0])
     setAssessor(op.result3[0])
@@ -140,15 +143,16 @@ export default () => {
     // setDateOpList(op.result10)
     // calculateAmounts()
 
-    getPrintDetails(op.result6[0])
-    getPrintDetailsFees(op.result6[0])
+    getPrintDetails(division, op.result6[0])
+    getPrintDetailsFees(division, op.result6[0])
+
     getSignatureImage(employeeId())
 
     const approversignId = await geteSignId(276)
     getApprovedDate(approversignId, applicationNo)
     // const assessorId = await getEmployeeId(op.result7[0])
     // const assessorsignId = await geteSignId(assessorId)
-    getAssessedDate(op.result6[0])
+    getAssessedDate(division, op.result6[0])
   }
 
   const calculateTotal = (list: number[]) => {
@@ -156,9 +160,9 @@ export default () => {
     return total
   }
 
-  const getListForPrinting = async () => {
+  const getListForPrinting = async (division: string) => {
     try {
-      const response = await ofetch(API + 'get-listopprinting-electrical', { parseResponse: JSON.parse })
+      const response = await getApiMulti(`get-listopprinting-${division}`)
 
       if (filter() !== '' && filter().trim().length !== 0) {
         const filteredApplications = response.result.filter((item: string) => item.includes(filter()))
@@ -194,7 +198,7 @@ export default () => {
     return true
   }
 
-  const printHandler = async (application: string) => {
+  const printHandler = async (division: string, application: string) => {
     let signed: boolean = false
     let forprinting: boolean = false
     let updateOrderofpayment: boolean = false
@@ -205,13 +209,13 @@ export default () => {
       return
     }
 
-    signed = await setNewStatus('ELECTRICAL ORDER OF PAYMENT PRINTED', '171', 'ELECOPPRINTED', 1)
+    signed = await setNewStatus(division, 'ELECTRICAL ORDER OF PAYMENT PRINTED', '171', 'ELECOPPRINTED', 1)
     if (!signed) return
 
-    forprinting = await setNewStatus('FOR ELECTRICAL OFFICIAL RECEIPT VALIDATION', '98', 'ELECORVALIDATE', 0)
+    forprinting = await setNewStatus(division, 'FOR ELECTRICAL OFFICIAL RECEIPT VALIDATION', '98', 'ELECORVALIDATE', 0)
     if (!forprinting) return
 
-    updateOrderofpayment = await updateOp()
+    updateOrderofpayment = await updateOp(division)
 
     if (updateOrderofpayment) {
       postTransaction(application)
@@ -221,42 +225,28 @@ export default () => {
     }
   }
 
-  const updateOp = async () => {
-    try {
-      await ofetch(API + 'update-opprinted-electrical', {
-        method: 'POST',
-        body: { data: parseInt(applicationId().toString()) },
-      })
-      return true
-    } catch {
-      return false
-    }
+  const updateOp = async (division: string) => {
+    const post = await postApi(`update-opprinted-${division}`, { data: parseInt(applicationId().toString()) })
+    return post
   }
 
-  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(employeeId().toString()) },
-      })
-      return true
-    } catch {
-      return false
-    }
+    const post = await postApi(`post-newstatus-${division}`, { data: statusid, data2: formattedDate, data3: status, data4: tag, data5: tagword, data6: parseInt(approved.toString()), data7: parseInt(employeeId().toString()) })
+    return post
   }
 
   const getSignatureImage = async (id: number) => {
     try {
-      const response = await ofetch(API + 'get-signatureimage/' + id, { parseResponse: JSON.parse })
-      const image = response.result
+      const response = await getApi('get-signatureimage', id)
+      const image = response
       _signatureAssessor.set(image)
 
-      const response2 = await ofetch(API + 'get-signatureimage/' + 276, { parseResponse: JSON.parse })
-      const image2 = response2.result
+      const response2 = await getApi('get-signatureimage', 276)
+      const image2 = response2
       _signatureApprover.set(image2)
       return true
     } catch {
@@ -266,8 +256,8 @@ export default () => {
 
   const geteSignId = async (id: number) => {
     try {
-      const response = await ofetch(API + 'get-esignid/' + id, { parseResponse: JSON.parse })
-      const result = response.result
+      const response = await getApi('get-esignid', id)
+      const result = response
       return result
     } catch {
       return 0
@@ -279,31 +269,17 @@ export default () => {
     const today = new Date()
     const formatedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
 
-    await ofetch(API + 'post-esigntransaction', {
-      method: 'POST',
-      body: { data: parseInt(id), data2: application, data3: formatedDate },
-    })
+    await postApi('post-esigntransaction', { data: parseInt(id), data2: application, data3: formatedDate })
   }
 
   const getApprovedDate = async (id: number, application: string) => {
-    try {
-      const response = await ofetch(API + `get-signeddate/${id}/${application}`, { parseResponse: JSON.parse })
-      const result = response.result
-      _approvedDate.set(result)
-    } catch (error) {
-      _approvedDate.set('')
-    }
+    const response = await getApi('get-signeddate', id, application)
+    _approvedDate.set(response)
   }
 
-  const getAssessedDate = async (electricalid: number) => {
-    try {
-      const response = await ofetch(API + 'get-signeddateassessed-electrical/' + electricalid, { parseResponse: JSON.parse })
-      const result = response.result
-      console.log('date', result)
-      _assessedDate.set(result)
-    } catch (error) {
-      _assessedDate.set('')
-    }
+  const getAssessedDate = async (division: string, id: number) => {
+    const response = await getApi(`get-signeddateassessed-${division}`, id)
+    _assessedDate.set(response)
   }
 
   // const getEmployeeId = async (name: string) => {
@@ -317,7 +293,9 @@ export default () => {
   // }
 
   const refresh = async () => {
-    await getListForPrinting()
+    if (isBuilding()) await getListForPrinting('building')
+    if (isOccupancy()) await getListForPrinting('occupancy')
+    if (isElectrical()) await getListForPrinting('electrical')
   }
 
   const logout = async () => {
@@ -335,15 +313,21 @@ export default () => {
 
     if (logged) {
       await checkDivision()
-      await getListForPrinting()
+      if (isBuilding()) await getListForPrinting('building')
+      if (isOccupancy()) await getListForPrinting('occupancy')
+      if (isElectrical()) await getListForPrinting('electrical')
     }
   })
 
   createEffect(async () => {
     if (filter() !== '') {
-      await getListForPrinting()
+      if (isBuilding()) await getListForPrinting('building')
+      if (isOccupancy()) await getListForPrinting('occupancy')
+      if (isElectrical()) await getListForPrinting('electrical')
     } else if (filter() === '') {
-      await getListForPrinting()
+      if (isBuilding()) await getListForPrinting('building')
+      if (isOccupancy()) await getListForPrinting('occupancy')
+      if (isElectrical()) await getListForPrinting('electrical')
     }
   })
 
@@ -420,30 +404,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> */}
-                  <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
+                  {/* <Box curved thickness={0} background="#602a2abf" padding="1rem 2rem">
                     <h2>Under Development</h2>
-                  </Box>
-                </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></tbody>
-                  </table>
-                </Row>
-              </Tabs.Content>
-              <Tabs.Content class="tabs__content" value="electrical">
-                <Row>
-                  <Clickable onClick={() => createPdf()}>
-                    <h2>List of Ready to Print in Electrical Order of Payments</h2>
-                  </Clickable>
+                  </Box> */}{' '}
+                  <h2>List of Ready to Print in Occupancy Order of Payments</h2>
                 </Row>
 
                 <Padding top={0} bottom={0} right={10} left={10}>
@@ -476,7 +440,7 @@ export default () => {
                               background="#121e2acc"
                               color="#ffffffec"
                               function={async () => {
-                                await getopdetails(item)
+                                await getopdetails('occupancy', item)
                               }}
                             >
                               <Padding top={0} left={2} right={2} bottom={0}>
@@ -517,7 +481,95 @@ export default () => {
                                 </Padding>
 
                                 <Row padding="2rem 0 0 0">
-                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler(item)}></Button>
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('occupancy', 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="electrical">
+                <Row>
+                  <h2>List of Ready to Print in Electrical Order of Payments</h2>
+                </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>
+                        <th>Application Number</th>
+                        <th>Name</th>
+                        <th style="text-align: center">Show Details</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {applicationList().map((item, index) => (
+                        <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('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">{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().toFixed(2)}
+                                    </span>
+                                  </section>
+                                </Padding>
+
+                                <Row padding="2rem 0 0 0">
+                                  <Button wide label="Print" edges="curved" design="bo-primary" onClick={() => printHandler('electrical', item)}></Button>
                                   <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
diff --git a/src/pages/MainPage/Main.tsx b/src/pages/MainPage/Main.tsx
index 8f2722a..cb55ecf 100644
--- a/src/pages/MainPage/Main.tsx
+++ b/src/pages/MainPage/Main.tsx
@@ -2,7 +2,6 @@ import './Main.sass'
 import { Logo, Link, Page, Row, Padding, ModalButton, Box, Button, Modal, Column, Clickable } from '../../components/'
 import { FiLogOut } from 'solid-icons/fi'
 import { Tabs } from '@kobalte/core/tabs'
-import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
 import { checkConnection, getApi, getApiMulti, postApi } from '../../utils/functions'
@@ -13,7 +12,6 @@ import { _applicationNo, _date, _optn, _name, _location, _type, _assessor, _feeL
 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
 const ID = import.meta.env.VITE_HEADID
 // const NAME = import.meta.env.VITE_HEAD
@@ -265,10 +263,7 @@ export default () => {
     const formattedDatewithTime = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
 
     for (let i = 0; i < response.result.length; i++) {
-      await ofetch(API + 'post-pops', {
-        method: 'POST',
-        body: { data: application, data2: formattedDate, data3: customerid, data4: customerName, data5: location, data6: codeList[i], data7: amountList[i], data8: assessor(), data9: formattedDatewithTime, data10: lguList[i], data11: dpwhList[i], data12: boList[i], data13: PUBLICIP },
-      })
+      await postApi('post-pops', { data: application, data2: formattedDate, data3: customerid, data4: customerName, data5: location, data6: codeList[i], data7: amountList[i], data8: assessor(), data9: formattedDatewithTime, data10: lguList[i], data11: dpwhList[i], data12: boList[i], data13: PUBLICIP })
     }
   }
 
@@ -335,10 +330,7 @@ export default () => {
     const today = new Date()
     const formatedDate = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
 
-    await ofetch(API + 'post-esigntransaction', {
-      method: 'POST',
-      body: { data: parseInt(id), data2: approvedApplication(), data3: formatedDate },
-    })
+    await postApi('post-esigntransaction', { data: parseInt(id), data2: approvedApplication(), data3: formatedDate })
   }
 
   const updateDocflow = async (division: string, applicationid: number, status: string) => {