diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index 7fc637c..8b66c4a 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -62,12 +62,12 @@ class LoginController extends Controller
             $auth_user = Auth::guard('web')->user();
             $api_url = config('api.url');
 
-            
-            if($auth_user['roles'] == 'admin' && $auth_user['operasi'] == 'operasi'){
+            if($auth_user['roles'] == 'admin' || $auth_user['roles'] == 'operasi'){
                 $user = User::find($auth_user['id']);
                 $user->cawangan = $request->cawangan;
                 $user->save();
 
+
                 return redirect()->route('home');
             }elseif($auth_user['roles'] == 'akaun'){
                 $user = User::find($auth_user['id']);
@@ -76,6 +76,7 @@ class LoginController extends Controller
 
                 return redirect()->route('akaun.home');
             }else{
+               
                 return redirect('login')->with('error', 'Oppes! You have entered invalid credentials');
             }
             // if($auth_user['roles'] == 'teller'){
diff --git a/app/Http/Kernel.php b/app/Http/Kernel.php
index 39910d7..f5dddd6 100644
--- a/app/Http/Kernel.php
+++ b/app/Http/Kernel.php
@@ -63,5 +63,6 @@ class Kernel extends HttpKernel
         'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
         'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
         'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
+        'roleChecker' => \App\Http\Middleware\RoleChecker::class,
     ];
 }
diff --git a/app/Http/Middleware/RoleChecker.php b/app/Http/Middleware/RoleChecker.php
new file mode 100644
index 0000000..44eab13
--- /dev/null
+++ b/app/Http/Middleware/RoleChecker.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace App\Http\Middleware;
+
+use Closure;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+use Redirect;
+
+class RoleChecker
+{
+    /**
+     * Handle an incoming request.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @param  \Closure  $next
+     * @return mixed
+     */
+    public function handle(Request $request, Closure $next, $admin, $akaun, $operasi)
+    {
+        // $roles = Auth::check() ? Auth::user()->role->pluck('name')->toArray() : [];
+        $roles = Auth::check() ? Auth::user()->roles : null;
+
+        if ($admin == $roles)
+        {
+            return $next($request);
+
+        } else if ($akaun == $roles) 
+        {
+            return $next($request);
+
+        } else if ($operasi == $roles)
+        {
+            return $next($request);
+        }
+
+        return Redirect::route('home');
+    }
+}
diff --git a/public/img/background.jpg b/public/img/background.jpg
new file mode 100644
index 0000000..ba945d6
Binary files /dev/null and b/public/img/background.jpg differ
diff --git a/public/js/app.js b/public/js/app.js
index 231964d..7da0db9 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -16713,6 +16713,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 //
 //
 //
+//
 /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ({
   data: function data() {
     return {
@@ -18726,17 +18727,39 @@ __webpack_require__.r(__webpack_exports__);
         },
         dataLabels: {
           enabled: true,
+          distributed: true,
           style: {
-            colors: ['#333']
+            colors: ['#333'],
+            fontSize: '12px',
+            fontWeight: 'bold'
+          },
+          dropShadow: {
+            enabled: true,
+            left: 2,
+            top: 2,
+            opacity: 0.5
           },
           offsetY: -30,
+          background: {
+            enabled: true,
+            foreColor: '#fff',
+            borderRadius: 2,
+            padding: 4,
+            opacity: 0.9,
+            borderWidth: 1,
+            borderColor: '#fff'
+          },
           formatter: function formatter(val, opt) {
             var total = (val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value'] * 100;
 
             if (isNaN(total)) {
               return 0.00;
             } else {
-              return total.toFixed(2);
+              if (isFinite(total)) {
+                return total.toFixed(2);
+              } else {
+                return 0.00;
+              }
             }
           }
         },
@@ -18750,7 +18773,7 @@ __webpack_require__.r(__webpack_exports__);
           showForSingleSeries: true,
           customLegendItems: ['Gadai', 'Tebus', 'Expected'],
           markers: {
-            fillColors: ['#3498db', '#e74c3c', '#775DD0']
+            fillColors: ['#70a1ff', '#7bed9f', '#e74c3c']
           }
         },
         yaxis: {
@@ -18759,7 +18782,8 @@ __webpack_require__.r(__webpack_exports__);
           }
         },
         fill: {
-          opacity: 1
+          opacity: 1,
+          colors: ['#70a1ff', '#7bed9f']
         },
         tooltip: {
           y: {
@@ -18888,7 +18912,11 @@ var self = undefined;
             if (isNaN(total)) {
               return 0.00;
             } else {
-              return total.toFixed(2);
+              if (isFinite(total)) {
+                return total.toFixed(2);
+              } else {
+                return 0.00;
+              }
             }
           }
         },
@@ -19018,7 +19046,11 @@ var _formatter = new Intl.NumberFormat('en-US', {
             if (isNaN(total)) {
               return 0.00;
             } else {
-              return total.toFixed(2);
+              if (isFinite(total)) {
+                return total.toFixed(2);
+              } else {
+                return 0.00;
+              }
             }
           }
         },
@@ -19142,7 +19174,11 @@ var _formatter = new Intl.NumberFormat('en-US', {
             if (isNaN(total)) {
               return 0.00;
             } else {
-              return total.toFixed(2);
+              if (isFinite(total)) {
+                return total.toFixed(2);
+              } else {
+                return 0.00;
+              }
             }
           }
         },
@@ -19365,6 +19401,9 @@ var formatter = new Intl.NumberFormat('en-US', {
   props: {
     petibesi: {
       type: Array
+    },
+    kodcaw: {
+      type: String
     }
   },
   data: function data() {
@@ -19377,7 +19416,7 @@ var formatter = new Intl.NumberFormat('en-US', {
       totalPage: 0,
       currentPage: 1,
       lastPage: 5,
-      kodcaw: 'KB2',
+      kodcaw: '',
       showpetibesi: [],
       paginate: {},
       activePage: 1
@@ -19412,7 +19451,7 @@ var formatter = new Intl.NumberFormat('en-US', {
     getPetibesi: function getPetibesi(pageNumber) {
       var _this = this;
 
-      this.axios.get('http://localhost:8000/admin/getPetiBesiPaginate/' + this.kodcaw, {
+      this.axios.get('http://localhost:8000/admin/getPetiBesiPaginate/' + this.$props.kodcaw, {
         params: {
           page: pageNumber
         }
@@ -19967,6 +20006,9 @@ var formatter = new Intl.NumberFormat('en-US', {
     },
     arraytunai: {
       type: Array
+    },
+    kodcaw: {
+      type: String
     }
   },
   data: function data() {
@@ -19981,7 +20023,7 @@ var formatter = new Intl.NumberFormat('en-US', {
       currentPage: 1,
       lastPage: 5,
       activePage: 1,
-      kodcaw: 'KB2',
+      kodcaw: '',
       kodlaluan: ''
     };
   },
@@ -20034,7 +20076,7 @@ var formatter = new Intl.NumberFormat('en-US', {
     getTunai: function getTunai(pageNumber) {
       var _this2 = this;
 
-      this.axios.get('http://localhost:8000/admin/getTunaiPaginate/' + this.kodcaw, {
+      this.axios.get('http://localhost:8000/admin/getTunaiPaginate/' + this.$props.kodcaw, {
         params: {
           page: pageNumber,
           kodlaluan: this.kodlaluan
@@ -72634,8 +72676,8 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
-      _c("div", { staticClass: "w-1/3 p-8 mx-auto" }, [
+    _c("div", { staticClass: "flex w-full" }, [
+      _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
           {
@@ -72772,8 +72814,8 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
-      _c("div", { staticClass: "w-1/3 p-8 mx-auto" }, [
+    _c("div", { staticClass: "flex w-full" }, [
+      _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
           {
@@ -73132,8 +73174,8 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
-      _c("div", { staticClass: "w-1/3 p-8 mx-auto" }, [
+    _c("div", { staticClass: "flex w-full" }, [
+      _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
           {
@@ -73294,7 +73336,7 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
+    _c("div", { staticClass: "flex w-full" }, [
       _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
@@ -73441,7 +73483,7 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
+    _c("div", { staticClass: "flex w-full" }, [
       _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
@@ -73695,8 +73737,8 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
-      _c("div", { staticClass: "w-1/3 p-8 mx-auto" }, [
+    _c("div", { staticClass: "flex w-full" }, [
+      _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
           {
@@ -73833,8 +73875,8 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
-      _c("div", { staticClass: "w-1/3 p-8 mx-auto" }, [
+    _c("div", { staticClass: "flex w-full" }, [
+      _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
           {
@@ -73971,7 +74013,7 @@ var render = function () {
   var _h = _vm.$createElement
   var _c = _vm._self._c || _h
   return _c("div", { staticClass: "container" }, [
-    _c("div", { staticClass: "flex w-screen" }, [
+    _c("div", { staticClass: "flex w-full" }, [
       _c("div", { staticClass: "w-1/2 p-8 mx-auto" }, [
         _c(
           "div",
@@ -103291,7 +103333,7 @@ if (typeof window !== 'undefined' && window.Vue) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"_args":[["axios@0.21.4","C:\\\\laragon\\\\www\\\\adminpkb"]],"_development":true,"_from":"axios@0.21.4","_id":"axios@0.21.4","_inBundle":false,"_integrity":"sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==","_location":"/axios","_phantomChildren":{},"_requested":{"type":"version","registry":true,"raw":"axios@0.21.4","name":"axios","escapedName":"axios","rawSpec":"0.21.4","saveSpec":null,"fetchSpec":"0.21.4"},"_requiredBy":["#DEV:/"],"_resolved":"https://registry.npmjs.org/axios/-/axios-0.21.4.tgz","_spec":"0.21.4","_where":"C:\\\\laragon\\\\www\\\\adminpkb","author":{"name":"Matt Zabriskie"},"browser":{"./lib/adapters/http.js":"./lib/adapters/xhr.js"},"bugs":{"url":"https://github.com/axios/axios/issues"},"bundlesize":[{"path":"./dist/axios.min.js","threshold":"5kB"}],"dependencies":{"follow-redirects":"^1.14.0"},"description":"Promise based HTTP client for the browser and node.js","devDependencies":{"coveralls":"^3.0.0","es6-promise":"^4.2.4","grunt":"^1.3.0","grunt-banner":"^0.6.0","grunt-cli":"^1.2.0","grunt-contrib-clean":"^1.1.0","grunt-contrib-watch":"^1.0.0","grunt-eslint":"^23.0.0","grunt-karma":"^4.0.0","grunt-mocha-test":"^0.13.3","grunt-ts":"^6.0.0-beta.19","grunt-webpack":"^4.0.2","istanbul-instrumenter-loader":"^1.0.0","jasmine-core":"^2.4.1","karma":"^6.3.2","karma-chrome-launcher":"^3.1.0","karma-firefox-launcher":"^2.1.0","karma-jasmine":"^1.1.1","karma-jasmine-ajax":"^0.1.13","karma-safari-launcher":"^1.0.0","karma-sauce-launcher":"^4.3.6","karma-sinon":"^1.0.5","karma-sourcemap-loader":"^0.3.8","karma-webpack":"^4.0.2","load-grunt-tasks":"^3.5.2","minimist":"^1.2.0","mocha":"^8.2.1","sinon":"^4.5.0","terser-webpack-plugin":"^4.2.3","typescript":"^4.0.5","url-search-params":"^0.10.0","webpack":"^4.44.2","webpack-dev-server":"^3.11.0"},"homepage":"https://axios-http.com","jsdelivr":"dist/axios.min.js","keywords":["xhr","http","ajax","promise","node"],"license":"MIT","main":"index.js","name":"axios","repository":{"type":"git","url":"git+https://github.com/axios/axios.git"},"scripts":{"build":"NODE_ENV=production grunt build","coveralls":"cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","examples":"node ./examples/server.js","fix":"eslint --fix lib/**/*.js","postversion":"git push && git push --tags","preversion":"npm test","start":"node ./sandbox/server.js","test":"grunt test","version":"npm run build && grunt version && git add -A dist && git add CHANGELOG.md bower.json package.json"},"typings":"./index.d.ts","unpkg":"dist/axios.min.js","version":"0.21.4"}');
+module.exports = JSON.parse('{"_from":"axios@^0.21","_id":"axios@0.21.4","_inBundle":false,"_integrity":"sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==","_location":"/axios","_phantomChildren":{},"_requested":{"type":"range","registry":true,"raw":"axios@^0.21","name":"axios","escapedName":"axios","rawSpec":"^0.21","saveSpec":null,"fetchSpec":"^0.21"},"_requiredBy":["#DEV:/","#USER"],"_resolved":"https://registry.npmjs.org/axios/-/axios-0.21.4.tgz","_shasum":"c67b90dc0568e5c1cf2b0b858c43ba28e2eda575","_spec":"axios@^0.21","_where":"C:\\\\laragon\\\\www\\\\adminpkb","author":{"name":"Matt Zabriskie"},"browser":{"./lib/adapters/http.js":"./lib/adapters/xhr.js"},"bugs":{"url":"https://github.com/axios/axios/issues"},"bundleDependencies":false,"bundlesize":[{"path":"./dist/axios.min.js","threshold":"5kB"}],"dependencies":{"follow-redirects":"^1.14.0"},"deprecated":false,"description":"Promise based HTTP client for the browser and node.js","devDependencies":{"coveralls":"^3.0.0","es6-promise":"^4.2.4","grunt":"^1.3.0","grunt-banner":"^0.6.0","grunt-cli":"^1.2.0","grunt-contrib-clean":"^1.1.0","grunt-contrib-watch":"^1.0.0","grunt-eslint":"^23.0.0","grunt-karma":"^4.0.0","grunt-mocha-test":"^0.13.3","grunt-ts":"^6.0.0-beta.19","grunt-webpack":"^4.0.2","istanbul-instrumenter-loader":"^1.0.0","jasmine-core":"^2.4.1","karma":"^6.3.2","karma-chrome-launcher":"^3.1.0","karma-firefox-launcher":"^2.1.0","karma-jasmine":"^1.1.1","karma-jasmine-ajax":"^0.1.13","karma-safari-launcher":"^1.0.0","karma-sauce-launcher":"^4.3.6","karma-sinon":"^1.0.5","karma-sourcemap-loader":"^0.3.8","karma-webpack":"^4.0.2","load-grunt-tasks":"^3.5.2","minimist":"^1.2.0","mocha":"^8.2.1","sinon":"^4.5.0","terser-webpack-plugin":"^4.2.3","typescript":"^4.0.5","url-search-params":"^0.10.0","webpack":"^4.44.2","webpack-dev-server":"^3.11.0"},"homepage":"https://axios-http.com","jsdelivr":"dist/axios.min.js","keywords":["xhr","http","ajax","promise","node"],"license":"MIT","main":"index.js","name":"axios","repository":{"type":"git","url":"git+https://github.com/axios/axios.git"},"scripts":{"build":"NODE_ENV=production grunt build","coveralls":"cat coverage/lcov.info | ./node_modules/coveralls/bin/coveralls.js","examples":"node ./examples/server.js","fix":"eslint --fix lib/**/*.js","postversion":"git push && git push --tags","preversion":"npm test","start":"node ./sandbox/server.js","test":"grunt test","version":"npm run build && grunt version && git add -A dist && git add CHANGELOG.md bower.json package.json"},"typings":"./index.d.ts","unpkg":"dist/axios.min.js","version":"0.21.4"}');
 
 /***/ })
 
diff --git a/resources/js/Akaun/Ansuran.vue b/resources/js/Akaun/Ansuran.vue
index 1eee06b..996c45c 100644
--- a/resources/js/Akaun/Ansuran.vue
+++ b/resources/js/Akaun/Ansuran.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
-                <div class="w-1/3 p-8 mx-auto">
+            <div class="flex w-full">
+                <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
diff --git a/resources/js/Akaun/Gadaian.vue b/resources/js/Akaun/Gadaian.vue
index 99a2ca3..dbbc522 100644
--- a/resources/js/Akaun/Gadaian.vue
+++ b/resources/js/Akaun/Gadaian.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
-                <div class="w-1/3 p-8 mx-auto">
+            <div class="flex w-full">
+                <div class="w-1/2 p-8 mx-auto">
                 <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
@@ -17,6 +17,7 @@
                                 <input :value="jenisgenerate" type="hidden" name="jenis" />
                                 <span style="background-color: #F9FAFB" class="text-gray-600 border border-2 rounded-l px-4 py-2 whitespace-no-wrap">Mula</span>
                                 <input id="tarikhmula" name="datetarikh" class="border border-2 border-l-0 rounded-r px-4 py-2 w-80r mr-2" type="date" />
+
                                 <button @click.prevent="generatepdf" class=" mr-2 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"><i class="fas fa-file-pdf mr-2"></i>PDF</button>
                                 <button @click.prevent="generateview" 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"><i class="fas fa-eye mr-2"></i>View</button>
                             </div>
diff --git a/resources/js/Akaun/Imbangduga.vue b/resources/js/Akaun/Imbangduga.vue
index 7968653..6a71017 100644
--- a/resources/js/Akaun/Imbangduga.vue
+++ b/resources/js/Akaun/Imbangduga.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
-                <div class="w-1/3 p-8 mx-auto">
+            <div class="flex w-full">
+                <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
diff --git a/resources/js/Akaun/Lejeram.vue b/resources/js/Akaun/Lejeram.vue
index a5f6b75..df234c0 100644
--- a/resources/js/Akaun/Lejeram.vue
+++ b/resources/js/Akaun/Lejeram.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="container">
 
-            <div class="flex w-screen">
+            <div class="flex w-full">
                 <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                     <router-link to="/akaunhome">
diff --git a/resources/js/Akaun/Pendahuluanserahan.vue b/resources/js/Akaun/Pendahuluanserahan.vue
index b50d51b..3156371 100644
--- a/resources/js/Akaun/Pendahuluanserahan.vue
+++ b/resources/js/Akaun/Pendahuluanserahan.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
+            <div class="flex w-full">
                 <div class="w-1/2 p-8 mx-auto">
                 <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
diff --git a/resources/js/Akaun/Penebusan.vue b/resources/js/Akaun/Penebusan.vue
index a453f09..84510d7 100644
--- a/resources/js/Akaun/Penebusan.vue
+++ b/resources/js/Akaun/Penebusan.vue
@@ -2,8 +2,8 @@
    <div class="container">
 
  
-            <div class="flex w-screen">
-                <div class="w-1/3 p-8 mx-auto">
+            <div class="flex w-full">
+                <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
diff --git a/resources/js/Akaun/Tuntutbaki.vue b/resources/js/Akaun/Tuntutbaki.vue
index 2ef1bd3..1ed8aff 100644
--- a/resources/js/Akaun/Tuntutbaki.vue
+++ b/resources/js/Akaun/Tuntutbaki.vue
@@ -1,8 +1,8 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
-                <div class="w-1/3 p-8 mx-auto">
+            <div class="flex w-full">
+                <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                    <router-link to="/akaunhome">
                         <i class="fas fa-backspace text-white"></i>
diff --git a/resources/js/Akaun/Upah.vue b/resources/js/Akaun/Upah.vue
index 8eb1ce3..c13a6fa 100644
--- a/resources/js/Akaun/Upah.vue
+++ b/resources/js/Akaun/Upah.vue
@@ -1,7 +1,7 @@
 <template>
    <div class="container">
 
-            <div class="flex w-screen">
+            <div class="flex w-full">
                 <div class="w-1/2 p-8 mx-auto">
                     <div class="bg-yellow-600 text-gray-200 text-lg px-6 py-4 rounded-t-lg">       
                     <router-link to="/akaunhome">
diff --git a/resources/js/components/Chart/BilanganChart.vue b/resources/js/components/Chart/BilanganChart.vue
index c201e4f..4f944ad 100644
--- a/resources/js/components/Chart/BilanganChart.vue
+++ b/resources/js/components/Chart/BilanganChart.vue
@@ -47,10 +47,28 @@ export default {
             },
             dataLabels: {
               enabled: true,
+              distributed: true,
                 style: {
-                    colors: ['#333']
+                  colors: ['#333'],
+                  fontSize: '12px',
+                  fontWeight: 'bold'
+                },
+                dropShadow: {
+                  enabled: true,
+                  left: 2,
+                  top: 2,
+                  opacity: 0.5
                 },
                 offsetY: -30,
+                background: {
+                  enabled: true,
+                  foreColor: '#fff',
+                  borderRadius: 2,
+                  padding: 4,
+                  opacity: 0.9,
+                  borderWidth: 1,
+                  borderColor: '#fff'
+                },
                formatter: function (val, opt) {
                 let total = ((val - opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) / opt.w.globals.seriesGoals[0][opt.dataPointIndex][0]['value']) * 100
 
@@ -58,7 +76,12 @@ export default {
                 {
                     return 0.00
                 }else{
-                    return total.toFixed(2)
+                    if(isFinite(total))
+                    {
+                      return total.toFixed(2)
+                    }else{
+                      return 0.00
+                    }
                 }
               },
             },
@@ -72,7 +95,7 @@ export default {
               showForSingleSeries: true,
               customLegendItems: ['Gadai', 'Tebus','Expected'],
               markers: {
-                fillColors: ['#3498db', '#e74c3c','#775DD0']
+                fillColors: ['#70a1ff', '#7bed9f','#e74c3c']
               }
             },
             yaxis: {
@@ -81,7 +104,8 @@ export default {
               }
             },
             fill: {
-              opacity: 1
+              opacity: 1,
+              colors: ['#70a1ff', '#7bed9f']
             },
             tooltip: {
               y: {
diff --git a/resources/js/components/Chart/KeuntunganChart.vue b/resources/js/components/Chart/KeuntunganChart.vue
index 487fab0..714c427 100644
--- a/resources/js/components/Chart/KeuntunganChart.vue
+++ b/resources/js/components/Chart/KeuntunganChart.vue
@@ -64,7 +64,12 @@ export default {
             {
               return 0.00
             }else{
-              return total.toFixed(2)
+              if(isFinite(total))
+              {
+                return total.toFixed(2)
+              }else{
+                return 0.00
+              }
             }
               },
             },
diff --git a/resources/js/components/Chart/PembiayaanChart.vue b/resources/js/components/Chart/PembiayaanChart.vue
index 1b51410..f6a263d 100644
--- a/resources/js/components/Chart/PembiayaanChart.vue
+++ b/resources/js/components/Chart/PembiayaanChart.vue
@@ -65,7 +65,12 @@ export default {
             {
               return 0.00
             }else{
-              return total.toFixed(2)
+              if(isFinite(total))
+              {
+                return total.toFixed(2)
+              }else{
+                return 0.00
+              }
             }
           },
         },
diff --git a/resources/js/components/Chart/PenyelesaianChart.vue b/resources/js/components/Chart/PenyelesaianChart.vue
index 6598832..a042a2d 100644
--- a/resources/js/components/Chart/PenyelesaianChart.vue
+++ b/resources/js/components/Chart/PenyelesaianChart.vue
@@ -64,7 +64,12 @@ export default {
             {
               return 0.00
             }else{
-              return total.toFixed(2)
+              if(isFinite(total))
+              {
+                return total.toFixed(2)
+              }else{
+                return 0.00
+              }
             }
           },
         },
diff --git a/resources/js/components/Petibesi.vue b/resources/js/components/Petibesi.vue
index 734d858..94ef0a2 100644
--- a/resources/js/components/Petibesi.vue
+++ b/resources/js/components/Petibesi.vue
@@ -160,7 +160,10 @@ export default {
 	props: {
 			petibesi: {
 			type: Array
-		}
+		},
+    kodcaw:{
+      type:String
+    }
 	},
 
 	data() {
@@ -173,7 +176,7 @@ export default {
       totalPage: 0,
       currentPage: 1,
       lastPage: 5,
-      kodcaw:'KB2',
+      kodcaw:'',
       showpetibesi:[],
       paginate:{},
       activePage: 1
@@ -209,7 +212,7 @@ export default {
 		// },
 
     getPetibesi(pageNumber){
-      this.axios.get('http://localhost:8000/admin/getPetiBesiPaginate/' + this.kodcaw,{
+      this.axios.get('http://localhost:8000/admin/getPetiBesiPaginate/' + this.$props.kodcaw,{
         params: {
         page: pageNumber
       }
diff --git a/resources/js/components/Tunai.vue b/resources/js/components/Tunai.vue
index 364dbdc..5c26157 100644
--- a/resources/js/components/Tunai.vue
+++ b/resources/js/components/Tunai.vue
@@ -193,7 +193,10 @@ export default {
 		},
     arraytunai: {
 			type: Array
-		}
+		},
+    kodcaw:{
+      type:String
+    }
 	},
 
 	data() {
@@ -208,7 +211,7 @@ export default {
       currentPage: 1,
       lastPage: 5,
       activePage: 1,
-      kodcaw:'KB2',
+      kodcaw:'',
       kodlaluan:''
 		};
 	},
@@ -267,7 +270,7 @@ export default {
       },
 
       getTunai(pageNumber){
-        this.axios.get('http://localhost:8000/admin/getTunaiPaginate/' + this.kodcaw,{
+        this.axios.get('http://localhost:8000/admin/getTunaiPaginate/' + this.$props.kodcaw,{
           params: {
           page: pageNumber,
           kodlaluan: this.kodlaluan
diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 2a47fb7..1d3e4cd 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -1,7 +1,7 @@
 @extends('layouts.app')
 
 @section('content')
-<div class="bg-gray-200">
+<div>
     
     <div class="p-20 items-center justify-center">
       
@@ -48,8 +48,8 @@
             </div>
             <label class="block text-gray-700 text-sm font-bold mb-2">Cawangan</label>
             <div class="mb-4">
-                <select class="rounded-md block mt-1  py-3 px-4 border border-gray-400 focus:outline-none rounded-md focus:ring-1 w-full ring-cyan-500" name="cawangan" id="cawangan" required>
-                    <option value="das">Sila Pilih Cawangan</option>
+                <select required class="rounded-md block mt-1  py-3 px-4 border border-gray-400 focus:outline-none rounded-md focus:ring-1 w-full ring-cyan-500" name="cawangan" id="cawangan" required>
+                    {{-- <option value="none" disabled selected>Sila Pilih Cawangan</option> --}}
                     @foreach($cawangans as $index=>$cawangan)
                         <option value="{{ $cawangan['kodcaw'] }}">{{ $cawangan['details_caw'] }}</option>
                     @endforeach
diff --git a/resources/views/cashflow/tunai.blade.php b/resources/views/cashflow/tunai.blade.php
index a377893..ef83eb2 100644
--- a/resources/views/cashflow/tunai.blade.php
+++ b/resources/views/cashflow/tunai.blade.php
@@ -10,7 +10,7 @@
 
         <div class="pt-6 px-4">
         <breadcrumb :items="[{ 'title' : 'Tunai', 'icon' : 'fas fa-money-bill-wave' }]"></breadcrumb>
-        <tunai-component :items="{{ json_encode($teller) }}" :arraytunai="{{ json_encode($arraytunai) }}"></tunai-component>
+        <tunai-component kodcaw="{{ Auth::user()->cawangan }}" :items="{{ json_encode($teller) }}" :arraytunai="{{ json_encode($arraytunai) }}"></tunai-component>
 
        
         </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 46c6143..314fc2d 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -94,7 +94,10 @@
         }
         </script>
 
-    <div id="app">
+    <div id="app" @guest style="background: url(/img/background.jpg) no-repeat center center fixed;
+                                -webkit-background-size: cover;
+                                -moz-background-size: cover;
+                                -o-background-size: cover;background-size: cover;"@endguest>
   
 
         @auth
diff --git a/resources/views/petibesi/petibesi.blade.php b/resources/views/petibesi/petibesi.blade.php
index 3b753af..28854ea 100644
--- a/resources/views/petibesi/petibesi.blade.php
+++ b/resources/views/petibesi/petibesi.blade.php
@@ -6,7 +6,7 @@
 
         <div class="pt-6 px-4">
         <breadcrumb :items="[{ 'title' : 'Peti Besi', 'icon' : 'fas fa-toolbox' }]"></breadcrumb>
-        <petibesi-component :petibesi="{{ json_encode($petibesi) }}"></petibesi-component>
+        <petibesi-component kodcaw="{{ Auth::user()->cawangan }}" :petibesi="{{ json_encode($petibesi) }}"></petibesi-component>
         </div>
     </main>
     @include('layouts.footer')
diff --git a/routes/web.php b/routes/web.php
index 749e923..4dd5655 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -27,45 +27,45 @@ Route::post('logout', ['as' => 'logout', 'uses' => 'App\Http\Controllers\Auth\Lo
 Route::get('login', 'App\Http\Controllers\Auth\LoginController@login')->name('login');
 Route::post('login', 'App\Http\Controllers\Auth\LoginController@authenticate');
 
-Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');
-Route::get('/akaunhome', [App\Http\Controllers\HomeController::class, 'indexakaun'])->name('akaun.home');
+Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home')->middleware(['roleChecker:admin,null,operasi']);
+Route::get('/akaunhome', [App\Http\Controllers\HomeController::class, 'indexakaun'])->name('akaun.home')->middleware(['roleChecker:null,akaun,null']);
 
 //Tunai
-Route::get('alirantunai',['as'=>'alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@AdminAliranTunai'])->middleware('auth');
+Route::get('alirantunai',['as'=>'alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@AdminAliranTunai'])->middleware(['roleChecker:admin,null,null']);
 
 //Peti Besi
-Route::get('petibesi',['as'=>'petibesi','uses'=>'App\Http\Controllers\PetiBesiController@AdminPetiBesi'])->middleware('auth');
+Route::get('petibesi',['as'=>'petibesi','uses'=>'App\Http\Controllers\PetiBesiController@AdminPetiBesi'])->middleware(['roleChecker:admin,null,null']);
 
 //Pelanggan
-Route::get('pelanggan',['as'=>'pelanggan','uses'=>'App\Http\Controllers\PelangganController@AdminPelanggan'])->middleware('auth');
-Route::get('/pelanggan/{id}',['as'=>'pelanggan.detailspelanggan','uses'=>'App\Http\Controllers\PelangganController@DetailsPelanggan'])->middleware('auth');
-Route::get('/blacklist',['as'=>'blacklist','uses'=>'App\Http\Controllers\PelangganController@DetailsBlacklist'])->middleware('auth');
+Route::get('pelanggan',['as'=>'pelanggan','uses'=>'App\Http\Controllers\PelangganController@AdminPelanggan'])->middleware(['roleChecker:admin,null,null']);
+Route::get('/pelanggan/{id}',['as'=>'pelanggan.detailspelanggan','uses'=>'App\Http\Controllers\PelangganController@DetailsPelanggan'])->middleware(['roleChecker:admin,null,null']);
+Route::get('/blacklist',['as'=>'blacklist','uses'=>'App\Http\Controllers\PelangganController@DetailsBlacklist'])->middleware(['roleChecker:null,null,operasi']);
 
 
 //Kemaskini Aliran Tunai
-Route::get('/periksaalirantunai',['as'=>'periksa.alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@periksaAliranTunai']);
-Route::get('/kemaskinialirantunai',['as'=>'kemaskini.alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@kemaskiniAliranTunai']);
+Route::get('/periksaalirantunai',['as'=>'periksa.alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@periksaAliranTunai'])->middleware(['roleChecker:admin,null,null']);
+Route::get('/kemaskinialirantunai',['as'=>'kemaskini.alirantunai','uses'=>'App\Http\Controllers\AliranTunaiController@kemaskiniAliranTunai'])->middleware(['roleChecker:admin,null,null']);
 
 //Online
-Route::get('/online',['as'=>'online','uses'=>'App\Http\Controllers\OnlineController@AdminOnline'])->middleware('auth');
+Route::get('/online',['as'=>'online','uses'=>'App\Http\Controllers\OnlineController@AdminOnline'])->middleware(['roleChecker:admin,null,null']);
 
 //Bajet
-Route::get('/bajet',['as'=>'bajet','uses'=>'App\Http\Controllers\BajetController@index'])->middleware('auth');
-Route::get('/bajet/tambah',['as'=>'bajet.tambah','uses'=>'App\Http\Controllers\BajetController@tambahbajet'])->middleware('auth');
-Route::post('/bajet/tambahengine',['as'=>'bajet.functiontambah','uses'=>'App\Http\Controllers\BajetController@checkTambah'])->middleware('auth');
-Route::get('/bajet/kemaskini',['as'=>'bajet.kemaskini','uses'=>'App\Http\Controllers\BajetController@kemaskinibajet'])->middleware('auth');
+Route::get('/bajet',['as'=>'bajet','uses'=>'App\Http\Controllers\BajetController@index'])->middleware(['roleChecker:null,null,operasi']);
+Route::get('/bajet/tambah',['as'=>'bajet.tambah','uses'=>'App\Http\Controllers\BajetController@tambahbajet'])->middleware(['roleChecker:null,null,operasi']);
+Route::post('/bajet/tambahengine',['as'=>'bajet.functiontambah','uses'=>'App\Http\Controllers\BajetController@checkTambah'])->middleware(['roleChecker:null,null,operasi']);
+Route::get('/bajet/kemaskini',['as'=>'bajet.kemaskini','uses'=>'App\Http\Controllers\BajetController@kemaskinibajet'])->middleware(['roleChecker:null,null,operasi']);
 
 
 
 //Akaun
-Route::get('/akaunhome/cetaklaporanlejeram',['as'=>'cetak.lejeram','uses'=>'App\Http\Controllers\AkaunController@viewlejeram'])->middleware('auth');
-Route::get('/akaunhome/cetaklaporanimbangduga',['as'=>'cetak.imbangduga','uses'=>'App\Http\Controllers\AkaunController@cetakimbangduga'])->middleware('auth');
-Route::get('/akaunhome/cetakgadaian',['as'=>'cetak.gadaian','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanGadai'])->middleware('auth');
-Route::get('/akaunhome/cetakpenebusan',['as'=>'cetak.penebusan','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanPenebusan'])->middleware('auth');
-Route::get('/akaunhome/cetakansuran',['as'=>'cetak.ansuran','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanAnsuran'])->middleware('auth');
-Route::get('/akaunhome/cetakupah',['as'=>'cetak.upah','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_Upah'])->middleware('auth');
-Route::get('/akaunhome/cetaktuntutbaki',['as'=>'cetak.tuntutbaki','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_tuntutbaki'])->middleware('auth');
-Route::get('/akaunhome/cetakpendahuluanserahan',['as'=>'cetak.pendser','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_laporan_pendserahan'])->middleware('auth');
+Route::get('/akaunhome/cetaklaporanlejeram',['as'=>'cetak.lejeram','uses'=>'App\Http\Controllers\AkaunController@viewlejeram'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetaklaporanimbangduga',['as'=>'cetak.imbangduga','uses'=>'App\Http\Controllers\AkaunController@cetakimbangduga'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetakgadaian',['as'=>'cetak.gadaian','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanGadai'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetakpenebusan',['as'=>'cetak.penebusan','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanPenebusan'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetakansuran',['as'=>'cetak.ansuran','uses'=>'App\Http\Controllers\AkaunController@cetakLaporanAnsuran'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetakupah',['as'=>'cetak.upah','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_Upah'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetaktuntutbaki',['as'=>'cetak.tuntutbaki','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_tuntutbaki'])->middleware(['roleChecker:null,akaun,null']);
+Route::get('/akaunhome/cetakpendahuluanserahan',['as'=>'cetak.pendser','uses'=>'App\Http\Controllers\AkaunController@cetaklaporan_laporan_pendserahan'])->middleware(['roleChecker:null,akaun,null']);