diff --git a/app/Http/Controllers/AkaunController.php b/app/Http/Controllers/AkaunController.php
index 0a0a1ed..3d39b9e 100644
--- a/app/Http/Controllers/AkaunController.php
+++ b/app/Http/Controllers/AkaunController.php
@@ -755,7 +755,7 @@ class AkaunController extends Controller
         $current = Carbon::now();
         $current = new Carbon();
         $tarikh_cetak = $current->toDateString();
-
+        $kodcaw = $request->kodcaw;
         $split_date = explode('-',$request->datestokauditbackdate);
         $bulan = $split_date[1];
         $tahun = $split_date[0];
@@ -788,11 +788,11 @@ class AkaunController extends Controller
 
         $tebus_date = $namabulan . ' ' . $tahun;
 
-        $cawangan=Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url').'/api/cawangan/detail/'.$auth_user['cawangan'])->json();
+        $cawangan=Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url').'/api/cawangan/detail/'.$kodcaw)->json();
         $cawangan_detail=$cawangan[0];
 
-        $stokaudit = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url'). '/api/stokaudit/backdate',['kodcaw' => $auth_user['cawangan'],'tahun'=>$tahun,'bulan'=>$bulan])->json();
-
+        $stokaudit = Http::withOptions(['verify' => config('app.api_verify')])->get(config('api.url'). '/api/stokaudit/backdate',['kodcaw' => $kodcaw,'tahun'=>$tahun,'bulan'=>$bulan])->json();
+        
         return view('akaun.laporan_stokauditbackdate', compact('stokaudit','cawangan_detail','tarikh_cetak','tebus_date','api_url'));
 
     }
diff --git a/resources/js/WTD/SenaraiBakiLelong.vue b/resources/js/WTD/SenaraiBakiLelong.vue
new file mode 100644
index 0000000..80b60c4
--- /dev/null
+++ b/resources/js/WTD/SenaraiBakiLelong.vue
@@ -0,0 +1,179 @@
+<template>
+<div v-if="arraybakilelong.length > 0" class="relative bg-white overflow-x-auto shadow-md sm:rounded-lg px-8 py-6">
+
+    <div class="flex justify-between">
+        <div class="p-4">
+            <h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-br from-gray-500 to-gray-700">JUMLAH = RM {{ this.totalbaki }}</h1>
+        </div>
+        <div class="p-4">
+            <button @click.prevent="callparentload" class="border border-yellow-600 text-white bg-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">Kembali</button>
+            <button @click.prevent="blockwtd" class="border border-yellow-600 text-white bg-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">Seterusnya</button>
+        </div>
+    </div>
+
+    <table class="w-full text-sm text-left text-gray-500 dark:text-gray-400 rounded-lg border w-full sm:h-96 p-6 overflow-x-auto overflow-y-scroll scrollbar">
+        <thead class="text-xs text-gray-700 uppercase bg-yellow-200 dark:bg-gray-700 dark:text-gray-400">
+            <tr>
+                <th scope="col" class="p-4">
+                    <div class="flex items-center">
+                        <input id="checkbox-all-search" @click="selectAll" v-model="allSelected" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                        <label for="checkbox-all-search" class="sr-only">checkbox</label>
+                    </div>
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Norujukan
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Tarikh Lelong
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Pembiayaan
+                </th>
+                <th scope="col" class="px-6 py-3">
+                    Baki
+                </th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr v-for="(bl,i) in arraybakilelong" :key="i" class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600">
+                <td class="w-4 p-4">
+                    <div class="flex items-center">
+                        <input :id="bl.norujukan" :value="bl.norujukan" type="checkbox" v-model="selectedNorujukan" @change="select($event)" class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
+                    </div>
+                </td>
+                <th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
+                    {{ bl.norujukan }}
+                </th>
+                <td class="px-6 py-4">
+                    {{ bl.t_lelong }}
+                </td>
+                <td class="px-6 py-4">
+                    {{ bl.pinjaman }}
+                </td>
+                <td class="px-6 py-4">
+                    {{ bl.baki }}
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+</template>
+
+<script>
+const formatter = new Intl.NumberFormat('en-US', {
+    minimumFractionDigits: 2
+});
+
+export default {
+    data() {
+        return {
+            mula: null,
+            hingga: null,
+            totalbaki: 0.00,
+            arraybakilelong: [],
+            selectedNorujukan: [],
+            allSelected: false,
+        }
+    },
+    props: ['bakilelong'],
+    methods: {
+        async associate() {
+            this.arraybakilelong = this.$props.bakilelong;
+        },
+        async calculate() {
+            let total = 0;
+            let ref = this;
+            await this.$props.bakilelong.map(function (valuebaki, keybaki) {
+
+                ref.selectedNorujukan.map(function (value, key) {
+
+                    if (valuebaki.norujukan == value) {
+                        total += parseFloat(valuebaki.baki);
+                    }
+                })
+            });
+            this.totalbaki = formatter.format(total);
+
+        },
+        callparentload: function () {
+            this.arraybakilelong = [];
+            this.selectedNorujukan = [];
+            this.totalbaki = 0;
+            this.allSelected = false;
+
+            this.$emit('updateLoad')
+        },
+        selectAll: function () {
+            this.selectedNorujukan = [];
+
+            if (!this.allSelected) {
+                let ref = this;
+                this.arraybakilelong.map(function (value, key) {
+                    ref.selectedNorujukan.push(value.norujukan);
+                });
+                ref.calculate();
+            } else {
+                this.calculate();
+            }
+        },
+        select: function (e) {
+            this.calculate();
+            this.allSelected = false;
+        },
+        async blockwtd() {
+            let cawangan = 'KB2';
+            let ref = this;
+            await this.$swal({
+                title: 'Block Surat Akuan Gadaian (SAG)?',
+                text: "anda tidak boleh ulang kembali setelah di block!",
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: '#3085d6',
+                cancelButtonColor: '#d33',
+                confirmButtonText: 'Yes'
+            }).then((result) => {
+                if (result.isConfirmed) {
+                    
+                    this.axios.post(ref.$hostname + '/admin/wtd/insert', {
+                        kodcaw: cawangan,
+                        norujukan: ref.selectedNorujukan
+
+                    }).then(response => {
+                        if (response.data === 'success') {
+                            Swal.fire(
+                                'Nyah Padam!',
+                                'Berjaya dipadamkan!',
+                                'success'
+                            )
+                        }
+                    });
+
+                }
+            })
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+.scrollbar::-webkit-scrollbar {
+    width: 20px;
+    height: 20px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+    border-radius: 100vh;
+    background: #f7f4ed;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+    background: #e0cbcb;
+    border-radius: 100vh;
+    border: 3px solid #f6f7ed;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+    background: #c0a0b9;
+}
+</style>
diff --git a/resources/js/WTD/index.vue b/resources/js/WTD/index.vue
new file mode 100644
index 0000000..580934b
--- /dev/null
+++ b/resources/js/WTD/index.vue
@@ -0,0 +1,10 @@
+<template>
+         <router-view>
+         </router-view>
+</template>
+
+<script>
+export default {
+    
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/WTD/wtd.vue b/resources/js/WTD/wtd.vue
new file mode 100644
index 0000000..af66348
--- /dev/null
+++ b/resources/js/WTD/wtd.vue
@@ -0,0 +1,81 @@
+<template>
+<div class="mx-auto">
+    <div v-if="loadbakilelong == 'process'" class="inset-0 z-30 h-full w-full flex mx-auto p-20 m-20" id="loading">
+        <i class="animate-spin fas fa-circle-notch fa-4x m-auto text-yellow-500"></i>
+    </div>
+    <div v-if="loadbakilelong == null" class=" w-2/5 mx-auto">
+        <form class="bg-white shadow-md rounded-lg px-8 pt-6 pb-4 mb-4" onclick="return false">
+
+        
+    
+            <div class="mb-4">
+                <label class="block text-gray-500 font-medium text-sm mb-2">Pilihan Melalui Bulan dan Tahun</label>
+                <div class="flex flex-wrap">
+                    <div class="flex flex-row">
+
+                        <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
+                        <flat-pickr v-model="mula" class="border border-2 rounded-r px-4 py-2 w-80r mr-2"></flat-pickr>
+                        <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Hingga</span>
+                        <flat-pickr v-model="hingga" class="border border-2 rounded-r px-4 py-2 w-80r mr-2"></flat-pickr>
+
+                    </div>
+                </div>
+                <div class="flex justify-center mt-10">
+                    <button @click.prevent="generatebakilelong" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-8 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300">Cari</button>
+                </div>
+            </div>
+        </form>
+    </div>
+
+
+
+    <senarai-baki :bakilelong="bakilelong" ref="senaraibaki" @updateLoad="updateLoad"></senarai-baki>
+</div>
+</template>
+
+<script>
+import SenaraiBaki from './SenaraiBakiLelong.vue'
+export default {
+    data() {
+        return {
+            mula: null,
+            hingga: null,
+            loadbakilelong: null,
+            bakilelong:[]
+        }
+    },
+    methods: {
+        async generatebakilelong () {
+            let cawangan = 'KB2';
+
+            this.loadbakilelong = 'process';
+
+            if (this.mula == null && this.mula == null) {
+                console.log('xleh');
+            } else {
+                await this.axios.get(this.$hostname + '/admin/rangebakilelong/' + cawangan, {
+                    params: {
+                        mula: this.mula,
+                        hingga: this.hingga
+                    }
+                }).then(response => {
+                    this.bakilelong = response.data;
+                    this.loadbakilelong = 'success';
+                });
+
+                await this.$refs.senaraibaki.associate();
+            }
+
+        },
+        updateLoad: function(){
+            this.loadbakilelong = null;
+            this.bakilelong = null;
+            this.mula = null;
+            this.hingga = null;
+        }
+    },
+    components: {
+        SenaraiBaki,
+    }
+}
+</script>
diff --git a/resources/js/app.js b/resources/js/app.js
index e9516db..f8e237a 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -26,6 +26,8 @@ import 'sweetalert2/dist/sweetalert2.min.css';
 
 import VueHtml5Editor from 'vue-html5-editor'
 
+import VueFlatPickr from 'vue-flatpickr-component';
+import 'flatpickr/dist/flatpickr.css';
 let ops = {
     // global component name
     name: "vue-html5-editor",
@@ -106,6 +108,7 @@ Vue.use(datetime)
 Vue.use(VueContentPlaceholders)
 Vue.use(VueSweetalert2);
 Vue.use(VueFriendlyIframe)
+Vue.use(VueFlatPickr)
 
 Vue.use(require('vue-moment'));
 
@@ -202,7 +205,7 @@ Vue.component('tahunan-component', require('./components/Analisa/Tahunan.vue').d
 Vue.component('aging-component', require('./components/Analisa/Aging.vue').default)
 
 
-
+//Component Berkaitan
 Vue.component('square-component', require('./components/util/Clock.vue').default)
 Vue.component('bilangan-component', require('./components/Chart/BilanganChart.vue').default)
 
@@ -211,14 +214,22 @@ Vue.component('getkodcaw-component', require('./Bajet/GetKodcaw.vue').default)
 Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
 Vue.component('clock-component', require('./components/util/Clock.vue').default)
 
+//Logout
 Vue.component('logout-component', require('./Logout.vue').default)
+
+//Notify
 Vue.component('notify-component', require('./components/util/Notify.vue').default)
 
-
+//Permohonan
 Vue.component('permohonanindex-component', require('./Permohonan/index.vue').default)
-
 Vue.component('permohonan-component', require('./Permohonan/SenaraiMohon.vue').default)
 
+//WTD
+Vue.component('wtdindex-component', require('./WTD/index.vue').default)
+
+
+
+
 Vue.component('apexchart', VueApexCharts)
 
 
diff --git a/resources/js/routes.js b/resources/js/routes.js
index c6be183..3277cb8 100644
--- a/resources/js/routes.js
+++ b/resources/js/routes.js
@@ -30,6 +30,9 @@ import StatusMohon from './Permohonan/StatusMohon'
 import RekodMohon from './Permohonan/RekodMohon'
 
 
+import WtdPage from './WTD/wtd'
+
+
 
 
 
@@ -64,6 +67,8 @@ export default new VueRouter({
         { name: 'permohonanstatus',path: '/permohonan/status/:mohonid', component: StatusMohon },
         { path: '/permohonan/rekod', component: RekodMohon },
 
+        { path: '/wtd', component: WtdPage },
+
     ],
     mode: 'history'
 });
\ No newline at end of file
diff --git a/resources/views/wtd/index.blade.php b/resources/views/wtd/index.blade.php
index 5ecbadc..7530aac 100644
--- a/resources/views/wtd/index.blade.php
+++ b/resources/views/wtd/index.blade.php
@@ -7,6 +7,8 @@
 
       <div class="pt-6 px-4">
       <breadcrumb :items="[{ 'title' : 'Wang Tak Dituntut', 'icon' : 'fas fa-gavel' }]"></breadcrumb>
+
+      <wtdindex-component></wtd-component>
         
       </div>
    </main>