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

feat: integrate quotation statistics into dashboard and adjust layout for responsiveness

Browse source
This commit is contained in:
puriphatt 2025-03-05 16:00:14 +07:00 • committed by Methapon2001
parent 1c9874a9e7
commit 9a196b7077
1 changed files with 29 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -12,9 +12,13 @@ import ChartSales from './chart/ChartSales.vue';
// NOTE: Stores & Type // NOTE: Stores & Type
import { useNavigator } from 'src/stores/navigator'; import { useNavigator } from 'src/stores/navigator';
import { useQuotationStore } from 'src/stores/quotations';
import { storeToRefs } from 'pinia';
// NOTE: Variable // NOTE: Variable
const navigatorStore = useNavigator(); const navigatorStore = useNavigator();
const quotationStore = useQuotationStore();
const { stats: quotationStats } = storeToRefs(quotationStore);
const state = reactive({ const state = reactive({
role: 'admin', role: 'admin',
@ -36,6 +40,12 @@ const option = reactive({
onMounted(async () => { onMounted(async () => {
navigatorStore.current.title = 'dashboard.title'; navigatorStore.current.title = 'dashboard.title';
navigatorStore.current.path = [{ text: '' }]; navigatorStore.current.path = [{ text: '' }];
const ret = await quotationStore.getQuotationStats();
if (ret) {
quotationStats.value = Object.assign(quotationStats.value, ret);
console.log(quotationStats.value);
}
}); });
</script> </script>
<template> <template>
@ -95,7 +105,7 @@ onMounted(async () => {
<section class="col q-mt-md"> <section class="col q-mt-md">
<div class="full-height scroll"> <div class="full-height scroll">
<article class="row q-col-gutter-sm"> <article class="row q-col-gutter-sm">
<div class="col-md-8 col-12"> <div class="col-sm-8 col-12">
<ChartReceipt <ChartReceipt
class="full-height" class="full-height"
:summary="[45, 30, 10, 5]" :summary="[45, 30, 10, 5]"
@ -119,15 +129,16 @@ onMounted(async () => {
]" ]"
/> />
</div> </div>
<div class="col-md-4 col-12"> <div class="col-sm-4 col-12">
<ChartOpportunity <ChartOpportunity
class="full-height" class="full-height"
:labels="['1', '2', '3', '4', '5', '6', '7', '8']" :labels="['1', '2', '3', '4', '5', '6', '7', '8']"
:series="[581, 389, 609, 581, 603, 600, 699, 347]" :series="[581, 389, 609, 581, 603, 600, 699, 347]"
/> />
</div> </div>
<div class="col-md-4 col-12"> <div class="col-sm-4 col-12">
<ChartQuotationStatus <ChartQuotationStatus
v-if="quotationStats"
class="full-height" class="full-height"
:labels="[ :labels="[
$t('dashboard.quotation.waitCustomer'), $t('dashboard.quotation.waitCustomer'),
@ -135,10 +146,23 @@ onMounted(async () => {
$t('dashboard.quotation.complete'), $t('dashboard.quotation.complete'),
$t('dashboard.quotation.cancel'), $t('dashboard.quotation.cancel'),
]" ]"
:series="[{ data: [1, 2, 3, 4] }]" :series="[
{
data: true
? []
: [
quotationStats.issued || 0,
quotationStats.accepted +
quotationStats.paymentInProcess +
quotationStats.paymentSuccess || 1,
quotationStats.processComplete || 1,
quotationStats.canceled || 1,
],
},
]"
/> />
</div> </div>
<div class="col-md-8 col-12"> <div class="col-sm-8 col-12">
<ChartSales class="full-height" /> <ChartSales class="full-height" />
</div> </div>
</article> </article>