diff --git a/resources/assets/js/components/LocaleDropdown.vue b/resources/assets/js/components/LocaleDropdown.vue
index 99a8f7ff..8e5c634b 100644
--- a/resources/assets/js/components/LocaleDropdown.vue
+++ b/resources/assets/js/components/LocaleDropdown.vue
@@ -25,8 +25,8 @@
           <a class="nav-link" href="#" role="button" slot="reference">Update Rate</a>
         </el-popover></li>
     <li><a class="nav-link" href="/admin/complete-order" role="button">Complete Order</a></li>
-    <li><a class="nav-link" href="#" role="button">Transaction History</a></li>
-    <li><a class="nav-link" href="#" role="button">Upload Supplier Bank Slip to System</a></li>
+    <li><a class="nav-link" href="/admin/transaction-history" role="button">Transaction History</a></li>
+    <li><a class="nav-link" href="/admin/upload-supplier-bank-slip" role="button">Upload Supplier Bank Slip to System</a></li>
   </ul>
 
 <!-- update rate dialog -->
@@ -51,14 +51,14 @@
     </div>
   </el-dialog>
 <!-- update rate dialog end -->
-<!-- update rate dialog end -->
+<!-- update rate dialog done -->
   <el-dialog align="center" :visible.sync="DoneUpdateRateDialogVisible" width="30%">
     <span>Rate Successfully Updated</span><br><br>
     <div align="center">
         <el-button type="primary" @click="DoneUpdateRateDialogVisible = false">OK</el-button>
     </div>
   </el-dialog>
-<!-- update rate dialog end -->
+<!-- update rate dialog done end -->
  </div> 
 </template>
 
diff --git a/resources/assets/js/pages/admin/complete-order.vue b/resources/assets/js/pages/admin/complete-order.vue
index e9681fad..7c5f05f8 100644
--- a/resources/assets/js/pages/admin/complete-order.vue
+++ b/resources/assets/js/pages/admin/complete-order.vue
@@ -7,11 +7,9 @@
         <el-table-column prop="order_date" label="Order Date" sortable></el-table-column>
         <el-table-column prop="transfer_amount" label="Transfer Amount (RMB)" sortable></el-table-column>
         <el-table-column prop="status" label="Status"></el-table-column>
-    </el-table>
-    <div>
-        <span slot="footer" class="pagination-footer">
-            <el-pagination background layout="prev, pager, next" :total="5"></el-pagination>
-        </span>
+    </el-table><br><br>
+    <div align="right">
+        <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
     </div>
 </div>
 </template>
diff --git a/resources/assets/js/pages/admin/transaction-history.vue b/resources/assets/js/pages/admin/transaction-history.vue
new file mode 100644
index 00000000..6eaa4c36
--- /dev/null
+++ b/resources/assets/js/pages/admin/transaction-history.vue
@@ -0,0 +1,32 @@
+<template>
+    <div>
+        <span align="center"><h2>Transaction History</h2></span><br>
+        <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column prop="transaction_date" label="Transaction Date" sortable></el-table-column>
+            <el-table-column prop="booking_no" label="Booking No" sortable></el-table-column>
+            <el-table-column prop="marking" label="Marking" sortable></el-table-column>
+            <el-table-column prop="debit_in" label="Debit In"></el-table-column>
+            <el-table-column prop="credit_out" label="Credit Out"></el-table-column>
+            <el-table-column prop="balance" label="Balance"></el-table-column>
+            <el-table-column prop="bank_recon" label="Bank Recon"></el-table-column>
+        </el-table><br><br>
+        <div align="right">
+            <el-button>Export to Excel</el-button><el-button>Print</el-button><br><br>
+            <el-pagination background layout="prev, pager, next" :total="30"></el-pagination>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+
+      }
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue b/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
new file mode 100644
index 00000000..7f853d77
--- /dev/null
+++ b/resources/assets/js/pages/admin/upload-supplier-bank-slip.vue
@@ -0,0 +1,61 @@
+<template>
+    <div>
+        <span align="center"><h2>Uploaded Supplier Bank Slip</h2></span><br>
+        <div align="right">
+            <el-button type="primary" icon="el-icon-plus" @click="AddNewDialogVisible = true">Add New</el-button>
+        </div><br>
+            <el-table :data="tableData" stripe style="width: 100%">
+            <el-table-column label="Order No" sortable></el-table-column>
+            <el-table-column label="Amount (RMB)" sortable></el-table-column>
+            <el-table-column label="Date" sortable></el-table-column>
+            <el-table-column label="Bank Slip File"></el-table-column>
+        </el-table><br><br>
+
+    <!-- popup add new dialog -->
+    <el-dialog align="center" :visible.sync="AddNewDialogVisible">
+        <el-form :label-position="right" label-width="150px">
+            <el-form-item label="Select bank slip : " align="left">
+                <el-upload class="upload-slip" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" list-type="picture">
+                <el-button size="small" type="primary">Click to upload</el-button></el-upload>
+            </el-form-item>
+            <el-form-item label="For Order No : "><el-input></el-input></el-form-item>
+            <el-form-item label="Amount : "><el-input></el-input></el-form-item>
+            <el-form-item label="Date : " align="left"><el-date-picker v-model="date" type="date" placeholder="Pick a date"></el-date-picker></el-form-item>
+        </el-form>
+        <div align="center">
+            <el-button type="text" @click="AddNewDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="AddNewDialogVisible = false; DoneAddNewDialogVisible = true">Submit</el-button>
+        </div>
+    </el-dialog>
+<!-- popup add new dialog end -->
+<!-- popup done upload -->
+      <el-dialog align="center" :visible.sync="DoneAddNewDialogVisible" width="30%">
+        <span>Bank Slip Successfully Updated</span><br><br>
+        <div align="center">
+            <el-button type="primary" @click="DoneAddNewDialogVisible = false">Close</el-button>
+        </div>
+      </el-dialog>
+<!-- popup done upload end -->
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+      return {
+        AddNewDialogVisible: false,
+        DoneAddNewDialogVisible: false,
+        date: ''
+      }
+    },
+    methods: {
+        handlePreview(file) {
+        console.log(file);
+      }
+    }
+}
+</script>
+
+<style>
+
+</style>
diff --git a/resources/assets/js/pages/settings/admin-credit-setting.vue b/resources/assets/js/pages/settings/admin-credit-setting.vue
index 61ce1b53..28f334a2 100644
--- a/resources/assets/js/pages/settings/admin-credit-setting.vue
+++ b/resources/assets/js/pages/settings/admin-credit-setting.vue
@@ -7,28 +7,28 @@
             <el-input size="mini" style=width:7% ></el-input>Hours
             <el-input size="mini" style=width:7% ></el-input>Minutes
             <el-input size="mini" style=width:7% ></el-input>Seconds
-            <el-button type="primary" size="mini"  @click="dialogVisible = true">Update Time Limit</el-button>
+            <el-button type="primary" size="mini"  @click="TimeLimitDialogVisible = true">Update Time Limit</el-button>
         </el-form-item>
     </el-form>
-    <el-dialog title="Time Limit" align="center" :visible.sync="dialogVisible" width="30%">
+    <el-dialog title="Time Limit" align="center" :visible.sync="TimeLimitDialogVisible" width="30%">
         <span>Time limit for customer bank slip submission is updated</span>
         <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible = false">Cancel</el-button>
-            <el-button type="primary" @click="dialogVisible = false">OK</el-button>
+            <el-button @click="TimeLimitDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="TimeLimitDialogVisible = false">OK</el-button>
         </span>
     </el-dialog>
     <el-form>
         <el-form-item align="center">
             Credit Limit for RMB : 
             <el-input placeholder="Amount" size="mini" style=width:10%></el-input>
-            <el-button type="primary" size="mini" @click="dialogVisible1 = true">Update Credit Limit</el-button>
+            <el-button type="primary" size="mini" @click="CreditLimitDialogVisible = true">Update Credit Limit</el-button>
         </el-form-item>
     </el-form>
-    <el-dialog title="Credit Limit" align="center" :visible.sync="dialogVisible1" width="30%">
+    <el-dialog title="Credit Limit" align="center" :visible.sync="CreditLimitDialogVisible" width="30%">
         <span>Credit limit for Customer Booking is updated</span>
         <span slot="footer" class="dialog-footer">
-            <el-button @click="dialogVisible1 = false">Cancel</el-button>
-            <el-button type="primary" @click="dialogVisible1 = false">OK</el-button>
+            <el-button @click="CreditLimitDialogVisible = false">Cancel</el-button>
+            <el-button type="primary" @click="CreditLimitDialogVisible = false">OK</el-button>
         </span>
     </el-dialog>
 </div>
@@ -38,8 +38,8 @@
   export default {
     data() {
       return {
-        dialogVisible: false,
-        dialogVisible1: false
+        TimeLimitDialogVisible: false,
+        CreditLimitDialogVisible: false
       };
     },
   };
diff --git a/resources/assets/js/router/routes.js b/resources/assets/js/router/routes.js
index 988d3878..ead49491 100644
--- a/resources/assets/js/router/routes.js
+++ b/resources/assets/js/router/routes.js
@@ -33,6 +33,8 @@ const UploadInvoice = () => import('~/pages/admin/booking/uploadInvoice').then(m
 // Admin pages
 const AdminHome = () => import('~/pages/admin/home').then(m => m.default || m)
 const CompleteOrder = () => import('~/pages/admin/complete-order').then(m => m.default || m)
+const TransactionHistory = () => import('~/pages/admin/transaction-history').then(m => m.default || m)
+const UploadSupplierBankSlip = () => import('~/pages/admin/upload-supplier-bank-slip').then(m => m.default || m)
 
 export default [
   { path: '/', name: 'welcome', component: Welcome },
@@ -73,5 +75,7 @@ export default [
   // Admin pages
   { path: '/admin', name: 'admin.home', component: AdminHome },
   { path: '/admin/complete-order', name: 'admin.complete-order', component: CompleteOrder },
+  { path: '/admin/transaction-history', name: 'admin.transaction-history', component: TransactionHistory },
+  { path: '/admin/upload-supplier-bank-slip', name: 'admin.upload-supplier-bank-sli', component: UploadSupplierBankSlip },
   { path: '*', name: 'notfound', component: NotFound }
 ]