feat: enhance dashboard with new chart components and role/year selection

src/pages/15_dash-board/MainPage.vue

@@ -1,20 +1,149 @@
 <script lang="ts" setup>
 // NOTE: Library
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, reactive } from 'vue';
 
 // NOTE:  Components
+import SelectInput from 'src/components/shared/SelectInput.vue';
+import StatCardComponent from 'src/components/StatCardComponent.vue';
+import ChartReceipt from './chart/ChartReceipt.vue';
+import ChartOpportunity from './chart/ChartOpportunity.vue';
+import ChartQuotationStatus from './chart/ChartQuotationStatus.vue';
+import ChartSales from './chart/ChartSales.vue';
 
 // NOTE: Stores & Type
 import { useNavigator } from 'src/stores/navigator';
 
 // NOTE: Variable
-
 const navigatorStore = useNavigator();
 
+const state = reactive({
+  role: 'admin',
+  year: 'now',
+});
+
+// NOTE: mock
+const option = reactive({
+  role: [
+    { label: 'ผู้ดูแล', value: 'admin' },
+    { label: 'ผู้ใช้', value: 'user' },
+  ],
+  year: [
+    { label: 'ปีนี้', value: 'now' },
+    { label: '2024', value: '2024' },
+  ],
+});
+
 onMounted(async () => {
-  navigatorStore.current.title = 'report.title';
+  navigatorStore.current.title = 'dashboard.title';
   navigatorStore.current.path = [{ text: '' }];
 });
 </script>
-<template></template>
+<template>
+  <div class="column full-height no-wrap">
+    <header class="row q-gutter-sm">
+      <SelectInput
+        class="col-md-3 col"
+        :option="option.role"
+        v-model="state.role"
+      ></SelectInput>
+      <SelectInput
+        class="col-md-2 col"
+        :option="option.year"
+        v-model="state.year"
+      >
+        <template #prepend>
+          <q-icon name="mdi-calendar-outline app-text-muted" />
+        </template>
+      </SelectInput>
+
+      <div class="col-12 scroll">
+        <div style="display: inline-block">
+          <StatCardComponent
+            :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,
+                label: $t('dashboard.openQuotation'),
+                color: 'cyan',
+              },
+              {
+                icon: 'si:wallet-detailed-line',
+                count: 0,
+                label: $t('dashboard.paidSales'),
+                color: 'light-yellow',
+              },
+              {
+                icon: 'fluent:money-hand-24-regular',
+                count: 0,
+                label: $t('dashboard.pendingSales'),
+                color: 'light-purple',
+              },
+            ]"
+          />
+        </div>
+      </div>
+    </header>
+
+    <section class="col q-mt-md">
+      <div class="full-height scroll">
+        <article class="row q-col-gutter-sm">
+          <div class="col-md-8 col-12">
+            <ChartReceipt
+              class="full-height"
+              :summary="[45, 30, 10, 5]"
+              :series="[
+                {
+                  name: $t('dashboard.receipt.total'),
+                  data: [45, 78, 92, 34, 67, 89, 120, 150, 180, 200, 50],
+                },
+                {
+                  name: $t('dashboard.receipt.paid'),
+                  data: [30, 50, 70, 20, 40, 65, 80, 130, 160, 190, 210],
+                },
+                {
+                  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],
+                },
+              ]"
+            />
+          </div>
+          <div class="col-md-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 class="col-md-4 col-12">
+            <ChartQuotationStatus
+              class="full-height"
+              :labels="[
+                $t('dashboard.quotation.waitCustomer'),
+                $t('dashboard.quotation.inProgress'),
+                $t('dashboard.quotation.complete'),
+                $t('dashboard.quotation.cancel'),
+              ]"
+              :series="[{ data: [1, 2, 3, 4] }]"
+            />
+          </div>
+          <div class="col-md-8 col-12">
+            <ChartSales class="full-height" />
+          </div>
+        </article>
+      </div>
+    </section>
+  </div>
+</template>
 <style scoped></style>