Ain Izazi
114 lines
4.3 KiB
Vue
114 lines
4.3 KiB
Vue
<template>
|
|
<div class="container mx-auto">
|
|
|
|
<div class="flex items-center mb-6">
|
|
<button
|
|
id="toggle-search"
|
|
class="btn btn-outline-secondary mr-2"
|
|
type="button"
|
|
@click="toggleSearch">
|
|
<i class="fa fa-search"></i>
|
|
</button>
|
|
|
|
<input
|
|
v-show="showSearch"
|
|
v-model="searchQuery"
|
|
type="text"
|
|
id="search-laporan"
|
|
class="form-control transition-all duration-300"
|
|
style="width: 300px; height: 38px;"
|
|
placeholder="Cari laporan apa ya?"/>
|
|
</div>
|
|
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div
|
|
v-for="item in filteredMenu"
|
|
:key="item.title"
|
|
class="bg-white shadow border border-solid px-6 py-4 rounded-lg hover:bg-yellow-300 hover:transition-all cursor-pointer">
|
|
<router-link :to="item.link" class="block text-center">
|
|
<img
|
|
v-if="item.img"
|
|
:src="item.img"
|
|
class="h-20 w-20 mx-auto mb-2"
|
|
:alt="item.title"
|
|
/>
|
|
<h2 class="font-bold text-2xl uppercase">{{ item.title }}</h2>
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
showSearch: false,
|
|
searchQuery: "",
|
|
menuItems: [
|
|
{ title: "Imbang Duga Akru", link: "/akaunhome/imbangduga/akru", img: "/img/balance-sheet.png" },
|
|
{ title: "Lejer Am", link: "/akaunhome/lejeram", img: "/img/ledger.png" },
|
|
{ title: "Kawalan Stok", link: "/akaunhome/kawalanstok", img: "/img/kawalanstok.png" },
|
|
{ title: "Stok Audit", link: "/akaunhome/stokaudit", img: "/img/audit.png" },
|
|
{ title: "Stok Audit Combine", link: "/akaunhome/stokauditCombine", img: "/img/audit.png" },
|
|
{ title: "Audit Trail", link: "/akaunhome/auditTrail", img: "/img/audittrail.png" },
|
|
{ title: "Pembiayaan", link: "/akaunhome/gadaian" },
|
|
{ title: "Penyelesaian Pembiayaan", link: "/akaunhome/penebusan" },
|
|
{ title: "Pendahuluan & Serahan", link: "/akaunhome/Pendahuluanserahan" },
|
|
{ title: "Tuntut Baki", link: "/akaunhome/Tuntutbaki" },
|
|
{ title: "Ansuran Pembiayaan", link: "/akaunhome/ansuran" },
|
|
{ title: "Perbelanjaan", link: "/akaunhome/perbelanjaan" },
|
|
{ title: "Online", link: "/akaunhome/online" },
|
|
{ title: "Keuntungan", link: "/akaunhome/upah" },
|
|
{ title: "Ringkasan Harian", link: "/akaunhome/ringkasanharian" },
|
|
{ title: "Ringkasan Terkumpul", link: "/akaunhome/RingkasanTerkumpul" },
|
|
{ title: "Stok Audit Back-date", link: "/akaunhome/StokAuditBackdate" },
|
|
{ title: "Aging", link: "/akaunhome/Aging" },
|
|
{ title: "Peti Besi", link: "/akaunhome/PetiBesi" },
|
|
{ title: "Imbang Duga", link: "/akaunhome/imbangduga" },
|
|
{ title: "Prestasi Ar-Rahn", link: "/akaunhome/prestasi" },
|
|
{ title: "Akru Bulanan", link: "/akaunhome/akrubulan" },
|
|
{ title: "Akru Bulanan Pecahan", link: "/akaunhome/akrubulanpecahan" },
|
|
{ title: "Serah Marhun Pembiayaan", link: "/akaunhome/serahgadai" },
|
|
{ title: "Serah Marhun Penyelesaian Pembiayaan", link: "/akaunhome/serahtebus" },
|
|
{ title: "Baki Rugi Lelong", link: "/akaunhome/tuntutrugi" },
|
|
{ title: "Bilangan Pelanggan", link: "/akaunhome/BilanganPengadai" },
|
|
{ title: "Imbang Duga Backup", link: "/akaunhome/imbangdugabackup" },
|
|
{ title: "Sag Hilang", link: "/akaunhome/saghilang" },
|
|
{ title: "Laporan Lelong", link: "/akaunhome/laporanlelong" },
|
|
{ title: "Barang Kes", link: "/akaunhome/barangkes" },
|
|
],
|
|
};
|
|
},
|
|
computed: {
|
|
filteredMenu() {
|
|
const q = this.searchQuery.toLowerCase();
|
|
return this.menuItems.filter((item) =>
|
|
item.title.toLowerCase().includes(q)
|
|
);
|
|
},
|
|
},
|
|
methods: {
|
|
toggleSearch() {
|
|
this.showSearch = !this.showSearch;
|
|
if (this.showSearch) {
|
|
this.$nextTick(() => {
|
|
document.getElementById("search-laporan").focus();
|
|
});
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.btn {
|
|
height: 38px;
|
|
border: 1px solid #ccc;
|
|
background: white;
|
|
padding: 0 10px;
|
|
border-radius: 6px;
|
|
}
|
|
</style>
|
|
|