commit second
This commit is contained in:
Generated
+49
-10404
File diff suppressed because it is too large
Load Diff
@@ -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",
|
||||
|
||||
Vendored
+952
-710
File diff suppressed because one or more lines are too long
Vendored
+2
@@ -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)
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
@@ -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
|
||||
>​
|
||||
<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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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"/>
|
||||
|
||||
Reference in New Issue
Block a user