fix home ui

src/components/Dashboard.vue

@@ -23,7 +23,7 @@
       <div class="row justify-content-center">
         <div class="col-7">
           <LelongToday :key="componentKey"/>
-          <button class="button btn-primary" @click="forceRerender">try</button>
+          <button class="btn mt-2 btn-info" @click="forceRerender">Reload Component <i class="bi bi-arrow-up"></i></button>
           <LelongNext />
         </div>
         <div class="col-5 p-5 pt-0">

src/components/Modal.vue

@@ -0,0 +1,48 @@
+<template>
+  <!-- Button trigger modal -->
+  <button
+    type="button"
+    class="btn btn-primary"
+    data-toggle="modal"
+    data-target="#exampleModal"
+  >
+    Launch demo modal
+  </button>
+
+  <!-- Modal -->
+  <div
+    class="modal fade"
+    id="exampleModal"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+          <button
+            type="button"
+            class="close"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+            <span aria-hidden="true">&times;</span>
+          </button>
+        </div>
+        <div class="modal-body">...</div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">
+            Close
+          </button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>

src/components/dashboard/LelongToday.vue

@@ -1,6 +1,11 @@
 <template>
-  <div class="spinner-border" v-if="loading" role="status">
-    <span class="visually-hidden">Loading...</span>
+  <div
+    v-if="loading"
+    style="min-height: 20vh; display: grid; place-items: center"
+  >
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
   </div>
   <div v-else class="card text-center">
     <div class="card-header fw-bold text-uppercase">
@@ -17,7 +22,7 @@
         </thead>
         <tbody>
           <tr v-for="(item, index) in response" :key="item.id">
-            <td>{{index + 1}}</td>
+            <td>{{ index + 1 }}</td>
             <td>{{ item.lelongbid[0].cawangan.caw_name }}</td>
             <td>{{ item.masamula_lelong }}</td>
           </tr>
@@ -33,7 +38,9 @@
       <!-- <a href="#" class="btn btn-primary">Lihat Marhun</a> -->
     </div>
     <div class="card-footer text-muted">
-      <router-link class="btn btn-primary" to="/list">Lihat Senarai</router-link>
+      <router-link class="btn btn-primary" to="/list"
+        >Lihat Senarai</router-link
+      >
     </div>
   </div>
 </template>