Skip to content

Feature/t225 inventory dashboard layout - #63

Merged
ThienlocTran merged 7 commits into
devfrom
feature/T225-inventory-dashboard-layout
Jul 31, 2026
Merged

ThienlocTran merged 7 commits into
devfrom
feature/T225-inventory-dashboard-layout

Conversation

@25ThienNgoc

@25ThienNgoc 25ThienNgoc commented Jul 31, 2026 •

Copy link
Copy Markdown
Collaborator

chekc giúp tui

Summary by CodeRabbit

  • Tính năng mới

    • Bổ sung lọc phiếu nhập, phiếu xuất theo kho trong màn hình Phê duyệt.
    • Hiển thị rõ loại phiếu, trạng thái, lý do từ chối và các thao tác phù hợp.
    • Sidebar được sắp xếp theo nhóm, hỗ trợ cuộn và loại bỏ nhóm không có mục.
    • Dashboard bổ sung KPI, truy cập nhanh, cảnh báo tồn kho và trạng thái tải/lỗi/trống đồng nhất.
  • Cải tiến giao diện

    • Tối ưu bố cục responsive cho màn hình nhỏ.
    • Cải thiện hiển thị và trải nghiệm điều hướng trên dashboard.

@coderabbitai

coderabbitai Bot commented Jul 31, 2026 •

Copy link
Copy Markdown

Review Change Stack

📝 Walkthrough

Walkthrough

PR cập nhật quy trình phê duyệt phiếu nhập và phiếu xuất với bộ lọc kho. Sidebar chuyển sang menu theo nhóm. Dashboard dùng state-card và lưới responsive mới. CSS chung cập nhật bố cục cho màn hình nhỏ.

Changes

Quy trình phê duyệt

Layer / File(s) Summary
Bộ lọc kho cho dịch vụ phiếu
src/services/exportReceiptService.js, src/services/importReceiptService.js
Các hàm tải phiếu chờ xử lý nhận thêm warehouse và gửi tham số này khi có giá trị.
Giao diện và luồng phê duyệt
src/views/ApprovalsView.vue
Màn hình hỗ trợ lọc kho, phân biệt phiếu nhập/xuất, chống ghi đè bởi request cũ, hủy request chi tiết, xử lý duyệt/từ chối theo trạng thái và hiển thị lý do từ chối. CSS bổ sung giao diện responsive cho bộ lọc, bảng và modal.

Điều hướng responsive

Layer / File(s) Summary
Menu nhóm và bố cục sidebar
src/components/AppSidebar.vue, src/style.css
Sidebar hiển thị menu theo nhóm, lọc mục theo quyền, loại bỏ nhóm rỗng, hỗ trợ cuộn dọc và chuyển sang bố cục dọc trên màn hình nhỏ.

Dashboard

Layer / File(s) Summary
Khu vực dashboard và trạng thái dữ liệu
src/views/DashboardView.vue
Dashboard thay EmptyState bằng state-card, cập nhật KPI và sắp xếp phiếu chờ duyệt, cảnh báo, truy cập nhanh trong lưới mới.
Responsive dashboard
src/views/DashboardView.vue
Các tiêu đề, cảnh báo và danh sách chuyển sang bố cục phù hợp trên màn hình nhỏ.

Estimated code review effort: 4 (Complex) | ~60 minutes

Possibly related PRs

Suggested reviewers: thienloctran, tonfa137206

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed Tiêu đề mô tả rõ thay đổi chính về bố cục dashboard tồn kho và phù hợp với mục tiêu của pull request.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/T225-inventory-dashboard-layout

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/views/ApprovalsView.vue`:
- Around line 489-497: Use each record’s document type instead of the filter
state: in the row template, pass row.documentType to documentTypeBadgeClass and
documentTypeLabel; in the detail section, use detailState.receipt.documentType
for the badge and display “Khách hàng” instead of “Nhà cung cấp” when the type
is out, applying the same conditional label to the modal title.
- Around line 480-488: Update the DataTable rendering in ApprovalsView so it is
hidden whenever isLoading is true, preventing the empty state from appearing
alongside the loading message. Preserve the existing table and empty-text
behavior once loading completes.
- Around line 322-325: Update approveLabel to remove the redundant
isPendingApproval(status) conditional and return the single unchanged label
directly, preserving the current "Duyệt phiếu" result for every status.

In `@src/views/DashboardView.vue`:
- Around line 800-813: Bổ sung empty state cho section “Truy cập nhanh” khi
visibleQuickAccess không có phần tử do canAccessRoute lọc hết mục. Cập nhật
template quanh danh sách quick-links để hiển thị state-card--empty hoặc ẩn toàn
bộ section trong trạng thái này, đồng thời giữ nguyên danh sách hiện tại khi vẫn
có mục truy cập.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e59b164d-2805-457b-92bd-a6f777547200

📥 Commits

Reviewing files that changed from the base of the PR and between f13a14e and ded803d.

📒 Files selected for processing (6)
  • src/components/AppSidebar.vue
  • src/services/exportReceiptService.js
  • src/services/importReceiptService.js
  • src/style.css
  • src/views/ApprovalsView.vue
  • src/views/DashboardView.vue

Comment on lines 322 to 325
function approveLabel(status) {
if (isPendingApproval(status)) return 'Duyệt phiếu'
return 'Duyệt phiếu'
if (isPendingApproval(status)) return "Duyệt phiếu";
return "Duyệt phiếu";
}

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low value

approveLabel có nhánh vô nghĩa.

Hai nhánh trả về cùng một chuỗi. Bỏ nhánh điều kiện để tránh gây hiểu nhầm là nhãn thay đổi theo trạng thái.

♻️ Rút gọn
-function approveLabel(status) {
-  if (isPendingApproval(status)) return "Duyệt phiếu";
-  return "Duyệt phiếu";
-}
+function approveLabel() {
+  return "Duyệt phiếu";
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function approveLabel(status) {
if (isPendingApproval(status)) return 'Duyệt phiếu'
return 'Duyệt phiếu'
if (isPendingApproval(status)) return "Duyệt phiếu";
return "Duyệt phiếu";
}
function approveLabel() {
return "Duyệt phiếu";
}
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/views/ApprovalsView.vue` around lines 322 - 325, Update approveLabel to
remove the redundant isPendingApproval(status) conditional and return the single
unchanged label directly, preserving the current "Duyệt phiếu" result for every
status.

Comment on lines +480 to +488
<p v-if="isLoading" class="muted loading-line">
Đang tải danh sách phiếu chờ duyệt...
</p>

<DataTable :columns="columns" :rows="receipts" empty-text="Không có phiếu nào đang chờ duyệt">
<template #warehouseName="{ value }">{{ value || '-' }}</template>
<template #supplierName="{ value }">{{ value || '-' }}</template>
<template #createdByName="{ value }">{{ value || '-' }}</template>
<DataTable
:columns="columns"
:rows="receipts"
empty-text="Không có phiếu nào đang chờ duyệt"
>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Empty state hiện cùng lúc với loading.

Khi tải lần đầu, receipts rỗng nên DataTable hiển thị "Không có phiếu nào đang chờ duyệt" ngay bên dưới dòng "Đang tải...". Hãy ẩn bảng trong khi isLoading là true.

🩹 Patch
   <DataTable
+    v-if="!isLoading"
     :columns="columns"
     :rows="receipts"
     empty-text="Không có phiếu nào đang chờ duyệt"
   >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<p v-if="isLoading" class="muted loading-line">
Đang tải danh sách phiếu chờ duyệt...
</p>
<DataTable :columns="columns" :rows="receipts" empty-text="Không có phiếu nào đang chờ duyệt">
<template #warehouseName="{ value }">{{ value || '-' }}</template>
<template #supplierName="{ value }">{{ value || '-' }}</template>
<template #createdByName="{ value }">{{ value || '-' }}</template>
<DataTable
:columns="columns"
:rows="receipts"
empty-text="Không có phiếu nào đang chờ duyệt"
>
<p v-if="isLoading" class="muted loading-line">
Đang tải danh sách phiếu chờ duyệt...
</p>
<DataTable
v-if="!isLoading"
:columns="columns"
:rows="receipts"
empty-text="Không có phiếu nào đang chờ duyệt"
>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/views/ApprovalsView.vue` around lines 480 - 488, Update the DataTable
rendering in ApprovalsView so it is hidden whenever isLoading is true,
preventing the empty state from appearing alongside the loading message.
Preserve the existing table and empty-text behavior once loading completes.

Source: Path instructions

Comment on lines +489 to +497
<template #code="{ row, value }">
<div class="document-cell">
<span class="document-code">{{ value || "-" }}</span>
<span
class="badge doc-badge"
:class="documentTypeBadgeClass(documentType)"
>{{ documentTypeLabel(documentType) }}</span
>
</div>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Template đọc loại phiếu từ state filter thay vì từ dữ liệu bản ghi. Cả hai vị trí dùng documentType (biến của bộ lọc). Giá trị này đổi ngay khi người dùng chọn loại phiếu khác, còn dữ liệu đang hiển thị vẫn là dữ liệu cũ, nên nhãn và badge có thể sai. Dữ liệu đã mang sẵn documentType (gán ở dòng 142 và 202-204).

  • src/views/ApprovalsView.vue#L489-L497: đổi documentTypeBadgeClass(documentType) và documentTypeLabel(documentType) sang row.documentType.
  • src/views/ApprovalsView.vue#L620-L639: dùng detailState.receipt.documentType cho badge, và đổi nhãn "Nhà cung cấp" thành "Khách hàng" khi loại phiếu là out; áp dụng tương tự cho tiêu đề modal ở dòng 581-583.
📍 Affects 1 file
  • src/views/ApprovalsView.vue#L489-L497 (this comment)
  • src/views/ApprovalsView.vue#L620-L639
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/views/ApprovalsView.vue` around lines 489 - 497, Use each record’s
document type instead of the filter state: in the row template, pass
row.documentType to documentTypeBadgeClass and documentTypeLabel; in the detail
section, use detailState.receipt.documentType for the badge and display “Khách
hàng” instead of “Nhà cung cấp” when the type is out, applying the same
conditional label to the modal title.

Comment on lines +800 to 813
<div class="quick-links">
<button
v-for="item in visibleQuickAccess"
:key="item.title"
class="quick-link"
@click="openRoute(item.route)"
>
<i class="mdi" :class="item.icon"></i>
<span>
<strong>{{ item.title }}</strong>
<small>{{ item.description }}</small>
</span>
</button>
</div>

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Thêm empty state cho “Truy cập nhanh”.

Nếu canAccessRoute lọc hết mục, visibleQuickAccess là mảng rỗng và section chỉ hiển thị khoảng trống. Hiển thị state-card--empty hoặc ẩn toàn bộ section trong trường hợp này.

As per path instructions: "Kiểm tra loading, empty state, error state".

🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/views/DashboardView.vue` around lines 800 - 813, Bổ sung empty state cho
section “Truy cập nhanh” khi visibleQuickAccess không có phần tử do
canAccessRoute lọc hết mục. Cập nhật template quanh danh sách quick-links để
hiển thị state-card--empty hoặc ẩn toàn bộ section trong trạng thái này, đồng
thời giữ nguyên danh sách hiện tại khi vẫn có mục truy cập.

Source: Path instructions

@ThienlocTran
ThienlocTran merged commit 7b51677 into dev Jul 31, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants