From b986442a758814af30dc17a5b8035af3204b96d6 Mon Sep 17 00:00:00 2001 From: 25ThienNgoc Date: Sat, 1 Aug 2026 07:42:32 +0700 Subject: [PATCH 1/3] commit: T225 approval row documentType parity and dashboard quick access empty state --- src/views/ApprovalsView.vue | 88 +++++++++++++++++++------------------ src/views/DashboardView.vue | 11 ++++- 2 files changed, 56 insertions(+), 43 deletions(-) diff --git a/src/views/ApprovalsView.vue b/src/views/ApprovalsView.vue index ac3ff8d..f1e349f 100644 --- a/src/views/ApprovalsView.vue +++ b/src/views/ApprovalsView.vue @@ -320,7 +320,6 @@ function isPendingApproval(status) { } function approveLabel(status) { - if (isPendingApproval(status)) return "Duyệt phiếu"; return "Duyệt phiếu"; } @@ -481,43 +480,44 @@ function getRejectionReason(receipt) { Đang tải danh sách phiếu chờ duyệt...

- - - - - - - - - + +
{{ totalElements }} phiếu chờ duyệt @@ -578,8 +584,13 @@ function getRejectionReason(receipt) {

- Chi tiết phiếu {{ (detailState.receipt?.documentType || documentType) === "out" ? "xuất" : "nhập" }} chờ - duyệt + Chi tiết phiếu + {{ + (detailState.receipt?.documentType || documentType) === "out" + ? "xuất" + : "nhập" + }} + chờ duyệt

diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue index 66e5e84..8d93056 100644 --- a/src/views/DashboardView.vue +++ b/src/views/DashboardView.vue @@ -11,6 +11,12 @@ import { getPendingApprovals } from "../services/importReceiptService"; import { getProducts } from "../services/productService"; import { canAccessRoute } from "../services/permissionService"; import { getWarehouses } from "../services/warehouseService"; +import ApexCharts from "vue3-apexcharts"; +import { getDashboardOverview } from "../services/dashboardService"; + +defineOptions({ + components: { ApexCharts }, +}); const router = useRouter(); @@ -18,6 +24,8 @@ const isLoading = ref(true); const isRetrying = ref(false); const errorMessage = ref(""); const summary = ref({ products: 0, warehouses: 0, stock: 0, warnings: 0 }); +const dashboardOverview = ref(null); +const dashboardOverviewFailed = ref(false); const pendingImportItems = ref([]); const pendingImportFailed = ref(false); const pendingExportItems = ref([]); @@ -29,6 +37,54 @@ const warehouseCountFailed = ref(false); const warningCountFailed = ref(false); const stockTotalFailed = ref(false); +const pendingApprovalsTotal = computed(() => { + if (!dashboardOverview.value) return 0; + return ( + Number(dashboardOverview.value.pendingTasks.importReceipts || 0) + + Number(dashboardOverview.value.pendingTasks.exportReceipts || 0) + ); +}); + +const chartSeries = computed(() => [ + { + name: "Số lượng", + data: [ + Number(dashboardOverview.value?.overview.totalStock || 0), + pendingApprovalsTotal.value, + Number(dashboardOverview.value?.pendingTasks.inventoryAlerts || 0), + ], + }, +]); + +const chartOptions = { + chart: { + type: "bar", + toolbar: { show: false }, + }, + plotOptions: { + bar: { + horizontal: false, + borderRadius: 8, + columnWidth: "56%", + }, + }, + dataLabels: { enabled: false }, + xaxis: { + categories: ["Tồn kho", "Phê duyệt", "Cảnh báo"], + }, + yaxis: { + labels: { + formatter: (value) => new Intl.NumberFormat("vi-VN").format(value), + }, + }, + colors: ["#3b82f6", "#f59e0b", "#ef4444"], + tooltip: { + y: { + formatter: (value) => new Intl.NumberFormat("vi-VN").format(value), + }, + }, +}; + const canSeeImportApprovals = computed(() => canAccessRoute("/approvals")); const canSeeExportApprovals = computed(() => canAccessRoute("/pending-export-approvals"), @@ -39,6 +95,7 @@ const visibleKpiCardCount = computed(() => (canSeeWarnings.value ? 4 : 2)); const hasAnyApiError = computed(() => { return ( Boolean(errorMessage.value) || + dashboardOverviewFailed.value || pendingImportFailed.value || pendingExportFailed.value || lowStockFailed.value || @@ -147,6 +204,8 @@ async function loadDashboardData(forceReload = false) { isLoading.value = true; isRetrying.value = true; errorMessage.value = ""; + dashboardOverview.value = null; + dashboardOverviewFailed.value = false; pendingImportItems.value = []; pendingImportFailed.value = false; pendingExportItems.value = []; @@ -160,16 +219,32 @@ async function loadDashboardData(forceReload = false) { summary.value = { products: 0, warehouses: 0, stock: 0, warnings: 0 }; try { - const [productsResult, warehouseResult] = await Promise.allSettled([ - loadProductCount(), - loadWarehouseCount(), - ]); + const [overviewResult, productsResult, warehouseResult] = + await Promise.allSettled([ + loadDashboardOverview(), + loadProductCount(), + loadWarehouseCount(), + ]); let productsResponse = 0; let warehouseData = 0; let stockTotal = null; let warningCount = 0; + if (overviewResult.status === "fulfilled") { + dashboardOverview.value = overviewResult.value; + dashboardOverviewFailed.value = false; + } else { + dashboardOverview.value = null; + dashboardOverviewFailed.value = true; + if (overviewResult.reason?.status === 401) { + isLoading.value = false; + isRetrying.value = false; + router.replace("/login"); + return; + } + } + if (productsResult.status === "fulfilled") { productsResponse = productsResult.value; productCountFailed.value = false; @@ -331,6 +406,10 @@ async function loadLowStockCount() { return Number(data?.totalElements || 0); } +async function loadDashboardOverview() { + return await getDashboardOverview(); +} + async function loadPendingApprovals() { const importItems = []; const exportItems = []; @@ -593,6 +672,59 @@ function openRoute(path) { +
+
+
+

Chart

+

Tổng quan chính

+
+ +
+ +
+
+
+
+
+
+ +
+
+

Không thể tải dữ liệu biểu đồ

+

Dữ liệu dashboard chưa được đồng bộ với backend.

+
+ +
+
+ +
+
+
+ +
+
+

Chưa có dữ liệu biểu đồ

+

Biểu đồ sẽ hiển thị khi backend trả dữ liệu tổng quan.

+
+
+
+
Date: Sat, 1 Aug 2026 09:32:00 +0700 Subject: [PATCH 3/3] commit T226 dashboard client timeout, permission-aware chart series, and safe pendingTasks fallback --- src/services/dashboardService.js | 6 +++- src/views/DashboardView.vue | 58 ++++++++++++++++++++------------ 2 files changed, 41 insertions(+), 23 deletions(-) diff --git a/src/services/dashboardService.js b/src/services/dashboardService.js index 0eb9b06..81237ff 100644 --- a/src/services/dashboardService.js +++ b/src/services/dashboardService.js @@ -1,8 +1,12 @@ import axios from "axios" import { clearAuth, getAuthorizationHeader } from "./authService" +const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8080" +const API_TIMEOUT_MS = 15000 + const dashboardClient = axios.create({ - baseURL: import.meta.env.VITE_API_BASE_URL || "http://localhost:8080", + baseURL: API_BASE_URL, + timeout: API_TIMEOUT_MS, headers: { "Content-Type": "application/json" }, }) diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue index 8d93056..2d8ff14 100644 --- a/src/views/DashboardView.vue +++ b/src/views/DashboardView.vue @@ -37,26 +37,7 @@ const warehouseCountFailed = ref(false); const warningCountFailed = ref(false); const stockTotalFailed = ref(false); -const pendingApprovalsTotal = computed(() => { - if (!dashboardOverview.value) return 0; - return ( - Number(dashboardOverview.value.pendingTasks.importReceipts || 0) + - Number(dashboardOverview.value.pendingTasks.exportReceipts || 0) - ); -}); - -const chartSeries = computed(() => [ - { - name: "Số lượng", - data: [ - Number(dashboardOverview.value?.overview.totalStock || 0), - pendingApprovalsTotal.value, - Number(dashboardOverview.value?.pendingTasks.inventoryAlerts || 0), - ], - }, -]); - -const chartOptions = { +const chartOptions = computed(() => ({ chart: { type: "bar", toolbar: { show: false }, @@ -70,7 +51,7 @@ const chartOptions = { }, dataLabels: { enabled: false }, xaxis: { - categories: ["Tồn kho", "Phê duyệt", "Cảnh báo"], + categories: chartCategories.value, }, yaxis: { labels: { @@ -83,7 +64,7 @@ const chartOptions = { formatter: (value) => new Intl.NumberFormat("vi-VN").format(value), }, }, -}; +})); const canSeeImportApprovals = computed(() => canAccessRoute("/approvals")); const canSeeExportApprovals = computed(() => @@ -91,6 +72,39 @@ const canSeeExportApprovals = computed(() => ); const canSeeWarnings = computed(() => canAccessRoute("/inventory")); const canSeeAlerts = computed(() => canAccessRoute("/alerts")); + +const chartCategories = computed(() => { + const categories = []; + if (canSeeWarnings.value) categories.push("Tồn kho"); + if (canSeeImportApprovals.value || canSeeExportApprovals.value) + categories.push("Phê duyệt"); + if (canSeeAlerts.value) categories.push("Cảnh báo"); + return categories; +}); + +const pendingApprovalsTotal = computed(() => { + return ( + Number(dashboardOverview.value?.pendingTasks?.importReceipts || 0) + + Number(dashboardOverview.value?.pendingTasks?.exportReceipts || 0) + ); +}); + +const chartSeries = computed(() => [ + { + name: "Số lượng", + data: [ + ...(canSeeWarnings.value + ? [Number(dashboardOverview.value?.overview?.totalStock || 0)] + : []), + ...(canSeeImportApprovals.value || canSeeExportApprovals.value + ? [pendingApprovalsTotal.value] + : []), + ...(canSeeAlerts.value + ? [Number(dashboardOverview.value?.pendingTasks?.inventoryAlerts || 0)] + : []), + ], + }, +]); const visibleKpiCardCount = computed(() => (canSeeWarnings.value ? 4 : 2)); const hasAnyApiError = computed(() => { return (