Updated main page

package.json

@@ -15,8 +15,12 @@
     "crypto-js": "^4.2.0",
     "dayjs": "^1.11.18",
     "gsap": "^3.13.0",
+    "jimp": "^1.6.0",
+    "jspdf": "^3.0.3",
     "nanostores": "^1.0.1",
     "ofetch": "^1.4.1",
+    "openssl-nodejs": "^1.0.5",
+    "pica": "^9.0.1",
     "sharp": "^0.34.4",
     "solid-icons": "^1.1.0",
     "solid-js": "^1.9.9",
@@ -25,9 +29,10 @@
   "devDependencies": {
     "@nanostores/solid": "^1.1.1",
     "@types/crypto-js": "^4.2.2",
+    "@types/node": "^24.6.2",
     "sass-embedded": "^1.93.2",
     "typescript": "~5.8.3",
-    "vite": "^7.1.7",
-    "vite-plugin-solid": "^2.11.8"
+    "vite": "^7.1.9",
+    "vite-plugin-solid": "^2.11.9"
   }
 }

src/components/Combobox/Combobox.sass

@@ -87,7 +87,6 @@
   overflow-y: auto
   max-height: 360px
   padding: 8px
-  
 
   &:focus
     outline: none

src/pages/MainPage/Main.tsx

@@ -5,8 +5,10 @@ import { Tabs } from '@kobalte/core/tabs'
 import { ofetch } from 'ofetch'
 import { onMount, createSignal } from 'solid-js'
 import dayjs from 'dayjs'
-import { checkConnection } from '../../utils/functions'
+import { checkConnection, createPdf } from '../../utils/functions'
 import { FaSolidThumbsUp } from 'solid-icons/fa'
+// @ts-ignore
+// import * as openssl from 'openssl-nodejs'
 
 const API = import.meta.env.VITE_BACKEND
 const PESO = import.meta.env.VITE_PESO
@@ -160,6 +162,10 @@ export default () => {
     await load()
   }
 
+  const openPDF = () => {
+    createPdf()
+  }
+
   onMount(async () => {
     await load()
   })
@@ -238,7 +244,7 @@ export default () => {
               </Tabs.Content>
               <Tabs.Content class="tabs__content" value="electrical">
                 <Row>
-                  <h2>List of Ready to Approve and Sign Electrical Order of Payments</h2>
+                  <h2 onClick={openPDF}>List of Ready to Approve and Sign Electrical Order of Payments</h2>
                 </Row>
 
                 <Row>
@@ -306,7 +312,7 @@ export default () => {
 
                                 <Row padding="2rem 0 0 0">
                                   <Button wide label="Approve" edges="curved" design="bo-primary" onClick={() => approveHandler(item)}></Button>
-                                  <span class="modal__cancel">To cancel click anywhere</span>
+                                  <span class="modal__cancel">Click anywhere to cancel</span>
                                 </Row>
                               </Padding>
                             </ModalButton>
@@ -365,6 +371,28 @@ export default () => {
           </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>
     </>
   )
 }

src/utils/functions/createPdf.ts

@@ -0,0 +1,77 @@
+import jsPDF from 'jspdf'
+
+export default () => {
+  const doc = new jsPDF({
+    orientation: 'p',
+    unit: 'mm',
+    format: 'letter',
+  })
+
+  const lungsod = new Image()
+  lungsod.src = 'src/assets/images/lungsod2.png'
+
+  const ocbo = new Image()
+  ocbo.src = 'src/assets/images/ocbologo.png'
+
+  // const lungsodItem = document.getElementById('lungsod')
+  // const lungsodSrc = lungsodItem?.getAttribute('src')
+  // const lungsodLink = document.createElement('a')
+  // lungsodLink.href = lungsodSrc ?? ''
+
+  // const ocboItem = document.getElementById('ocbo')
+  // const ocboSrc = ocboItem?.getAttribute('src')
+  // const ocboLink = document.createElement('a')
+  // ocboLink.href = ocboSrc ?? ''
+
+  const getTextWidth = (text: string, fontSize: number) => {
+    doc.setFontSize(fontSize)
+    return doc.getStringUnitWidth(text) * fontSize * 0.35
+  }
+
+  const pageWidth = doc.internal.pageSize.getWidth()
+
+  const republicText = 'Republic of the Philippines'
+  const republicTextWidth = getTextWidth(republicText, 10)
+  const officeText = 'OFFICE OF THE CITY BUILDING OFFICIAL'
+  const officeTextWidth = getTextWidth(officeText, 11)
+  const cityText = 'City of Davao'
+  const cityTextWidth = getTextWidth(cityText, 10)
+
+  const republicTextX = (pageWidth - republicTextWidth) / 2
+  const officeTextX = (pageWidth - officeTextWidth) / 2
+  const cityTextX = (pageWidth - cityTextWidth) / 2
+
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(10)
+  doc.text(republicText, republicTextX, 14)
+  doc.setFont('helvetica', 'bold')
+  doc.setFontSize(11)
+  doc.text(officeText, officeTextX, 19)
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(10)
+  doc.text(cityText, cityTextX, 24)
+
+  doc.addImage(lungsod, 'PNG', 12, 8, 20, 20, 'lungsod', 'NONE', 0)
+  doc.addImage(ocbo, 'PNG', pageWidth - 36, 8, 20, 20, 'ocbo', 'NONE', 0)
+
+  // doc.setLineWidth(0.9)
+  // doc.line(10, 34, pageWidth - 10, 34)
+
+  const opText = 'ORDER OF PAYMENT'
+  const opTextWidth = getTextWidth(opText, 10)
+  const opTextX = (pageWidth - opTextWidth) / 2
+
+  doc.setFont('helvetica', 'bold')
+  doc.setFontSize(10)
+  doc.text(opText, opTextX, 34)
+
+  const divisionText = 'ELECTRICAL PERMIT'
+  const divisionTextWidth = getTextWidth(divisionText, 9)
+  const divisionTextX = (pageWidth - divisionTextWidth) / 2
+
+  doc.setFont('helvetica', 'normal')
+  doc.setFontSize(9)
+  doc.text(divisionText, divisionTextX, 39)
+
+  doc.save('Sample')
+}

src/utils/functions/generateFavicon.ts

@@ -1,17 +1,15 @@
-// import sharp from 'sharp'
+import { Jimp } from 'jimp'
 
-// import * as path from 'path'
+export default async () => {
+  const inputSrc = 'src/assets/images/logo.png'
+  const favicon = 'public/favicon.png'
 
-// const generateFavicon = async () => {
-//   const inputSrc = 'src/assets/images/logo.png'
-//   const faviconPath = path.join(__dirname, '../public/favicon.png')
-
-//   try {
-//     await sharp(inputSrc).png({ quality: 90 }).resize(50).toFile(faviconPath)
-//     console.log('Favicon generated successfully')
-//   } catch (error) {
-//     console.error('Error generating favicon:', error)
-//   }
-// }
-
-// export default generateFavicon
+  try {
+    const image = await Jimp.read(inputSrc)
+    image.resize({ w: 90 })
+    await image.write(favicon)
+    console.log('Favicon generated successfully')
+  } catch (error) {
+    console.error('Error generating favicon:', error)
+  }
+}

src/utils/functions/index.ts

@@ -1 +1,3 @@
 export { default as checkConnection } from './checkConnection'
+export { default as createPdf } from './createPdf'
+// export { default as generateFavicon } from './generateFavicon'