update borrow

src/pages/borrow.vue

@@ -2,8 +2,8 @@
   <q-page padding>
     <div class="q-pa-md">
       <q-banner dense inline-actions class="text-white bg-blue font-tajuk">
-        <div class="font-tajuk text-h4">
-          Borrow
+        <div class="font-tajuk text-h6">
+          Borrow History
         </div>
       </q-banner>
       <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="Staf/Student ID" dense>
@@ -15,12 +15,37 @@
           <q-btn round dense flat icon="search" @click="findFines" />
         </template>
       </q-input>
-      <div  class="q-pa-md fit row wrap justify-center   q-gutter-md">
+      <div v-if="searchact" class="q-pt-md">
+        <div class="">
+          <q-card style="width: 90vw">
+            <q-item>
+              <q-item-section >
+                ID
+              </q-item-section>
+
+              <q-item-section>
+                <q-item-label>
+                  <q-skeleton type="text" />
+                </q-item-label>
+              </q-item-section>
+            </q-item>
+
+            <q-skeleton height="200px" square />
+
+            <q-card-actions align="right" class="q-gutter-md">
+              <q-skeleton type="QBtn" />
+              <q-skeleton type="QBtn" />
+            </q-card-actions>
+          </q-card>
+        </div>
+      </div>
+      <div v-if="data.length>0 && !searchact" class="q-pt-md row wrap justify-center   q-gutter-md">
         <q-table
-          title="Borrows"
+          :title="lbltitle+borrower_id"
           :data="data"
           :columns="columns"
           row-key="name"
+          style="width:90vw"
         />
       </div>
     </div>
@@ -33,6 +58,8 @@ export default {
       return {
         borrower_id: '2016607348',
         total_fines: .0,
+        searchact: false,
+        lbltitle: 'ID : ',
         columns: [
           {
             name: 'BOR_ID',
@@ -45,7 +72,7 @@ export default {
           { name: 'COPY_ID', align: 'center', label: 'Copy ID', field: 'COPY_ID', sortable: true },
           { name: 'ISS_DT', label: 'Iss Date', field: 'ISS_DT', sortable: false },
           { name: 'RET_DT', label: 'Ret Date', field: 'RET_DT' },
-          { name: 'TITLE_NAME', label: 'Title Name', field: 'TITLE_NAME' }
+          { name: 'TITLE_NAME', label: 'Title Name', field: 'TITLE_NAME', align:"left" }
         ],
         data: []
       }
@@ -54,18 +81,46 @@ export default {
         findFines() {
             this.$refs.borrower_id.validate()
             if (this.$refs.borrower_id.hasError){
-              
+              this.$q.notify({
+                message: 'Error. Please enter ID.',
+                icon: 'error',
+                color: 'red'
+              })
             }
             else {
+              this.searchact=true;
+              
                 this.$axios.get('wils/pinjam',{
                     params: {
                         BOR_ID: this.borrower_id
                     }
                 }).then((response) => {
                     console.log(response)
-                    this.data =  response.data       
+                    this.data =  response.data 
+                    if(this.data.length>0){
+                      this.$q.notify({
+                        message: 'Record was successfully retrieved.',
+                        icon: 'check',
+                        color: 'green'
+                      })  
+                    }else{
+                      this.$q.notify({
+                      message: 'No record found',
+                      icon: 'error',
+                      color: 'red'
+                    })
+                    }
+                        
                 }).catch((err) => {
                     console.log(err)
+                    this.$q.notify({
+                      message: 'Error. please try again.',
+                      icon: 'error',
+                      color: 'red'
+                    })
+                }).finally(()=>{
+                  this.$q.loading.hide()
+                  this.searchact = false
                 })
             }
         }

src/pages/fine.vue

 <template>
   <q-page padding>
+    <div class="q-pa-md">
+      
+    </div>
     <div class="q-pa-md">
       <q-banner dense inline-actions class="text-white bg-blue font-tajuk">
         <div class="font-tajuk text-h4">