fix skit2
This commit is contained in:
Vendored
+1184
-109
File diff suppressed because it is too large
Load Diff
Vendored
+3
@@ -82,6 +82,9 @@ Vue.component('blacklist-pelanggan', require('./pages/Blacklist.vue').default)
|
|||||||
|
|
||||||
Vue.component('harian-component', require('./components/Analisa/Harian.vue').default)
|
Vue.component('harian-component', require('./components/Analisa/Harian.vue').default)
|
||||||
|
|
||||||
|
Vue.component('bilangan-component', require('./components/Chart/BilanganChart.vue').default)
|
||||||
|
|
||||||
|
|
||||||
Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
|
Vue.component('senaraibajet-component', require('./Bajet/Homebajet.vue').default)
|
||||||
Vue.component('clock-component', require('./components/util/Clock.vue').default)
|
Vue.component('clock-component', require('./components/util/Clock.vue').default)
|
||||||
|
|
||||||
|
|||||||
@@ -2,6 +2,10 @@
|
|||||||
<div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
<div class="mb-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
|
||||||
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8">
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8">
|
||||||
|
|
||||||
|
<div class="mb-3 mx-auto justify-center flex">
|
||||||
|
<h3 class="text-3xl font-bold text-gray-500">Pembiayaan</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-nowrap">
|
<div class="flex flex-nowrap">
|
||||||
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
||||||
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumgadai > 100) ? 100 : percentcumgadai + '%' }"> {{ this.percentcumgadai }}%</div>
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumgadai > 100) ? 100 : percentcumgadai + '%' }"> {{ this.percentcumgadai }}%</div>
|
||||||
@@ -10,20 +14,25 @@
|
|||||||
<div class="w-1/4 grid grid-rows-2">
|
<div class="w-1/4 grid grid-rows-2">
|
||||||
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ gadaianremaining }}</span>
|
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ gadaianremaining }}</span>
|
||||||
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex pt-2 -mt-2">
|
<div class="flex pt-2 -mt-2">
|
||||||
<div class="grid grid-rows-2 ml-1 mt-2 w-1/4">
|
<div class="grid grid-rows-2 ml-1 mt-2 w-1/3">
|
||||||
<span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ gadaianharian }}</span>
|
<div class="flex">
|
||||||
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetgadaian }} </span>
|
<span class="text-sm leading-none font-bold text-gray-700 w-1/3 uppercase"> Harian</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ gadaianharian }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-700 w-1/3 uppercase"> Bajet</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetgadaian }} </span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 text-center w-1/3">
|
<div class="ml-4 text-center w-1/4">
|
||||||
<h3 class="text-3xl font-bold -mt-1 text-gray-500">Pembiayaan</h3>
|
<!-- <h3 class="text-3xl font-bold -mt-1 text-gray-500">Pembiayaan</h3> -->
|
||||||
<span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span>
|
<!-- <span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
||||||
<h3 v-if="percentgadaian > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentgadaian.toFixed(2) }}%
|
<h3 v-if="percentgadaian > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentgadaian.toFixed(2) }}%
|
||||||
@@ -48,6 +57,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
|
||||||
|
|
||||||
|
<div class="mb-3 mx-auto justify-center flex">
|
||||||
|
<h3 class="text-3xl font-bold text-gray-500">Penebusan</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-nowrap">
|
<div class="flex flex-nowrap">
|
||||||
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
||||||
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumtebus > 100) ? 100 : percentcumtebus + '%' }"> {{ percentcumtebus }}%</div>
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumtebus > 100) ? 100 : percentcumtebus + '%' }"> {{ percentcumtebus }}%</div>
|
||||||
@@ -57,19 +70,28 @@
|
|||||||
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ tebusremaining }}</span>
|
<span class="text-sm ml-2 font-bold -mt-0.5">RM {{ tebusremaining }}</span>
|
||||||
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
<!-- <span class="text-xs leading-none font-bold text-gray-900 mx-auto flex place-self-center -mt-3 ml-12">remaining.. </span> -->
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex pt-2 -mt-2">
|
<div class="flex pt-2 -mt-2">
|
||||||
<div class="grid grid-rows-2 ml-1 mt-2 w-1/4">
|
<div class="grid grid-rows-2 ml-1 mt-2 w-1/3">
|
||||||
<span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ penebusanharian }}</span>
|
<!-- <span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ penebusanharian }}</span>
|
||||||
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetpenebusan }} </span>
|
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetpenebusan }} </span> -->
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700 w-1/3 uppercase"> Harian</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ penebusanharian }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-700 w-1/3 uppercase"> Bajet</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetpenebusan }} </span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 text-center w-1/3">
|
<div class="ml-4 text-center w-1/3">
|
||||||
<h3 class="text-3xl font-bold -mt-1 text-gray-500">Penebusan</h3>
|
<!-- <h3 class="text-3xl font-bold -mt-1 text-gray-500">Penebusan</h3>
|
||||||
<span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span>
|
<span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
||||||
<h3 v-if="percentpenebusan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentpenebusan.toFixed(2) }}%
|
<h3 v-if="percentpenebusan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentpenebusan.toFixed(2) }}%
|
||||||
@@ -93,6 +115,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
|
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
|
||||||
|
|
||||||
|
<div class="mb-3 mx-auto justify-center flex">
|
||||||
|
<h3 class="text-3xl font-bold text-gray-500">Keuntungan</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-nowrap">
|
<div class="flex flex-nowrap">
|
||||||
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
<div class="w-3/4 h-4 bg-gray-200 rounded-full">
|
||||||
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumkeuntungan > 100) ? 100 : percentcumkeuntungan + '%' }"> {{percentcumkeuntungan}}%</div>
|
<div class="bg-yellow-600 text-xs font-medium text-yellow-100 text-center p-0.5 leading-none rounded-l-full rounded-r-full" v-bind:style="{ width: (percentcumkeuntungan > 100) ? 100 : percentcumkeuntungan + '%' }"> {{percentcumkeuntungan}}%</div>
|
||||||
@@ -108,13 +134,23 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex pt-2 -mt-2">
|
<div class="flex pt-2 -mt-2">
|
||||||
<div class="grid grid-rows-2 ml-1 mt-2 w-1/4">
|
<div class="grid grid-rows-2 ml-1 mt-2 w-1/3">
|
||||||
<span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ keuntunganharian }}</span>
|
<!-- <span class="text-sm leading-none font-bold text-gray-700"><i class="fas fa-calendar-day"></i> RM {{ keuntunganharian }}</span>
|
||||||
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetkeuntungan }} </span>
|
<span class="text-sm leading-none font-bold text-yellow-900"><i class="fas fa-chart-pie"></i> RM {{ bajetkeuntungan }} </span> -->
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700 w-1/3 uppercase"> Harian</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">RM {{ keuntunganharian }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex">
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-700 w-1/3 uppercase"> Bajet</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-gray-700">:</span>
|
||||||
|
<span class="text-sm leading-none font-bold text-yellow-900"> RM {{ bajetkeuntungan }} </span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ml-4 text-center w-1/3">
|
<div class="ml-4 text-center w-1/3">
|
||||||
<h3 class="text-3xl font-bold -mt-1 text-gray-500">Keuntungan</h3>
|
<!-- <h3 class="text-3xl font-bold -mt-1 text-gray-500">Keuntungan</h3>
|
||||||
<span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span>
|
<span class="text-base leading-none font-bold text-gray-900 text-center">{{ this.bulan }} </span> -->
|
||||||
</div>
|
</div>
|
||||||
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
<div class="grid grid-rows-2 ml-2 mt-2 w-2/6 flex place-content-end">
|
||||||
<h3 v-if="percentkeuntungan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentkeuntungan.toFixed(2) }}%
|
<h3 v-if="percentkeuntungan > 0" class="text-base font-bold -mt-1 text-green-500 flex items-center mx-auto">{{ percentkeuntungan.toFixed(2) }}%
|
||||||
|
|||||||
@@ -0,0 +1,385 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
<div class="mt-4 bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 2xl:col-span-1 w-2/3 mx-auto">
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between mb-4">
|
||||||
|
<div class="flex-shrink-0">
|
||||||
|
<h3 class="text-base font-normal text-gray-500">Bilangan Orang Bulanan</h3>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="chart">
|
||||||
|
<apexchart type="bar" height="350" :options="chartOptions" :series="series"></apexchart>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
series: [{
|
||||||
|
name: 'Gadai',
|
||||||
|
// data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 80, 68]
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
x: 'Jan',
|
||||||
|
y: 44,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 32,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Feb',
|
||||||
|
y: 55,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 56,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Mac',
|
||||||
|
y: 57,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 40,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Apr',
|
||||||
|
y: 56,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 77,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Mei',
|
||||||
|
y: 61,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 65,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Jun',
|
||||||
|
y: 58,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Jul',
|
||||||
|
y: 63,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 43,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Ogos',
|
||||||
|
y: 60,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 20,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Sept',
|
||||||
|
y: 66,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Okt',
|
||||||
|
y: 80,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Nov',
|
||||||
|
y: 86,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Dis',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}, {
|
||||||
|
name: 'Tebus',
|
||||||
|
// data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 67, 65]
|
||||||
|
data:[
|
||||||
|
{
|
||||||
|
x: 'Jan',
|
||||||
|
y: 76,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 80,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Feb',
|
||||||
|
y: 85,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 60,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Mac',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 50,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Apr',
|
||||||
|
y: 76,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 56,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Mei',
|
||||||
|
y: 85,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 70,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Jun',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 40,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Jul',
|
||||||
|
y: 76,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 44,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Ogos',
|
||||||
|
y: 85,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 45,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Sept',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 80,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Okt',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 70,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Nov',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 40,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
x: 'Dis',
|
||||||
|
y: 101,
|
||||||
|
goals: [
|
||||||
|
{
|
||||||
|
name: 'Expected',
|
||||||
|
value: 80,
|
||||||
|
strokeHeight: 5,
|
||||||
|
strokeColor: '#775DD0'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}],
|
||||||
|
chartOptions: {
|
||||||
|
chart: {
|
||||||
|
type: 'bar',
|
||||||
|
height: 350
|
||||||
|
},
|
||||||
|
plotOptions: {
|
||||||
|
bar: {
|
||||||
|
horizontal: false,
|
||||||
|
columnWidth: '55%',
|
||||||
|
endingShape: 'rounded',
|
||||||
|
dataLabels: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
// dataLabels: {
|
||||||
|
// enabled: false
|
||||||
|
// },
|
||||||
|
dataLabels: {
|
||||||
|
enabled: true,
|
||||||
|
style: {
|
||||||
|
colors: ['#333']
|
||||||
|
},
|
||||||
|
offsetY: -30,
|
||||||
|
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
|
||||||
|
|
||||||
|
if(isNaN(total))
|
||||||
|
{
|
||||||
|
return 0.00
|
||||||
|
}else{
|
||||||
|
return total.toFixed(2)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
stroke: {
|
||||||
|
show: true,
|
||||||
|
width: 2,
|
||||||
|
colors: ['transparent']
|
||||||
|
},
|
||||||
|
// xaxis: {
|
||||||
|
// categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct','Nov','Dis'],
|
||||||
|
// },
|
||||||
|
yaxis: {
|
||||||
|
title: {
|
||||||
|
text: '(Bilangan Orang)'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fill: {
|
||||||
|
opacity: 1
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
y: {
|
||||||
|
formatter: function (val) {
|
||||||
|
return val + " orang"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
}),
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -1,5 +1,131 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="bg-white">
|
||||||
|
|
||||||
|
<table class="min-w-full leading-normal">
|
||||||
|
<thead class="text-center">
|
||||||
|
<tr>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Bil
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Tarikh
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
B/F
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Keluar
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Masuk
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Pendahuluan
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Serahan
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Panjar
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Baki Akhir
|
||||||
|
</th>
|
||||||
|
<th class="px-5 py-3 border-b-2 border-gray-200 bg-gray-100 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider">
|
||||||
|
Act
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr v-for="(petibesi,i) in active.vault" :key="i">
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="(i+1+active.mulaPage)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="petibesi.tarikh">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.bakiawal)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.keluar)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.masuk)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.pendahuluan)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.serahan)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.totpanjar)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<p class="text-gray-900 whitespace-no-wrap" v-text="formatterfunction(petibesi.bakiakhir)">
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td class="px-5 py-5 border-b border-gray-200 bg-white text-sm">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<div class="ml-3">
|
||||||
|
<button @click="action(petibesi.tarikh,petibesi.kodcaw)" class="border border-yellow-600 text-yellow-600 font-montserrat py-2 px-4 font-medium rounded-xl hover:bg-yellow-600 hover:text-white transition-all duration-300"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-card-checklist" viewBox="0 0 16 16">
|
||||||
|
<path d="M14.5 3a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-13a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h13zm-13-1A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13z"/>
|
||||||
|
<path d="M7 5.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0zM7 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm-1.496-.854a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z"/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
|||||||
@@ -39,9 +39,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mx-auto mt-10"><keun-chart kodcaw={{ Auth::user()->cawangan }}></keun-chart></div>
|
<div class="mx-auto mt-10"><keun-chart kodcaw={{ Auth::user()->cawangan }}></keun-chart></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<bilangan-component></bilangan-component>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@include('layouts.footer')
|
@include('layouts.footer')
|
||||||
|
|||||||
Reference in New Issue
Block a user