diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index a294d5907a783c9e901257c229aefbf8ab62c1eb..a5b5ec0e2f6a088933b462dea049dd1ccfa76804 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -46,25 +46,7 @@ export default {
     return {
       data: [],
       currentData: null,
-      items: [],
-      detail_anggaran : {
-        title : "Pendapatan",
-        total : "50.000.000,-",
-        persen : "50%",
-        datas : [
-          {
-            judul : "Urusan XXXX",
-            persen : "20%",
-            biaya : "1.000.000,-",
-          },
-          {
-            judul : "kegiatan YYYY",
-            persen : "20%",
-            biaya : "200.000,-"
-          },
-          
-        ]
-      },
+      items: []
     }
   },
   methods: {
diff --git a/src/components/partials/DetailCard.vue b/src/components/partials/DetailCard.vue
index 7c6f6da78aa5018bf9efe11eb15a74ad0bba3e5f..5d52921133b26955a6b8a263647f299770e55c6c 100644
--- a/src/components/partials/DetailCard.vue
+++ b/src/components/partials/DetailCard.vue
@@ -8,17 +8,17 @@
       bg-variant="light"
     >
       <div slot="header" class="text-center px-2 py-1 mb-0"> 
-        <h4>{{ detailAnggaran.title }}</h4> 
+        <h4>{{ head.text }}</h4> 
         <h5><b>
-          {{ "Rp "+ detailAnggaran.total + " (" + detailAnggaran.persen + ")"}} 
+          {{ "Rp "+ head.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',00.-' }} 
         </b></h5> 
       </div>
       <b-card-text class="text-left">
-        <div v-for="data in detailAnggaran.datas" :key=data.judul>
-            {{ data.judul }}
-          <div class="text-right">
-            {{ "Rp "+ data.biaya + " ("+ data.persen +")" }}
-          </div>
+        <div v-for="data in tail" :key=data.text>
+            {{ data.text }}
+          <div class="text-right"><b>
+            {{ "Rp "+ data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',00.-' }}
+          </b></div>
         </div>
       </b-card-text>
     </b-card>
@@ -31,16 +31,22 @@ export default {
   name: 'DetailCard',
   props : ['detailAnggaran'],
   data() {
-      return {
-        total : "Rp "+this.totalAnggaran
-      }
+    return {
+      head : {
+        text: 'Memuat',
+        value: 0
+      },
+      tail : []
+    }
   },
-  methods : {
-    
-  },
-  created: function () {
-    console.log('user data from parent component:')
-    console.log(this.detailAnggaran) //prints out an empty string
+  watch: {
+    detailAnggaran(val) {
+      // Exclude top level when the top level is 'Semua Anggaran'
+      if (val[0].name = 'Semua Anggaran') val = val.slice(1, val.length)
+
+      this.head = val[0]
+      this.tail = val.slice(1, val.length)
+    }    
   }
 }
 </script>