Updated main page

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>
     </>
   )
 }