diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index 4c26a63a861f740189030b68fa71e6edc8f8d608..a3ae8f5f50c1aca6b71bd0372b13922334992e5a 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -17,6 +17,7 @@
       </b-col>
       <b-col id="anggaran-detail-card" cols="12" lg="6">
         <simple-card-container-scroll
+          @click-handler="visualizationHandler"
           :dataBubble='data'
         />
       </b-col>
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index 0b2f9c677908fdc69d4f4487ba4d23cf1a5e6f29..6972741674a16162d4ad0bb4f9f71b20b864b316 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -4,7 +4,7 @@
       {{"Detail (" + rows + ")" }}
     </h4>
     <b-row id="content-detail">
-        <simple-card v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
+        <simple-card class="simple-card" @click.native="passData(data)" v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
               ',00.-'"" />
     </b-row>
   </div>
@@ -29,6 +29,12 @@ export default {
     'simple-card':SimpleCard,
   },
   methods : {
+    passData(obj) {
+      if (obj.subdata.length != 0) {
+        window.scrollTo(0, 0);
+        this.$emit('click-handler', obj._id)
+      }
+    }
   },
 }
 </script>
@@ -60,6 +66,10 @@ b-col {
     overflow-y: auto;
     -webkit-overflow-scrolling: touch;
   }
+
+  .simple-card {
+    cursor: pointer;
+  }
 }