Fixed submission on pops

src/components/Button/Button.tsx

@@ -1,6 +1,7 @@
 import './Button.sass'
-import { Show, Switch, Match } from 'solid-js'
+import { Show, Switch, Match, type JSXElement } from 'solid-js'
 import { A } from '@solidjs/router'
+import { Row } from '../index'
 
 interface Props {
   label?: string
@@ -12,6 +13,7 @@ interface Props {
   newtab?: boolean
   width?: number
   wide?: boolean
+  icon?: (props: { size?: number }) => JSXElement
 }
 
 const getBorderRadius = (edge: Props['edges']) => {
@@ -29,7 +31,7 @@ const getBorderRadius = (edge: Props['edges']) => {
 
 export default (props: Props) => {
   const borderRadius = getBorderRadius(props.edges)
-
+  const Icon = props.icon
   return (
     <>
       <Show when={props.to}>
@@ -37,6 +39,9 @@ export default (props: Props) => {
           <Match when={props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -44,6 +49,9 @@ export default (props: Props) => {
           <Match when={!props.design}>
             <A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
               <button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </A>
@@ -56,25 +64,39 @@ export default (props: Props) => {
           <Match when={props.design}>
             <Show when={props.submit}>
               <button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
               <button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
-                {props.label || 'Click Me!'}
+                <Row gap={0.5}>
+                  <Show when={props.icon}>
+                    <span>{Icon && <Icon size={24} />}</span>
+                  </Show>
+                  {props.label || 'Click Me!'}
+                </Row>
               </button>
             </Show>
           </Match>
           <Match when={!props.design}>
             <Show when={props.submit}>
               <button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>
 
             <Show when={!props.submit}>
               <button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
+                <Show when={props.icon}>
+                  <span>{Icon && <Icon size={24} />}</span>
+                </Show>
                 {props.label || 'Click Me!'}
               </button>
             </Show>

src/pages/MainPage/Main.tsx

@@ -10,11 +10,12 @@ import { FaSolidThumbsUp } from 'solid-icons/fa'
 import { _employeeName } 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'
 
 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
+// const NAME = import.meta.env.VITE_HEAD
 const PUBLICIP = import.meta.env.VITE_PUBLICIP
 
 export default () => {
@@ -167,7 +168,7 @@ export default () => {
   const postPops = async (application: string) => {
     const applicationId = await ofetch(API + 'get-idbyapplication-electrical/' + application, { parseResponse: JSON.parse })
     const response = await ofetch(API + 'get-popsdetails-electrical/' + applicationId.result, { parseResponse: JSON.parse })
-    const applicationNo = response.result[0]
+    // const applicationNo = response.result[0]
     const customerid = response.result2[0]
     const customerName = response.result3[0]
     const location = response.result4[0]
@@ -181,10 +182,10 @@ export default () => {
     const formattedDate = dayjs(today).format('YYYY-MM-DD')
     const formattedDatewithTime = dayjs(today).format('YYYY-MM-DD HH:mm:ss')
 
-    for (let i = 0; i < applicationNo.length; i++) {
+    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: NAME, data9: formattedDatewithTime, data10: lguList[i], data11: dpwhList[i], data12: boList[i], data13: PUBLICIP },
+        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 },
       })
     }
   }
@@ -279,6 +280,10 @@ export default () => {
     }
   }
 
+  const refresh = async () => {
+    await load()
+  }
+
   const logout = async () => {
     removeEmployee()
     navigate('/')
@@ -380,6 +385,12 @@ export default () => {
                   <h2 onClick={openPDF}>List of Ready to Approve and Sign in Electrical Order of Payments</h2>
                 </Row>
 
+                <Padding top={0} bottom={0} right={10} left={0}>
+                  <Row content="right">
+                    <Button label="Refresh Data" edges="curved" design="bo-primary" icon={VsRefresh} onClick={refresh}></Button>
+                  </Row>
+                </Padding>
+
                 <Row>
                   <table class="table">
                     <thead>

src/styles/classes.sass

@@ -79,7 +79,7 @@
 .table
   width: 80%
   border-collapse: collapse
-  margin: 2rem
+  margin: 1rem
   box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
 
   th, td