Dashboard - Technical Map

Auto-generated bởi codebase-doc-generator ngày 2026-03-23 (verified từ code thực). Không chỉnh sửa thủ công.

Routes

Route	Path	Mục đích
ROUTE_SALES_DASHBOARD	/dashboard/sales	Dashboard doanh thu
ROUTE_CUSTOMER_DEBT_DASHBOARD	/dashboard/customer-debt	Dashboard công nợ khách hàng
ROUTE_CAMPAIGN_DASHBOARD	/dashboard/campaign	Dashboard chiến dịch
ROUTE_CUSTOMER_DASHBOARD	/dashboard/customer	Dashboard khách hàng
ROUTE_INVENTORY_DASHBOARD	/dashboard/inventory	Dashboard kho
ROUTE_LEAGUE_TABLES_DASHBOARD	/dashboard/league-tables	Dashboard bảng xếp hạng

Navigation & Permission

Item	Giá trị
MODULE_DASHBOARD	dashboard
Menu title	Thống kê
Parent menu moduleId	statistic
Shared permission builder	adminRoles()
adminRoles() scope	Toàn bộ groups trừ Pos và CallCenter
Submenu module IDs	revenue, customer_debt, statistic_campaign, customer, warehouse, rank_chart

FE Pages (6)

Page	File	Vai trò
SalesDashboard	pages/SalesDashboard.tsx	Sales cards + payment/revenue charts
CustomerDebtDashboard	pages/CustomerDebtDashboard.tsx	Debt cards + debt trend/by branch
CampaignDashboard	pages/CampaignDashboard.tsx	Campaign KPI cards + conversion/revenue
CustomerDashboard	pages/CustomerDashboard.tsx	Customer segmentation dashboard
InventoryDashboard	pages/InventoryDashboard.tsx	Inventory cards + 4 tabbed charts
LeagueTablesDashboard	pages/LeagueTablesDashboard.tsx	Ranking/revenue/task/violation dashboards

FE Components / Areas

Area	Components tiêu biểu
Shared chart primitives	LineChart, PieChart, BarChart, DashboardCardItem
Sales	SalesCards, OrderByTime, RevenueByBranch, RevenueByPaymentMethod, RevenuePercentageByPaymentMethod
Customer debt	DebtByTime, RestDebtByTime, DebtByBranch
Campaign	CampaignDashboardCard, OrderByCampaign, ConversionRateByCampaign, CampaignRevenueByBranch
Customer	CustomerCards, OrderByGender, OrderByAge, CustomerBySource, CustomerByOccupation, CustomerByGroup, CustomerByProvince, NewAndActiveCustomer, TotalCustomer
Inventory	SoldCosmetics, InventoryProducts, TransferOrders, CosmeticSales
League tables	BranchRevenue, BranchSalesRevenue, TechnicianRevenue, TelesalesRevenue, CustomerServiceRevenue, DepartmentRevenue, PointAndTourFee, ViolationRanking

GraphQL Operations

sales_dashboard.graphql

Operation	Mục đích
getSalesDashboardCard	Lấy sales cards tổng quan
getRevenueByPaymentMethod	Doanh thu theo phương thức thanh toán
getRevenuePercentageByPaymentMethod	Tỉ trọng doanh thu theo phương thức thanh toán
getOrderByTime	Số đơn theo thời gian
getRevenueByBranch	Doanh thu theo chi nhánh

customer_dept_dashboard.graphql

Operation	Mục đích
getCustomerDebtDashboardCard	Cards công nợ tổng quan
getCustomerDebtDashboardDebtByTime	Debt theo thời gian
getCustomerDebtDashboardRestDebtByTime	Dư nợ còn lại theo thời gian
getCustomerDebtDashboardDebtByBranch	Debt theo chi nhánh

campaign_dashboard.graphql

Operation	Mục đích
getDashboardCampaign	Cards chiến dịch tổng quan
getDashboardCampaignOrder	Đơn theo campaign
getDashboardCampaignRevenue	Doanh thu campaign
getDashboardCampaignConversionRate	Tỉ lệ chuyển đổi campaign

customer_dashboard.graphql

Operation	Mục đích
getDashBoardCustomerCard	Cards khách hàng tổng quan
getDashBoardCustomerGender	Cơ cấu giới tính
getDashBoardCustomerContactBook	Contact book theo thời gian
getDashBoardCustomerProvince	Phân bố tỉnh/thành
getDashBoardCustomerAge	Phân bố độ tuổi
getDashBoardCustomerSource	Khách hàng theo nguồn
getDashBoardCustomerActive	Active customer theo thời gian
getDashBoardCustomerOccupation	Khách hàng theo nghề nghiệp
getDashBoardCustomerGroup	Khách hàng theo nhóm

inventory_dashboard.graphql

Operation	Mục đích
getInventoryDashboardCard	Cards tồn kho/công nợ kho
getInventoryDashboardSoldCosmetic	Mỹ phẩm bán ra
getInventoryDashboardProduct	Tồn sản phẩm / cận date
getInventoryDashboardTransferOrder	Phiếu chuyển kho
getInventoryDashboardCosmeticSales	Doanh số mỹ phẩm theo user

league_table_dashboard.graphql

Operation	Mục đích
GetAccountRoleUsers	Lấy user theo role
GetDashBoardRevenue	Revenue stats theo user
GetDashBoardTask	Task stats theo user
getDashBoardBranchRevenue	Revenue stats theo branch
getDashBoardDepartmentTask	Point/tour fee theo phòng ban
getDashBoardViolationStaff	Vi phạm theo nhân viên
getDashBoardViolationBranch	Vi phạm theo chi nhánh

FE Runtime logic

Shared useDashboard.ts

Logic	Ghi chú
Default filter	thismonth với from/to dạng DD/MM/YYYY
Compare period	Tự tính kỳ trước bằng getComparedTime()
Range labels	getDisplayedRangeTime() build trục X theo day/month/year
Labels	Có helper ageLabels() và provinceLabels()
External dependency	Dùng getTimeRange() từ module projects

SalesDashboard.tsx

Logic	Ghi chú
Compare cards	Query cards cho current + compared period
Branch scope	Nếu không chọn branch thì dùng globalStore.currentBranches
Payment methods preload	Query payment methods, loại cod
Args builder	Convert from/to sang ISO day start/end

CustomerDebtDashboard.tsx

Logic	Ghi chú
Compare cards	Query current + compared debt cards
Time text	Dựng timeFilterText cho UI hiển thị kỳ filter vs kỳ so sánh
Shared branch gating	Fallback về branch scope hiện có của user

CampaignDashboard.tsx

Logic	Ghi chú
Filters	branches, campaigns, time, compare
Compare cards	Campaign dashboard card nhận cả current và compared filter
Branch init inconsistency	branches khởi tạo từ default scope, không restore từ userBehavior.branches

CustomerDashboard.tsx

Logic	Ghi chú
Master data preload	Load customer group, source, occupation khi mount
Compare cards	CustomerCards nhận current + compared filter
Dimension slices	Gender, age, source, occupation, group, province, active/new

InventoryDashboard.tsx

Logic	Ghi chú
Warehouse scope	Fallback về warehouse của các branch user đang thuộc
Compare cards	Query cards cho current + compared period
Tabbed charts	shownCharts điều khiển 4 tab chart inventory
Args builder	Truyền _warehouse_ids theo dạng string array literal {id1,id2}

LeagueTablesDashboard.tsx

Logic	Ghi chú
Multi-filters	branches, departments, paymentMethods, time
Chart tabs	8 chart/ranking types cố định từ LeagueTableDashboardCharts
Payment method filter	Query trực tiếp payment_method để build options
Label key anomaly	Dùng i18n key dashboard.label.chartTypes.inventory.${e} cho league charts

Constants / filter vocab

Constant	Ý nghĩa
DashboardOrderTypes	product_order_number, service_order_number, prepaid_order_number, all_order_number
OrderLabels	revenue_product, revenue_service, revenue_prepaid, total
CustomerTypes	new, active
InventoryDashboardCharts	sold_cosmeics, inventory_products, transfer_orders, cosmetic_sales
LeagueTableDashboardCharts	revenue_of_branch_sales, revenue_of_technician, point_and_tour_fee_of_technician, revenue_of_telesales, revenue_of_customer_service, revenue_of_branch, point_of_department, violation_ranking

Backend read models / Hasura functions

Ecommerce database

Nhóm	Ví dụ function/table
Sales	search_dashboard_sales_card, search_dashboard_sales_revenue, search_dashboard_sales_chart_order_by_time, search_dashboard_sales_chart_revenue_by_branch, search_dashboard_sales_chart_revenue_by_payment_method
Customer debt	search_dashboard_customer_debt_card, search_dashboard_customer_debt_chart_debt_by_time, search_dashboard_customer_debt_chart_rest_debt_by_time, search_dashboard_customer_debt_chart_debt_by_branch
Campaign	search_dashboard_campaign, search_dashboard_campaign_order, search_dashboard_campaign_revenue, search_dashboard_campaign_conversion_rate
Customer	search_dashboard_customer_card, search_dashboard_customer_contact_book, search_dashboard_customer_gender, search_dashboard_customer_age, search_dashboard_customer_source, search_dashboard_customer_group, search_dashboard_customer_occupation, search_dashboard_customer_province, search_dashboard_customer_active
Inventory	search_dashboard_inventory_card, search_dashboard_inventory_chart_sold_cosmetic, search_dashboard_inventory_chart_inventory_product, search_dashboard_inventory_chart_transfer_order, search_dashboard_inventory_chart_cosmetic_sales
League / violation	get_full_violation_dashboard_stats, dashboard_complaint_report, search_dashboard_report_employee

Project database

Nhóm	Function/table
Tour / task dashboard	search_dashboard_report_tour_income, search_dashboard_project_task_user_chart_by_day, search_dashboard_project_task_user_rating_chart_by_day

Default database

Nhóm	Function/table
Customer age read model	search_dashboard_customer_age, dashboard_customer_age

Domain coupling

Module/Domain	Kiểu liên kết
report	Cùng dùng read models tổng hợp; dashboard nghiêng về cards/charts nhanh
ecommerce	Nguồn chính cho sales, debt, campaign, customer, inventory
user	Branch, department, role, warehouse access scope
projects	Time-range helper bị import chéo; league tables dùng task/point/tour fee stats
crm	Một phần customer/contact/ticket dimensions đi qua read models tổng hợp

Rủi ro / Findings kỹ thuật

#	Note
1	Module gần như read-only hoàn toàn; không có backend service riêng cho dashboard logic, mà chủ yếu dựa trên Hasura functions/views đã materialize.
2	diva-admin/src/modules/dashboard/stores/useDashboardStore.ts hiện trống.
3	useDashboard.ageLabels() có dấu hiệu bug logic khi so tuổi bằng chênh lệch năm theo chiều ngược.
4	CampaignDashboard.tsx không restore branches từ userBehavior giống các page khác.
5	LeagueTablesDashboard.tsx dùng i18n namespace inventory cho labels chart league tables.
6	InventoryDashboardCharts chứa key typo sold_cosmeics, có thể kéo theo mismatch text/icon lookup.