fix skit2

package-lock.json

@@ -6,6 +6,7 @@
         "": {
             "dependencies": {
                 "@headlessui/vue": "^1.4.2",
+                "@popperjs/core": "^2.11.0",
                 "@vue-hero-icons/outline": "^1.7.2",
                 "@vue-hero-icons/solid": "^1.7.2",
                 "@vue/composition-api": "^1.4.0",
@@ -1709,6 +1710,15 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@popperjs/core": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+            "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==",
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/popperjs"
+            }
+        },
         "node_modules/@trysound/sax": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -11540,6 +11550,11 @@
                 "fastq": "^1.6.0"
             }
         },
+        "@popperjs/core": {
+            "version": "2.11.0",
+            "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.0.tgz",
+            "integrity": "sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ=="
+        },
         "@trysound/sax": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",

package.json

@@ -28,6 +28,7 @@
     },
     "dependencies": {
         "@headlessui/vue": "^1.4.2",
+        "@popperjs/core": "^2.11.0",
         "@vue-hero-icons/outline": "^1.7.2",
         "@vue-hero-icons/solid": "^1.7.2",
         "@vue/composition-api": "^1.4.0",

resources/js/app.js

@@ -11,6 +11,7 @@ import VueCompositionAPI from '@vue/composition-api'
 import VueAxios from 'vue-axios'
 import axios from 'axios'
 import JwPagination from 'jw-vue-pagination'
+import { createPopper } from "@popperjs/core"
 
 require('./bootstrap');
 
@@ -32,6 +33,7 @@ Vue.use (Alpine)
 Vue.use(VueCompositionAPI)
 Vue.use(VueAxios, axios)
 Vue.component('jw-pagination', JwPagination)
+Vue.use(createPopper)
 Alpine.start()
 
 Vue.component('chart', require('./components/Chart.vue').default)

resources/js/components/Cawangan.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="mx-auto">
         <a class="text-yellow-200 rounded bg-gray-400 px-6 py-3 font-bold mr-4 uppercase  md:invisible xl:visible">
-            CAWANGAN : {{this.cawangan.details_caw}}
+            CAWANGAN : {{this.cawangan.details_caw }}
         </a>
     </div>
 </template>

resources/js/components/Searchpelanggan.vue

@@ -1,21 +1,69 @@
 <template>
-     <div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
+      <div class="container w-full max-w-xl mx-auto mt-10 px-4 font-sans">
-            <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4">
+         <form class="bg-white w-full shadow-md rounded-lg px-8 pt-6 pb-4 mb-4">
-               <div class="mb-4 w-96 mx-auto">
+            <div class="mb-4 w-96 mx-auto">
-                  <label class="block text-gray-500 font-medium text-sm mb-2">Pelanggan</label>
+               <label class="block text-gray-500 font-medium text-sm mb-2">Pelanggan</label>
-                  <div class="flex flex-wrap">
+               <div class="flex flex-wrap">
-                     <div class="flex flex-row w-96 mx-auto">
+                  <div class="flex flex-row w-96 mx-auto">
-                     <input type="text" placeholder="Masukkan IC atau Nama" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" />
+                  
-                     <button class="px-4 py-2 bg-blue-600 rounded"><i class="fas fa-search text-white"></i></button>
+                     <div class="flex flex-col w-96">
-                     </div>
+                        <input type="text" ref="btnDropdownRef" placeholder="Masukkan IC atau Nama" class="mr-2 bg-gray-200 appearance-none border-2 border-gray-200 rounded w-full py-2 px-4 text-gray-700 leading-tight focus:outline-none focus:bg-white focus:border-blue-500" />
+                     
+                        <div ref="popoverDropdownRef" v-bind:class="{'hidden': !dropdownShow, 'block': dropdownShow}" class="origin-top-right w-96 right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+                           <div class="py-1" role="none">
+                              <a v-for="(cust,i) in arrayCustomer" :key="i" href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-0">{{ cust.nama }}<br><b>{{ cust.kpbaru }}</b></a>
+                              <!-- <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-1">MUHAMMAD HAFIFIE BIN ABD RAHMAN<br><b>970403035003</b></a>
+                              <a href="#" class="text-gray-700 block px-4 py-2 text-sm hover:bg-yellow-500" role="menuitem" tabindex="-1" id="menu-item-2">MUHAMMAD HAFIFIE BIN ABD RAHMAN<br><b>970403035003</b></a> -->
+                           </div>
+                        </div>
+                     </div>                     
+                                    
+                     <button class="px-4 py-2 bg-blue-600 rounded ml-2" v-on:click="toggleDropdown()"><i class="fas fa-search text-white"></i></button>
                   </div>
                </div>
-            </form>
+            </div>
-         </div>
+         </form>
+      </div>
 </template>
 
 <script>
+import { createPopper } from "@popperjs/core";
+
 export default{
 
+   data() {
+      return {
+         dropdownShow: false,
+         arrayCustomer: []
+      }
+   },
+
+   computed:{
+      getData(){
+         let data = this.axios.get('http://localhost:8000/api/customers/630411035213').then(response => {
+            // this.arrayCustomer.push(response.data)
+            this.arrayCustomer = response.data
+         });
+
+         return data;
+      }
+   },
+   methods: {
+    toggleDropdown: function(){
+       
+      if(this.dropdownShow){
+        this.dropdownShow = false;
+      } else {
+        this.dropdownShow = true;
+        createPopper(this.$refs.btnDropdownRef, this.$refs.popoverDropdownRef, {
+          placement: "bottom-start"
+        });
+      }
+    }
+
+   }
+
+
+
 }
 </script>

resources/views/pelanggan/pelanggan.blade.php

@@ -2,7 +2,7 @@
 
 @section('content')
 <div class="bg-gray-900 opacity-50 hidden fixed inset-0 z-10" id="sidebarBackdrop"></div>
-<div id="main-content" class="h-full w-full bg-gray-50 relative overflow-y-auto">
+<div id="main-content" class="h-full w-screen bg-gray-50 relative overflow-y-auto">
    <main class="h-96">
 
       <div class="pt-6 px-4">