fxi skit2

resources/js/Bajet/Homebajet.vue

@@ -0,0 +1,13 @@
+<template>
+    <router-view :kodcaw="this.$props.kodcaw"></router-view>
+</template>
+
+<script>
+export default {
+    props: {
+        kodcaw: {
+            type: String
+        }
+	}
+}
+</script>

resources/js/Bajet/KemaskiniBajet.vue

@@ -0,0 +1,162 @@
+<template>
+    <div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 xl:p-8 w-1/2  2xl:col-span-1">
+                 
+        <h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800">
+            KEMASKINI BAJET
+        </h2>
+
+        <div class="grid grid-cols-2">
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Januari
+                </label>
+                <input v-model="nilaijanuari" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Februari
+                </label>
+                <input v-model="nilaifebruari" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div> 
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Mac
+                </label>
+                <input v-model="nilaimarch" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div> 
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                April
+                </label>
+                <input v-model="nilaiapril" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Mei
+                </label>
+                <input v-model="nilaimei" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Jun
+                </label>
+                <input v-model="nilaijun" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Julai
+                </label>
+                <input v-model="nilaijulai" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Ogos
+                </label>
+                <input v-model="nilaiogos" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                September
+                </label>
+                <input v-model="nilaiseptember" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Oktober
+                </label>
+                <input v-model="nilaioktober" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                November
+                </label>
+                <input v-model="nilainovember" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+            <div class="w-full px-3 mb-4">
+                <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
+                Disember
+                </label>
+                <input v-model="nilaidisember" class="appearance-none block w-full bg-white-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
+                <div class="text-red-500 text-xs italic">Field is required</div>
+            </div>
+
+        </div>
+
+        <div class="flex justify-end">
+            <button class="bg-blue-500 text-white active:bg-lightBlue-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button">
+            Kemaskini
+            </button>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+
+    data(){
+        return{
+            nilaijanuari:0,
+            nilaifebruari:0,
+            nilaimarch:0,
+            nilaiapril:0,
+            nilaimei:0,
+            nilaijun:0,
+            nilaijulai:0,
+            nilaiogos:0,
+            nilaiseptember:0,
+            nilaioktober:0,
+            nilainovember:0,
+            nilaidisember:0
+        }
+    },
+    created(){
+        this.getData(this.$route.params.id);
+    },
+    methods: {
+        getData: function(value){
+            this.axios.get("http://localhost:8000/admin/senaraiKemaskiniBajet",
+            {
+                params:{
+                    bajetid: value
+                }
+            }).then( response => {
+                this.nilaijanuari = parseFloat(response.data[0].nilaibajet);
+                this.nilaifebruari = parseFloat(response.data[1].nilaibajet);
+                this.nilaimarch = parseFloat(response.data[2].nilaibajet);
+                this.nilaiapril = parseFloat(response.data[3].nilaibajet);
+                this.nilaimei = parseFloat(response.data[4].nilaibajet);
+                this.nilaijun = parseFloat(response.data[5].nilaibajet);
+                this.nilaijulai = parseFloat(response.data[6].nilaibajet);
+                this.nilaiogos = parseFloat(response.data[7].nilaibajet);
+                this.nilaiseptember = parseFloat(response.data[8].nilaibajet);
+                this.nilaioktober = parseFloat(response.data[9].nilaibajet);
+                this.nilainovember = parseFloat(response.data[10].nilaibajet);
+                this.nilaidisember = parseFloat(response.data[11].nilaibajet);
+
+            })
+
+        }
+    }
+}
+</script>

resources/js/Bajet/Senaraibajet.vue

@@ -1,6 +1,8 @@
 <template>
     <div class="bg-white mx-auto shadow rounded-lg p-4 sm:p-6 w-1/2 xl:p-8 w-2/3  2xl:col-span-1">
          
+         <router-view>
+         </router-view>
             
         <h2 class="text-2xl mx-auto font-semibold leading-normal mt-0 mb-2 text-blueGray-800 text-center">
             SENARAI BAJET
@@ -23,6 +25,7 @@
 
         <template v-if="pilihantahun != 'none'">
             <div v-for="(bajet,i) in arrayBajet" :key="i" class="border-4 border-gray-400 hover:border-yellow-400 rounded-lg mt-3 hover:transition-all cursor-pointer transition transform hover:-translate-x-1 ">
+            <router-link :to="{ name: 'bajetkemaskini', params: { id: bajet[Object.keys(arrayBajet[i])][0].id }}">
                 <div class="flex flex-wrap mb-3 p-4">
                     <h4 class="font-bold w-1/6 m-auto text-2xl">{{ String(Object.keys(arrayBajet[i])) }}</h4>
                     <div class="w-1/4 grid-rows-4">
@@ -35,6 +38,7 @@
                         <p class="m-1" v-for="(bajetdata,a) in bajet[Object.keys(arrayBajet[i])]" :key="a">{{ (a >= 10 && 13 >= a) ? bajetdata.bulan + ':' : '' }} <span v-if="a >= 10 && 13 >= a">RM {{ formatexchange(bajetdata.nilaibajet) }}</span></p>
                     </div>
                 </div>
+            </router-link>
             </div>
         </template>
     </div>
@@ -72,6 +76,7 @@ export default {
             }
             }).then( response => {
                 this.arrayBajet = response.data
+                console.log(this.arrayBajet)
             });
         }
 

resources/js/app.js

@@ -80,7 +80,7 @@ Vue.component('online-component', require('./Online/Online.vue').default)
 Vue.component('details-pelanggan', require('./pages/Detailspelanggan.vue').default)
 Vue.component('harian-component', require('./components/Analisa/Harian.vue').default)
 
-Vue.component('senaraibajet-component', require('./Bajet/Senaraibajet.vue').default)
+Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
 
 
 

resources/js/components/Analisa/Harian.vue

@@ -1,10 +1,14 @@
 <template>
     <div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
         <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
+            <h3 class="text-2xl font-bold text-gray-500 flex items-center mx-auto">Pembiayaan</h3>
            <div class="flex items-center">
-              <div class="flex-shrink-0">
+              <div class="grid grid-rows-3">
-                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ gadaianharian }}</span>
+                <span class="text-2xl sm:text-xl leading-none font-bold text-gray-900">BULAN : RM {{ gadaianharian }}</span>
-                 <h3 class="text-base font-normal text-gray-500">Pembiayaan Hari Ini</h3>
+                <span class="text-2xl sm:text-xl leading-none font-bold text-gray-900">HARI INI : RM {{ gadaianharian }}</span>
+                <span class="text-2xl sm:text-xl leading-none font-bold text-gray-900">BAJET : RM {{ bajetgadaian  }}</span>
+                <span class="text-2xl sm:text-xl leading-none font-bold text-gray-900">VARIANS : RM {{ bajetgadaian  }}</span>
+
               </div>
                <div v-if="percentgadaian > 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
                  {{ percentgadaian.toFixed(2) }}%
@@ -29,7 +33,7 @@
         <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
            <div class="flex items-center">
               <div class="flex-shrink-0">
-                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ penebusanharian }}</span>
+                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ penebusanharian }} / RM {{ bajetpenebusan }}</span>
                  <h3 class="text-base font-normal text-gray-500">Penebusan Hari Ini</h3>
               </div>
               <div v-if="percentpenebusan > 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
@@ -55,7 +59,7 @@
         <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
            <div class="flex items-center">
               <div class="flex-shrink-0">
-                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ keuntunganharian }}</span>
+                 <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">RM {{ keuntunganharian }} / RM {{ bajetkeuntungan }}</span>
                  <h3 class="text-base font-normal text-gray-500">Keuntungan Hari Ini</h3>
               </div>
             <div v-if="percentkeuntungan > 0" class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
@@ -94,10 +98,13 @@ export default {
 	data() {
 		return {
         keuntunganharian:0,
+        bajetkeuntungan:0,
         percentkeuntungan:0,
         penebusanharian:0,
+        bajetpenebusan:0,
         percentpenebusan:0,
         gadaianharian:0,
+        bajetgadai:0,
         percentgadaian:0
 		};
 	},
@@ -114,6 +121,7 @@ export default {
             }
             }).then(response => {
                 this.gadaianharian = formatter.format(response.data[0].gadaiToday)
+                this.bajetgadaian = formatter.format(response.data[0].bajetharian)
                 this.percentgadaian = response.data[0].percentDiff
             }).catch(error => {
                 console.log(error)
@@ -126,6 +134,7 @@ export default {
             }
             }).then(response => {
                 this.penebusanharian = formatter.format(response.data[0].tebusToday)
+                this.bajetpenebusan = formatter.format(response.data[0].bajetharian)
                 this.percentpenebusan = response.data[0].percentDiff
             }).catch(error => {
                 console.log(error)
@@ -138,6 +147,7 @@ export default {
             }
             }).then(response => {
                 this.keuntunganharian = formatter.format(response.data[0].upahToday)
+                this.bajetkeuntungan = formatter.format(response.data[0].bajetharian)
                 this.percentkeuntungan = response.data[0].percentDiff
             }).catch(error => {
                 console.log(error)

resources/js/routes.js

@@ -13,6 +13,10 @@ import Pendahuluanserahan from './Akaun/Pendahuluanserahan'
 
 import OnlineHome from './Online/SearchSAG'
 
+import SenaraiBajet from './Bajet/Senaraibajet'
+import BajetKemaskini from './Bajet/KemaskiniBajet'
+
+
 
 
 
@@ -30,7 +34,11 @@ export default new VueRouter({
         { path: '/akaunhome/ansuran', component: Ansuran },
         { path: '/akaunhome/upah', component: Upah },
         { path: '/akaunhome/Tuntutbaki', component: Tuntutbaki },
-        { path: '/akaunhome/Pendahuluanserahan', component: Pendahuluanserahan }
+        { path: '/akaunhome/Pendahuluanserahan', component: Pendahuluanserahan },
+
+        { path: '/bajet/kemaskini', component: SenaraiBajet },
+        { name: 'bajetkemaskini',path: '/bajet/kemaskini/:id', component: BajetKemaskini }
+
     ],
     mode: 'history'
 });

resources/views/bajet/home.blade.php

@@ -36,7 +36,7 @@
          
             <a href="{{ route('bajet.tambah') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 mr-3 hover:bg-yellow-300 hover:transition-all cursor-pointer transition transform hover:-translate-y-1 ">
                 <img src="{{ asset('img/budgeting.png') }}"  class="h-40 mx-auto text-center" alt="Windster Logo">
-                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Tambah</h2>
+                <h2 class="mx-auto text-center font-bold text-2xl mt-4 uppercase">Daftar</h2>
             </a>
             
             <a href="{{ route('bajet.kemaskini') }}" class="bg-white shadow  px-6 py-4 border border-solid rounded-lg w-1/6 hover:bg-yellow-300 hover:transition-all cursor-pointer  transition transform hover:-translate-y-1 ">