commit second

This commit is contained in:
fifi97
2021-11-29 08:10:02 +08:00
parent cbde7131a8
commit 874cbe1604
10 changed files with 1539 additions and 11475 deletions
+49 -10404
View File
File diff suppressed because it is too large Load Diff
+1
View File
@@ -34,6 +34,7 @@
"alpinejs": "^3.5.2",
"apexcharts": "^3.30.0",
"bootbox": "^5.5.2",
"jw-vue-pagination": "^1.0.3",
"vue-apexcharts": "^1.6.2",
"vue-axios": "^3.4.0",
"vue-class-component": "^7.2.6",
+952 -710
View File
File diff suppressed because one or more lines are too long
+2
View File
@@ -10,6 +10,7 @@ import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import VueAxios from 'vue-axios'
import axios from 'axios'
import JwPagination from 'jw-vue-pagination'
require('./bootstrap');
@@ -30,6 +31,7 @@ Vue.use (VueApexCharts)
Vue.use (Alpine)
Vue.use(VueCompositionAPI)
Vue.use(VueAxios, axios)
Vue.component('jw-pagination', JwPagination)
Alpine.start()
Vue.component('chart', require('./components/Chart.vue').default)
-14
View File
@@ -37,20 +37,6 @@
>
</li>
<li v-for="(item, index) in $props.items" :key="index" class="mt-2 pl-2">
<button
:class="[
'relative px-4 py-2 overflow-hidden',
'transition-colors duration-200',
'bg-black text-white',
'hover:bg-gray-400 hover:text-black'
]"
:disabled="$data.index === index"
v-text="item.title"
/>
</li>
<!-- TODO FA replacement -->
</ol>
</div>
</template>
+37 -14
View File
@@ -164,15 +164,15 @@
<p class="text-sm text-gray-700">
Showing
{{ ' ' }}
<span class="font-medium">1</span>
<span class="font-medium">{{ this.currentPage }}</span>
{{ ' ' }}
to
{{ ' ' }}
<span class="font-medium">10</span>
<span class="font-medium">{{ this.perPage }}</span>
{{ ' ' }}
of
{{ ' ' }}
<span class="font-medium">97</span>
<span class="font-medium">{{ this.totalPage }}</span>
{{ ' ' }}
results
</p>
@@ -184,13 +184,14 @@
<ChevronLeftIcon class="h-5 w-5" aria-hidden="true" />
</a>
<!-- Current: "z-10 bg-indigo-50 border-indigo-500 text-indigo-600", Default: "bg-white border-gray-300 text-gray-500 hover:bg-gray-50" -->
<a href="#" aria-current="page" class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
1
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
2
<a v-for="(row,i) in rows" :key="i" href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
{{ i+1 }}
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
<!-- <a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium">
3
</a>
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
@@ -204,7 +205,8 @@
</a>
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
10
</a>
</a> -->
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
<span class="sr-only">Next</span>
<ChevronRightIcon class="h-5 w-5" aria-hidden="true" />
@@ -212,6 +214,9 @@
</nav>
</div>
</div>
<!-- <pagination :data="active"></pagination> -->
</div>
<!-- <h1 v-text="active.kodlaluan" />
@@ -224,12 +229,15 @@
<script>
import { ChevronLeftIcon, ChevronRightIcon } from '@vue-hero-icons/solid'
import modal from './util/Modal.vue'
import pagination from './pagination.vue'
export default {
components: {
ChevronLeftIcon,
ChevronRightIcon,
modal
modal,
pagination
},
props: {
items: {
@@ -244,7 +252,10 @@ export default {
return {
index: 0,
leftToRight: true,
alirantunai:[]
alirantunai:[],
perPage: 5,
totalPage: 0,
currentPage: 1
};
},
// created: function() {
@@ -255,7 +266,16 @@ export default {
computed: {
active() {
// Dynamically return the active "item", based on $data.index
return this.$props.arraytunai[this.$data.index];
let tunaidibahagi = this.$props.arraytunai[this.$data.index]
let pecahantunai = tunaidibahagi.slice(0, this.perPage)
return pecahantunai
},
rows() {
this.totalPage = this.$props.arraytunai[this.$data.index].length
let totaldibahagi = parseInt(this.totalPage/this.perPage)
return totaldibahagi
}
},
@@ -267,7 +287,6 @@ export default {
},
action(tarikhteller,kodcawteller,tel){
axios.get('/api/check/periksaalirantunai', {
params: {
tarikh: tarikhteller,
@@ -279,13 +298,17 @@ export default {
if(response.data === 'sama')
{
console.log('betul betul la ni')
alert('sama')
}else{
this.alirantunai = response.data;
// console.log(this.alirantunai)
this.$refs.modal.showModal = true;
this.$refs.modal.serahan = this.alirantunai.pendahuluan;
this.$refs.modal.serahan = this.alirantunai.serahan;
this.$refs.modal.bakiawal = this.alirantunai.bakiawal;
this.$refs.modal.bakiakhir = this.alirantunai.bakisemasa;
this.$refs.modal.pendahuluan = this.alirantunai.pendahuluan;
this.$refs.modal.penebusan = this.alirantunai.penebusan;
this.$refs.modal.gadaian = this.alirantunai.gadaian;
}
});
+160
View File
@@ -0,0 +1,160 @@
<template>
<div v-if="data" class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
<div v-if="data.total > 0" class="flex-1 flex justify-between sm:hidden">
<button @click.prevent="getPreviousPage"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
:class="data.current_page == 1 ? 'text-gray-400 cursor-not-allowed': 'text-gray-700 hover:bg-gray-50' ">
Previous
</button>
<button @click.prevent="getNextPage"
class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md bg-white"
:class="data.current_page >= data.total_pages ? 'text-gray-400 cursor-not-allowed': 'text-gray-700 hover:bg-gray-50' ">
Next
</button>
</div>
<div v-if="data.total > 0" class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
<div>
<p class="text-sm text-gray-700">
Showing
{{ ' ' }}
<span class="font-medium">{{ to }}</span>
{{ ' ' }}
to
{{ ' ' }}
<span class="font-medium">{{ from }}</span>
{{ ' ' }}
of
{{ ' ' }}
<span class="font-medium">{{ total }}</span>
{{ ' ' }}
records
</p>
</div>
<div>
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
<button @click.prevent="getPreviousPage"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500"
:class="data.current_page == 1 ? 'text-gray-300 cursor-not-allowed' : 'hover:bg-gray-50' ">
<span class="sr-only">Previous</span>
<svg class="h-5 w-5" :class="{'text-gray-400': data.current_page == 1}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
clip-rule="evenodd" />
</svg>
</button>
<!-- <a href="#" aria-current="page"
class="z-10 bg-indigo-50 border-indigo-500 text-indigo-600 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
A
</a> -->
<div v-for="(page, index) in range" :key="index">
<button v-if="page != '...' " @click.prevent="getPage(page)"
class="bg-white border-gray-300 text-gray-500 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"
:class="data.current_page == page ? 'z-10 bg-indigo-50 border-indigo-500 text-indigo-600' : 'hover:bg-gray-50' ">
{{ page }}
</button>
<span v-else
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 cursor-not-allowed hidden md:block">
...
</span>
</div>
<button @click.prevent="getNextPage"
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50"
:class="{'text-gray-300 cursor-not-allowed': data.current_page >= data.total_pages}">
<span class="sr-only">Next</span>
<svg class="h-5 w-5" :class="{'text-gray-400': data.current_page >= data.total_pages}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
aria-hidden="true">
<path fill-rule="evenodd"
d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
clip-rule="evenodd" />
</svg>
</button>
</nav>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'Pagination',
props: {
data: Object
},
data() {
return {
range: []
}
},
computed: {
to: function() {
if(this.data.current_page < this.data.total_pages) {
return this.data.current_page > 1 ?
(this.data.current_page - 1) * this.data.count + 1 : 1
}
else {
return this.data.total - this.data.count + 1
}
},
from: function() {
if(this.data.current_page < this.data.total_pages)
return this.data.count * this.data.current_page
else
return this.total
},
total: function() {
return this.data.total
},
propsToWatch() {
return this.data.current_page
}
},
watch: {
propsToWatch: {
handler: 'organisePageLinks',
immediate: true
}
},
methods: {
organisePageLinks() {
this.range = []
for (let i = 1; i <= this.data.total_pages; i++) {
if (
i == 1 || // first page
i == this.data.total_pages || // last page
i == this.data.current_page || // current page
i == this.data.current_page - 1 || // page before current
i == this.data.current_page + 1 || // page after current
(i <= 3 && this.data.current_page < 3) || // "filler" links at start
(i >= this.data.total_pages - 3 && this.data.current_page > this.data.total_pages - 3) // "filler" links at end
) {
let index = this.range.length
if (index > 0 && this.range[index - 1] < i - 1) {
// if this page is not the next one insequence, add in 3 dots "..."
this.range.push('...')
}
this.range.push(i)
}
}
},
getPage(pageNumber) {
this.$emit('clickEvent_', pageNumber)
},
getPreviousPage() {
if(this.data.current_page > 1)
this.getPage(this.data.current_page - 1)
},
getNextPage() {
if(this.data.current_page < this.data.total_pages)
this.getPage(this.data.current_page + 1)
}
}
}
</script>
+136 -131
View File
@@ -1,152 +1,157 @@
<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
<div id="app">
<transition name="fade">
<div v-if="showModal" class="fixed z-10 inset-0 overflow-y-auto">
<div
class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"
>
<div class="fixed inset-0 transition-opacity">
<div class="absolute inset-0 bg-gray-500 opacity-75"></div>
</div>
<span
class="hidden sm:inline-block sm:align-middle sm:h-screen"
></span
>&#8203;
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
role="dialog"
aria-modal="true"
aria-labelledby="modal-headline"
>
<div class="bg-white w-1/2 h-1/2 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="sm:flex sm:items-start">
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3
class="text-lg leading-6 font-medium text-gray-900"
id="modal-headline"
>
Modal title
<div>
<div v-if="showModal" class="overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none justify-center items-center flex">
<div class="relative w-screen my-6 mx-auto max-w-6xl">
<!--content-->
<div class="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
<!--header-->
<div class="flex items-start bg-gray-200 justify-between p-5 border-b border-solid border-blueGray-200 rounded-t">
<h3 class="text-3xl font-semibold">
Pemeriksaan Aliran Tunai
</h3>
<div class="mt-2 flex flex-cols">
<div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
<span class="inline-block mr-5 align-middle text-xl">
<i class="fa fa-bell"></i>
<button class="p-1 ml-auto border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none" v-on:click="toggleModal()">
<span class=" text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
×
</span>
<span class="inline-block mr-8 align-middle">
<b class="capitalize">{{ this.bakiawal }}</b>
</span>
</div>
<div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
<span class="inline-block mr-5 align-middle text-xl">
<i class="fa fa-bell"></i>
</span>
<span class="inline-block mr-8 align-middle">
<b class="capitalize">{{ this.serahan }}</b>
</span>
</div>
<div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
<span class="inline-block mr-5 align-middle text-xl">
<i class="fa fa-bell"></i>
</span>
<span class="inline-block mr-8 align-middle">
<b class="capitalize">{{this.pendahuluan}}</b>
</span>
</div>
<div class="relative px-6 py-4 border-0 rounded mb-4 bg-gray-500 text-white">
<span class="inline-block mr-5 align-middle text-xl">
<i class="fa fa-bell"></i>
</span>
<span class="inline-block mr-8 align-middle">
<b class="capitalize">ALERT</b>
</span>
</div>
</div>
</div>
</div>
</div>
<div
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
>
<span class="flex w-full rounded-md shadow-sm sm:ml-3 sm:w-auto">
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-transparent px-4 py-2 bg-red-600 text-base leading-6 font-medium text-white shadow-sm hover:bg-red-500 focus:outline-none focus:border-red-700 focus:shadow-outline-red transition ease-in-out duration-150 sm:text-sm sm:leading-5"
@click="showModal = false"
>
Close in red xd
</button>
</span>
<span
class="mt-3 flex w-full rounded-md shadow-sm sm:mt-0 sm:w-auto"
>
<button
type="button"
class="inline-flex justify-center w-full rounded-md border border-gray-300 px-4 py-2 bg-white text-base leading-6 font-medium text-gray-700 shadow-sm hover:text-gray-500 focus:outline-none focus:border-blue-300 focus:shadow-outline-blue transition ease-in-out duration-150 sm:text-sm sm:leading-5"
@click="showModal = false"
>
</div>
<!--body-->
<div class="relative p-6 flex-auto">
<p class="my-4 text-blueGray-500 text-lg leading-relaxed">
</p>
<div class="flex flex-no-wrap">
<div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-blue-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-cash" viewBox="0 0 16 16">
<path d="M8 10a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"/>
<path d="M0 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V4zm3 0a2 2 0 0 1-2 2v4a2 2 0 0 1 2 2h10a2 2 0 0 1 2-2V6a2 2 0 0 1-2-2H3z"/>
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.bakiawal }}</p>
</div>
</div>
</div>
<div class="bg-blue-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-blue-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" class="h-6 w-6" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M6 2a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V4a2 2 0 00-2-2H6zm1 2a1 1 0 000 2h6a1 1 0 100-2H7zm6 7a1 1 0 011 1v3a1 1 0 11-2 0v-3a1 1 0 011-1zm-3 3a1 1 0 100 2h.01a1 1 0 100-2H10zm-4 1a1 1 0 011-1h.01a1 1 0 110 2H7a1 1 0 01-1-1zm1-4a1 1 0 100 2h.01a1 1 0 100-2H7zm2 1a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zm4-4a1 1 0 100 2h.01a1 1 0 100-2H13zM9 9a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1zM7 8a1 1 0 000 2h.01a1 1 0 000-2H7z" clip-rule="evenodd" />
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.bakiakhir }}</p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap mt-3">
<div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-green-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/>
<path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/>
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.pendahuluan }}</p>
</div>
</div>
</div>
<div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-red-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-box-arrow-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 12.5a.5.5 0 0 0 .5.5h8a.5.5 0 0 0 .5-.5v-9a.5.5 0 0 0-.5-.5h-8a.5.5 0 0 0-.5.5v2a.5.5 0 0 1-1 0v-2A1.5 1.5 0 0 1 6.5 2h8A1.5 1.5 0 0 1 16 3.5v9a1.5 1.5 0 0 1-1.5 1.5h-8A1.5 1.5 0 0 1 5 12.5v-2a.5.5 0 0 1 1 0v2z"/>
<path fill-rule="evenodd" d="M.146 8.354a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L1.707 7.5H10.5a.5.5 0 0 1 0 1H1.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3z"/>
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.serahan }}</p>
</div>
</div>
</div>
</div>
<div class="flex flex-wrap mt-3">
<div class="bg-green-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-green-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-plus-square" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.penebusan }}</p>
</div>
</div>
</div>
<div class="bg-red-300 text-white h-26 flex-auto rounded-2xl ml-2">
<div class="flex flex-row">
<div class="bg-red-500 px-4 py-6 rounded-l-2xl">
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-dash-square" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"/>
</svg>
</div>
<div class="my-auto mx-auto">
<p class="font-bold uppercase text-black text-2xl">{{ this.gadaian }}</p>
</div>
</div>
</div>
</div>
</div>
<!--footer-->
<div class="flex items-center justify-end p-6 border-t border-solid border-blueGray-200 rounded-b">
<button class="text-red-500 bg-transparent border border-solid border-red-500 hover:bg-red-500 hover:text-white active:bg-red-600 font-bold uppercase text-sm px-6 py-3 rounded outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
Close
</button>
</span>
<button class="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button" v-on:click="toggleModal()">
Save Changes
</button>
</div>
</div>
</div>
</div>
</transition>
<!-- <p>Some text</p>
<button
@click="showModal = true"
type="button"
class="rounded-md bg-blue-500 hover:bg-blue-700 text-white py-2 px-4"
>
Show modal
</button> -->
<div v-if="showModal" class="opacity-25 fixed inset-0 z-40 bg-black"></div>
</div>
</template>
<script>
export default {
name:'modal',
data: () => ({
showModal: true,
name: "modal",
data() {
return {
showModal: false,
bakiawal: 0,
baki: 0,
bakiakhir: 0,
pendahuluan: 0,
serahan: 0,
}),
method:{
ontrigger() {
this.showModal = true;
console.log('true');
penebusan: 0,
gadaian: 0
}
},
methods: {
toggleModal: function(){
this.showModal = !this.showModal;
}
}
}
};
</script>
<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
.fade-enter-from,
.fade-leave-to {
opacity: 0;
transition: ease 0.2s;
}
.fade-leave-from,
.fade-enter-to {
opacity: 1;
transition: ease 0.2s;
}
</style>
+3 -3
View File
@@ -58,7 +58,7 @@
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span>
{{-- <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span> --}}
<h3 class="text-base font-normal text-gray-500">Pembiayaan Bulanan</h3>
</div>
<div class="flex items-center justify-end flex-1 text-green-500 text-base font-bold">
@@ -73,7 +73,7 @@
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span>
{{-- <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span> --}}
<h3 class="text-base font-normal text-gray-500">Penyelesaian Bulanan</h3>
</div>
<div class="flex items-center justify-end flex-1 text-green-500 text-base font-bold">
@@ -89,7 +89,7 @@
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1">
<div class="flex items-center justify-between mb-4">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span>
{{-- <span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">$45,385</span> --}}
<h3 class="text-base font-normal text-gray-500">Keuntungan Bulanan</h3>
</div>
<div class="flex items-center justify-end flex-1 text-green-500 text-base font-bold">
+3 -3
View File
@@ -7,7 +7,7 @@
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<title>Ar-Rahn Admin Page</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
@@ -157,7 +157,7 @@
<a href="#">
<li class="flex w-full justify-between text-gray-600 hover:text-yellow-500 cursor-pointer items-center mb-6">
<li class="flex w-full justify-between text-red-600 cursor-pointer items-center mb-6">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-workspace" viewBox="0 0 16 16">
<path d="M4 16s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H4Zm4-5.95a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z"/>
@@ -169,7 +169,7 @@
</a>
<a href="#">
<li class="flex w-full justify-between text-gray-600 hover:text-yellow-500 cursor-pointer items-center mb-6">
<li class="flex w-full justify-between text-red-600 cursor-pointer items-center mb-6">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-archive-fill" viewBox="0 0 16 16">
<path d="M12.643 15C13.979 15 15 13.845 15 12.5V5H1v7.5C1 13.845 2.021 15 3.357 15h9.286zM5.5 7h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zM.8 1a.8.8 0 0 0-.8.8V3a.8.8 0 0 0 .8.8h14.4A.8.8 0 0 0 16 3V1.8a.8.8 0 0 0-.8-.8H.8z"/>