chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

feat: dashboard data bind api

Browse source
This commit is contained in:
Methapon2001 2025-03-05 16:32:41 +07:00
parent 9a196b7077
commit 58b5613d2c
6 changed files with 100 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

98
src/pages/15_dash-board/MainPage.vue
View file

@ -14,11 +14,15 @@ import ChartSales from './chart/ChartSales.vue';
import { useNavigator } from 'src/stores/navigator';
import { useQuotationStore } from 'src/stores/quotations';
import { storeToRefs } from 'pinia';
import { useReportStore } from 'src/stores/report';
import { PaymentDataStatus } from 'src/stores/payment/types';
// NOTE: Variable
const navigatorStore = useNavigator();
const quotationStore = useQuotationStore();
const reportStore = useReportStore();
const { stats: quotationStats } = storeToRefs(quotationStore);
const { dataReportPayment } = storeToRefs(reportStore);
const state = reactive({
role: 'admin',
@ -46,6 +50,12 @@ onMounted(async () => {
quotationStats.value = Object.assign(quotationStats.value, ret);
console.log(quotationStats.value);
}
const retPayment = await reportStore.getReportPayment();
if (retPayment) {
dataReportPayment.value = retPayment;
}
});
</script>
<template>
@ -72,27 +82,32 @@ onMounted(async () => {
:dark="$q.dark.isActive"
text-size="10px"
:branch="[
{
icon: 'mdi-account-outline',
count: 0,
label: $t('dashboard.newComer'),
color: 'pink',
},
{
icon: 'material-symbols-light:receipt-long',
count: 0,
count:
(quotationStats.issued || 0) +
(quotationStats.accepted || 0) +
(quotationStats.paymentInProcess || 0) +
(quotationStats.paymentSuccess || 0) +
(quotationStats.processComplete || 0) +
(quotationStats.canceled || 0),
label: $t('dashboard.openQuotation'),
color: 'cyan',
},
{
icon: 'si:wallet-detailed-line',
count: 0,
count:
(quotationStats.paymentSuccess || 0) +
(quotationStats.processComplete || 0),
label: $t('dashboard.paidSales'),
color: 'light-yellow',
},
{
icon: 'fluent:money-hand-24-regular',
count: 0,
count:
(quotationStats.issued || 0) +
(quotationStats.accepted || 0) +
(quotationStats.paymentInProcess || 0),
label: $t('dashboard.pendingSales'),
color: 'light-purple',
},
@ -108,34 +123,57 @@ onMounted(async () => {
<div class="col-sm-8 col-12">
<ChartReceipt
class="full-height"
:summary="[45, 30, 10, 5]"
:summary="[
dataReportPayment.reduce(
(a, c) =>
a +
(c.data[PaymentDataStatus.Success] || 0) +
(c.data[PaymentDataStatus.Wait] || 0),
0,
),
dataReportPayment.reduce(
(a, c) => a + (c.data[PaymentDataStatus.Success] || 0),
0,
),
dataReportPayment.reduce(
(a, c) => a + (c.data[PaymentDataStatus.Wait] || 0),
0,
),
]"
:categories="
dataReportPayment.map((v) => v.month + ' / ' + v.year)
"
:series="[
{
name: $t('dashboard.receipt.total'),
data: [45, 78, 92, 34, 67, 89, 120, 150, 180, 200, 50],
data: dataReportPayment.map(
(v) =>
(v.data[PaymentDataStatus.Success] || 0) +
(v.data[PaymentDataStatus.Wait] || 0),
),
},
{
name: $t('dashboard.receipt.paid'),
data: [30, 50, 70, 20, 40, 65, 80, 130, 160, 190, 210],
data: dataReportPayment.map(
(v) => v.data[PaymentDataStatus.Success] || 0,
),
},
{
name: $t('dashboard.receipt.pending'),
data: [10, 25, 45, 30, 50, 60, 75, 95, 110, 130, 150],
},
{
name: $t('dashboard.receipt.cancel'),
data: [5, 20, 15, 25, 35, 40, 55, 70, 85, 100, 300],
data: dataReportPayment.map(
(v) => v.data[PaymentDataStatus.Wait] || 0,
),
},
]"
/>
</div>
<div class="col-sm-4 col-12">
<!-- <div class="col-sm-4 col-12">
<ChartOpportunity
class="full-height"
:labels="['1', '2', '3', '4', '5', '6', '7', '8']"
:series="[581, 389, 609, 581, 603, 600, 699, 347]"
/>
</div>
</div> -->
<div class="col-sm-4 col-12">
<ChartQuotationStatus
v-if="quotationStats"
@ -148,23 +186,21 @@ onMounted(async () => {
]"
:series="[
{
data: true
? []
: [
quotationStats.issued || 0,
quotationStats.accepted +
quotationStats.paymentInProcess +
quotationStats.paymentSuccess || 1,
quotationStats.processComplete || 1,
quotationStats.canceled || 1,
],
data: [
(quotationStats.issued || 0) +
(quotationStats.accepted || 0),
(quotationStats.paymentInProcess || 0) +
(quotationStats.paymentSuccess || 0),
quotationStats.processComplete || 0,
quotationStats.canceled || 0,
],
},
]"
/>
</div>
<div class="col-sm-8 col-12">
<!-- <div class="col-sm-8 col-12">
<ChartSales class="full-height" />
</div>
</div> -->
</article>
</div>
</section>