aha

JPace Dự án aha

Không gian làm việc · dự án AH

Vận hành giao nhận

Bảng điều khiển hợp nhất: board, hàng đợi vấn đề và báo cáo tiến độ.

Chỉ việc của tôi Đang bật

Đồng bộ với cổng đối tác chạy lúc 02:00 mỗi ngày — số liệu trên board là bản chụp gần nhất.

3 vấn đề có hạn xử lý trong 24 giờ tới. Kiểm tra hàng đợi Ưu tiên cao.

API tính phí vượt cân trả về lỗi 502 trong 2 lần gọi gần nhất.

Bản phát hành 2.14 đã lên môi trường thử nghiệm

Bao gồm 24 thành phần giao diện BNN và bảng màu cam–navy.

Vấn đề đang mở

128

12 so với tuần trước

Hoàn thành trong tuần

46 vấn đề

9,4% so với tuần trước

Thời gian xử lý trung bình

18 giờ

Nhanh hơn 3 giờ

Tỉ lệ đúng hạn

92%

Mục tiêu 90%

Tuyến đang chạy

Chuyến liên tỉnh

Cảnh báo chưa xử lý

Nguyễn Thảo chuyển trạng thái sang Đang làm

Hôm nay · 09:12

Đã tách tuyến Quận 7 thành 2 chặng để đo thời gian giao thực tế trước khi tối ưu.
Trần Minh gán người phụ trách

Hôm qua · 17:40

Nhóm Vận hành nhận vấn đề AH-118, ước lượng 5 điểm.
Hệ thống tạo vấn đề từ biểu mẫu đối tác

12/10/2026 · 08:05

Nguồn: cổng đối tác · Mã AH-118

Tiếp nhận
Xử lý
Bàn giao

Sprint 24 · 14/10 → 28/10

Đang chạy

Mục tiêu: giảm thời gian giao trung bình xuống dưới 45 phút.

Tiến độ sprint62%

NT TM +2 9 vấn đề còn lại

Tuyến Quận 7

AH-118

Đo thời gian giao thực tế theo khung giờ trước khi chốt lịch trình.

Chặng

2 chặng · 11 điểm giao

Chậm nhất

Khung 18:00 (trễ 12 phút)

Cập nhật 09:12

Bảng công việc

4 cột · 14 thẻ · kéo thả mô phỏng, mỗi thẻ có tag, badge, avatar và mức ưu tiên.

Tìm trên board

Cần làm

Đang làm

Chờ duyệt

Hoàn thành

Hàng đợi vấn đề

Bảng 12 dòng · tìm kiếm, lọc trạng thái, sắp xếp, chọn nhiều và phân trang.

12 dòng

Tìm kiếm Không cần gõ dấu — “khuyen mai” vẫn khớp “Khuyến mãi”. Trạng thái Người phụ trách

Phạm vi

Chỉ quá hạn

Đang tắt

Sắp xếp

0 dòng đã chọn

Danh sách 12 vấn đề của dự án AH
Mã	Tiêu đề	Trạng thái	Ưu tiên	Phụ trách	Tiến độ	Hạn
AH-131	Chuẩn hoá mã tuyến giao cho đối tác	Cần làm	Cao	NTNguyễn Thảo	0%chưa bắt đầu	21/10
AH-129	Bổ sung mã bưu cục vào API đơn hàng	Cần làm	Trung bình	TMTrần Minh	15%đang phân tích	24/10
AH-127	Xuất báo cáo COD theo ngày	Cần làm	Thấp	LHLê Hân	0%trong backlog	02/11
AH-118	Tối ưu tuyến giao khu vực Quận 7	Đang làm	Cao	NTNguyễn Thảo	62%đang đo tuyến	18/10
AH-115	Đồng bộ trạng thái đơn sang kho đối tác	Đang làm	Cao	LHLê Hân	48%chậm 1 ngày	19/10
AH-113	Sửa lỗi tính phí vượt cân	Đang chặn	Cao	VAVũ An	35%quá hạn 4 giờ	17/10
AH-110	Thêm gợi ý địa chỉ khi tạo đơn	Đang làm	Trung bình	TMTrần Minh	70%chờ rà soát	23/10
AH-108	Bảng giá dịch vụ chuyển phát nhanh	Chờ duyệt	Trung bình	LHLê Hân	95%chờ ký duyệt	22/10
AH-105	Chính sách hoàn tiền COD	Chờ duyệt	Thấp	VAVũ An	100%chờ phê duyệt	28/10
AH-098	Chuẩn hoá log điều phối	Hoàn thành	Trung bình	NTNguyễn Thảo	100%đã nghiệm thu	14/10
AH-095	Bổ sung chỉ số giám sát	Hoàn thành	Trung bình	LHLê Hân	100%đã nghiệm thu	10/10
AH-102	Kế hoạch nâng cấp cổng đối tác	Chờ duyệt	Cao	TMTrần Minh	55%chờ duyệt kế hoạch	30/10

Báo cáo tiến độ

Số liệu tổng hợp 8 tuần gần nhất · biểu đồ thuần CSS, không thư viện.

Vấn đề tạo mới

6 so với kỳ trước

Vấn đề hoàn thành

12 so với kỳ trước

Điểm hoàn thành

156 điểm

+18,5%

Tồn đọng cuối kỳ

Ngưỡng cảnh báo 15

Khối lượng theo tuần

Tạo mới Hoàn thành

W38

W39

W40

W41

W42

W43

W44

W45

Tiến độ theo hạng mục

Vận hành giao nhận72%

Cổng đối tác48%

Tính phí & đối soát27%

Cơ cấu trạng thái (chồng đoạn)100%

Thông báo trạng thái (toast)

Đã đồng bộ 14 chuyến với cổng đối tác.

2 tuyến chưa gán tài xế cho khung 18:00.

Lỗi 502 khi gọi API tính phí vượt cân.

Trạng thái rỗng

Chưa có dữ liệu cho khoảng đã chọn

Kỳ 4 tuần gần nhất chưa ghi nhận vấn đề nào được đóng. Chọn khoảng 8 tuần hoặc quý để xem số liệu.

Đang tải (skeleton)

Cài đặt dự án

Biểu mẫu, công tắc chính sách, bộ chọn cỡ dịch vụ, avatar, danh sách key–value và bộ icon.

24/24 thành phần

Biểu mẫu

Tên dự án Hiển thị trên board, hàng đợi và báo cáo. Khu vực mặc định Mô tả ngắn Mã định danh dự án Mã chỉ gồm chữ in hoa, số và dấu gạch ngang (ví dụ AH-2026). Mã kế toán (khoá) Chỉ quản trị viên hệ thống đổi được.

Bộ chọn cỡ dịch vụ

Chính sách & thông báo

Tự động gán tuyến theo khu vực

Gửi email khi vấn đề quá hạn

Cho phép đối tác xem board

Bật chế độ kiểm tra chặt (không đổi được)

Avatar & nhóm

XSxs SMsm MDmd LGlg + ring XLxl + status

Chồng nhóm: NT TM LH +3

Thông tin key–value

Mã dự án

AH-2026

Chủ sở hữu

Nguyễn Thảo

Ngày bắt đầu

01/10/2026

Ngân sách tháng

420.000.000 ₫

Bộ icon (sprite nội trang)

home search filter bell calendar paperclip comment edit trash star lock refresh (spin)

Dòng thời gian hoạt động

Cập nhật cấu hình khu vực

14/10/2026 · 10:35

Thêm Quận 7 và Nhà Bè vào nhóm tuyến nội thành.
Bật tự động gán tuyến

08/10/2026 · 16:02

Thư viện thành phần AHA — lấy mẫu từ luồng vận hành thật

Bù phần còn thiếu so với thư viện thành phần của bản gương đã triển khai (màu · chữ · bán kính/bóng · thẻ request · điều hướng · chọn nhanh · gallery 21 màn). Toàn bộ dựng bằng lớp bnn-* / ah-* sẵn có, không thêm thư viện, không bundle; markup từng component vẫn nằm ở mục Danh mục component bên dưới. Số liệu request/màn đọc từ dữ liệu bắt qua MITM của app gốc (tên miền gốc đã được che).

1 · Tokens của theme

Màu — dải token `--bnn-color-*`

Đã đối chiếu với nguồn gốc: khớp giá trị 78 · lệch 7 (giữ thương hiệu AHA) · thiếu 13 — trong đó 5 vai trò màu biểu đồ đã được bổ sung thành --bnn-chart-1…5 (bnn-tokens.css).

133 token màu, mỗi dải 8 bước 00→70. Ô dưới đây tô bằng chính biến CSS nên là giá trị đang phục vụ.

Chàm (primary)

00 10 20 30 40 50 60 70

Xanh dương

00 10 20 30 40 50 60 70

Cyan

00 10 20 30 40 50 60 70

Xanh lá (ok)

00 10 20 30 40 50 60 70

Đỏ (err)

00 10 20 30 40 50 60 70

Tím

00 10 20 30 40 50 60 70

Trung tính

00 10 20 30 40 50 60 70

Chữ — thang `--bnn-fs-*` (SVN Gilroy)

Tiêu đề H1 — điều phối giao nhận--bnn-fs-h1 · 22px

Tiêu đề H2 — bảng công việc--bnn-fs-h2 · 18px

Tiêu đề H3 — nhóm vấn đề--bnn-fs-h3 · 15px

Thân — nội dung vấn đề, bảng, biểu mẫu--bnn-fs-body · 13.5px

Nhỏ — chú thích dưới ô nhập--bnn-fs-small · 12px

NHÃN — nhãn trường, chip trạng thái--bnn-fs-label · 11px

Mono — mã vấn đề AH-118, mã đơn, toạ độ--bnn-fs-mono · 11.5px

Bán kính · Bóng · Nhịp

r-6 r-10 r-12 r-14 r-pill

Bóng thẻ Bóng sheet/ngăn kéo

Nhịp (gap/padding) theme dùng theo bước 4·6·8·10·12·14·16·20·24 px — chưa token hoá, khối này đo lại từ chính trang.

Dải màu biểu đồ `--bnn-chart-1…5`

5 vai trò màu lấy từ rip nguồn gốc, map sang bảng màu AHA. Cột dưới đây tô bằng chính token nên đổi token là đổi cả biểu đồ.

Loại dịch vụchart-1 Tuyến giaochart-2 Hoàn tấtchart-3 Chờ xử lýchart-4 Quá hạnchart-5

2 · Thẻ request — dữ liệu bắt được từ bản gương

134 endpoint JSON bắt được trong phiên MITM; sáu endpoint lớn nhất in ở đây (phương thức · đường dẫn · mã trạng thái · kích thước · kiểu nội dung).

GET/web/statistics/service_types?from_time=1791997200&to_time=1792083599

api.<gốc>200945 KBapplication/json

GET/api/v3/public/master-data/user-category?format=list

api.<gốc>20036 KBapplication/json

GET/web/firebase/remote_config

api.<gốc>20010 KBapplication/json

GET/api/v3/private/subscriptions

api.<gốc>20010 KBapplication/json

GET/api/v3/private/payment/customers/methods/order?delivery_types=NATIONWIDE

api.<gốc>2006 KBapplication/json

POST/v4/auth/verify

api.<gốc>2005 KBapplication/json

3 · Điều hướng & tiến trình

Breadcrumb

Dùng ở đầu trang chi tiết để giữ ngữ cảnh dự án → bảng → vấn đề.

Phân trang

Cùng lớp với phân trang thật của hàng đợi vấn đề (nút đang xem nền navy).

Thanh bước

1Nhận đơn

2Điều phối

3Đối soát COD

Tiến độ tuyến

Điểm giao hoàn tất9/11

Tỉ lệ trễ khung giờ18%

4 · OTP & lựa chọn nhanh

Mã OTP 6 ô

Tự nhảy ô, dán cả mã cũng được; dùng ở 27 trang xác thực auth-*.

Chọn nhanh cỡ kiện (số đo thật)

Chọn nhanh bằng chip cũng có: Địa chỉ đã lưu6 Tài xế yêu thích3 Kho gần nhất2

5 · Gallery — 21 màn của bản gương

Mỗi thẻ mở bản HTML tĩnh đã render sẵn của đúng màn đó (không cần đăng nhập). Khung giờ là lúc bắt được flow trong phiên MITM. Trang AHA tương ứng để đối chiếu phong cách: tổng quan · bảng công việc · hàng đợi · báo cáo · đăng nhập · danh sách.

s01 · Đặt đơnChuyển nhà / giao hàng/house-moving15:36:29 → 15:36:44 · 86 request s02 · Tài khoảnĐăng nhập OTP/sign-in15:36:30 → 15:37:57 · 249 request s03 · Đặt đơnGiao hàng liên tỉnh/nationwide15:37:43 → 15:38:02 · 20 request s04 · Đặt đơnXe tải/truck15:37:48 → 15:38:11 · 30 request s05 · ROBảng điều khiển đơn (RO)/v3/ro15:37:57 → 15:38:41 · 28 request s06 · ROTối ưu tuyến giao/v3/ro/optimize15:38:27 → 15:38:45 · 13 request s07 · ROXác nhận đơn/v3/ro/confirm-order15:38:31 → 15:39:38 · 41 request s08 · Đặt đơnTrang chủ/15:39:24 → 15:39:45 · 51 request s09 · Đơn hàngQuản lý đơn/records15:39:31 → 15:39:51 · 51 request s10 · Đơn hàngĐơn chờ xác nhận/records?status=CONFIRMING15:39:37 → 15:39:52 · 40 request s11 · Đơn hàngĐơn đã huỷ/records?status=CANCELLED15:39:38 → 15:40:34 · 30 request s12 · Đơn hàngĐơn nháp/draft-order15:40:20 → 15:41:35 · 27 request s13 · Tài khoảnSố dư / nạp tiền/balance15:41:21 → 15:41:45 · 18 request s14 · Doanh nghiệpDoanh nghiệp/business15:41:31 → 15:41:46 · 15 request s15 · Doanh nghiệpNhân viên/business/employees15:41:32 → 15:41:50 · 19 request s16 · Doanh nghiệpThống kê/statistics15:41:36 → 15:42:06 · 14 request s17 · Tài khoảnĐiểm thưởng AhaXu/rewards15:41:52 → 15:42:12 · 17 request s18 · Tài khoảnGói dịch vụ/subscriptions15:41:58 → 15:42:21 · 26 request s19 · Tài khoảnGiới thiệu bạn bè/referral15:42:07 → 15:42:23 · 23 request s20 · Hỗ trợTrung tâm hỗ trợ/help-center15:42:09 → 15:42:25 · 24 request s21 · Phân tíchAudience / tệp khách hàng/audience15:42:11 → 15:43:53 · 50 request

6 · Lịch chọn ngày & giờ, ô chọn, sheet chọn danh sách (đối chiếu bản gương)

Bản gương AhaMove (20 màn dựng từ phiên MITM, host demo chạy thật) dùng lịch react-day-picker + bánh xe giờ trong ngăn kéo đáy cho “Hẹn giờ lấy hàng”, ô chọn có tiền tố quốc gia ở màn đăng nhập, và sheet chọn danh sách 1-chọn/nhiều-chọn cho “Xuất dữ liệu”/“Tags”. Bốn mục dưới đây bù đúng phần đó bằng token của bnn-tokens.css (0 mã màu rời), không thêm thư viện, không bundle. Bằng chứng DOM: docs/evidence/aha-controls/targets-*.html, signin-otp.json, mirror-chunks.txt.

A · Lịch chọn ngày `.aha-cal`

10/2026

28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8

Giờ lấy hàng đã chọn05 : 30

.aha-cal · .aha-cal__day.is-on · .aha-cal__day.is-today · .aha-cal__day.is-out · :disabled

B · Chọn giờ (bánh xe 2 cột) `.aha-time`

.aha-time__col · .aha-time__item.is-on — cuộn dọc, mục đang chọn canh giữa

Bản gương: cùng khối này nằm trong ngăn kéo đáy role="dialog" của sheet “Hẹn giờ lấy hàng” (DOM bắt được ở targets-s01-hengio.html).

C · Ô chọn + mã quốc gia `.aha-select`

+84

.aha-select · .aha-select__cc · .aha-select__field · .aha-select__chev

Đúng cặp “tiền tố quốc gia + ô nhập” của màn /sign-in bản gương (role="combobox" + +84; xem signin-otp.json).

D · Sheet chọn danh sách (1 chọn · nhiều chọn) `.aha-pick`

Hẹn giờ lấy hàng Chủ động chọn lúc tài xế đến lấy hàng

10/2026

28 29 30 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 1 2 3 4 5 6 7 8

.aha-pick--one (role=radio) · .aha-pick--many (checkbox) · .aha-pick__foot (Huỷ/Lưu) · .aha-pick__inner (lịch + giờ)

Khổ hẹp (≤640px): chỉ offset/giới hạn theo viewport — không bỏ phần tử nào (xem §E trong assets/css/aha-ctrl2.css và số đo trước→sau trong docs/evidence/aha-controls/report.md).

C1 · Băng trượt (carousel/slider) + chấm phân trang — đối chiếu gương s17

.cmp-slider · .cmp-slider__track · .cmp-slide · .cmp-slide__card · .cmp-dots · .cmp-dot · .cmp-strip

Bản gương dùng băng trượt ngang ở màn s17 “Điểm thưởng AhaXu”: swiper-wrapper · swiper-slide ×12 · swiper-pagination (chấm) · swiper-free-mode — 17 phần tử đo bằng CDP. Trong 22 nhóm control/component đối chiếu (Danh mục component · Thư viện thành phần · Control bổ sung) thì đây là nhóm duy nhất còn thiếu: trước khối này aha.html có 0 phần tử swiper/carousel/slider. Chỉ thêm, không sửa mục cũ; số đo trước→sau ở docs/evidence/cmp-close/matrix-*.tsv + report.md.

Ngày 1+5 Xu5 Xu

Ngày 2+5 Xu5 Xu

Ngày 3+7 Xu7 Xu

Ngày 4+7 Xu7 Xu

Ngày 5+20 XuQuà 20K

Ngày 6+40 XuQuà 40K

Biến thể cuộn tự do (free-mode) — dải không bắt điểm, kèm ô số liệu như băng “Tất cả · Mã giao hàng · Dịch vụ” của gương:

Xe máy68 %
Xe tải22 %
Đường dài10 %
Tài xế trực14

Danh mục component đầy đủ — đối chiếu census 279

Mục này bù các component mà census đếm được nhưng aha.html chưa có: 24 component chuẩn (data-cmp) lấy nguyên từ apps-bnn-components.html; 49 component Ads Manager từ apps-ads-campaigns.html cộng cấu trúc do jira-ads.js / jira-datepicker.js sinh ra; 34 lớp bnn-* chỉ có trong CSS của skin. Chỉ bổ sung — không sửa phần đã có của trang.

1. Nút

.bnn-btn · --primary/--navy/--ghost/--danger · --sm/--lg · --loading/--block

Bốn biến thể màu, ba kích thước, trạng thái vô hiệu và đang xử lý (spinner `::after`). Dùng ở: mọi toolbar · footer hộp thoại · biểu mẫu.

2. Thẻ trạng thái

.bnn-tag · --ok/--warn/--err/--info · --act

Nhãn lozenge kèm chấm màu theo trạng thái; bản `--act` bấm được để lọc nhanh. Dùng ở: danh sách đơn · chi tiết đơn · bảng quản trị.

Đã giao Chờ tài xế Đang xử lý Thất bại Bản nháp

3. Chip lọc và huy hiệu số

.bnn-chip · __n · __x · --on · .bnn-badge · --navy/--primary/--dot/--act

Chip lọc có bộ đếm + nút xoá, huy hiệu số và nhãn nhỏ cho số thông báo. Dùng ở: bộ lọc danh sách · sidebar · tab chi tiết.

99+ Mới 5

4. Thẻ nội dung

.bnn-card · __head/__title/__sub/__body/__foot · --flat/--link

Khối dashboard, cột board và panel tóm tắt; `--flat` cho nền chìm, `--link` cho thẻ mở được. Dùng ở: dashboard · board kanban · tóm tắt đơn.

Đơn giao hàng

Đã giao

BN-240916-10428 · 16/10/2026 · 15:37

Tài xế Nguyễn Văn An · 12,4 km · 78.000 ₫

Chi tiết Nhận đơn

Cột cần xử lý

Cập nhật 15:40

3 đơn quá hạn SLA · 1 đơn khiếu nại

5. Bảng dữ liệu

.bnn-table-wrap · .bnn-table · .bnn-num · .bnn-mono

Đầu bảng dính (sticky), hàng cao 40 px, cột số canh phải, mã đơn dùng chữ đẳng khoảng. Dùng ở: danh sách đơn · người dùng · nhật ký quản trị.

Đơn hàng hôm nay — dữ liệu mẫu
Mã đơn	Khách hàng	Dịch vụ	Tài xế	Cước	Trạng thái
BN-240916-10428	Trần Thị Bích	Xe máy · Giao hàng	Nguyễn Văn An	78.000 ₫	Đã giao
BN-240916-10427	Lê Quang Bảo	Xe tải · 1,25 tấn	Trần Đình Nam	640.000 ₫	Đã giao
BN-240916-10426	Phạm Thu Hà	Xe máy · Đi chợ hộ	—	96.500 ₫	Chờ tài xế
BN-240916-10424	Vũ Minh Tuấn	Xe tải · 2 tấn	Lê Quang Bảo	1.240.000 ₫	Đang xử lý
BN-240916-10421	Đỗ Thị Lan	Xe máy · Thực phẩm	—	0 ₫	Thất bại

6. Biểu mẫu

.bnn-field · __label/__req/__hint/__err · --error

Input, select, textarea với nhãn, gợi ý, dấu bắt buộc và trạng thái lỗi (viền đỏ + nền nhạt). Dùng ở: tạo đơn · cài đặt · màn quản trị.

Số điện thoại* Dùng để liên hệ với tài xế

Địa chỉ lấy hàng Bắt buộc — chưa nhập địa chỉ.

Dịch vụ

Ghi chú mặc định Tối đa 200 ký tự

7. Chuyển chế độ

.bnn-seg · .bnn-seg-btn · hook `data-bnn-seg`

Segmented một-chọn: ô đang chọn là bề mặt đặc chữ sáng; `bnnUI` phát sự kiện `bnn:seg`. Dùng ở: đổi loại xe · đổi chế độ xem board/list/timeline.

Đang chọn: Xe máy

8. Các bước

.bnn-steps · .bnn-step · .bnn-step-line · is-done/is-now

Thanh 1-2-3 với bước đã xong (đặc) và bước đang làm (viền accent). Dùng ở: wizard tạo đơn · luồng onboarding.

1Nhập thông tin

2Cài đặt tối ưu

3Kiểm tra đơn hàng

Bước 1 đã xong, đang ở bước 2 — chưa cấu hình điểm giao.

9. Tab

.bnn-tabs · .bnn-tab · hook `data-bnn-tabs`

Tab gạch chân 2 px; `bnnUI` gán `role=tab`/`aria-selected` và ẩn/hiện `tabpanel` theo `aria-controls`. Dùng ở: chi tiết đơn (Thông tin/Lịch sử) · màn quản trị.

Người nhận: Trần Thị Bích · 0905 112 334
Điểm giao: 12 Nguyễn Huệ, Quận 1, TP.HCM
Cước: 78.000 ₫

10. Công tắc

.bnn-switch > input + span · hook `data-bnn-switch`

Công tắc 46×26, núm 20 px; có biến thể lỗi (`is-err`) và trạng thái vô hiệu. Dùng ở: chính sách · thông báo · cài đặt.

Thông báo đơn mới

Tự động nhận đơn gần nhất

Khoá tài khoản khi quá hạn mức (đang bật — cần kiểm tra)

Chế độ thử nghiệm (khoá bởi quản trị)

Trạng thái gần nhất: chưa đổi

11. Mã OTP 6 ô

.bnn-otp · .bnn-otp-cell · hook `data-bnn-otp`

Sáu ô 46×54 px, tự nhảy ô khi nhập, dán cả mã cũng được, phát `bnn:otp` khi đủ 6 ký tự. Dùng ở: 27 trang xác thực `auth-*`.

Mã đã nhập: —

Dán cả mã 6 số vào ô bất kỳ cũng được — `bnnUI` tự rải ký tự vào các ô.

12. Chọn kích thước

.bnn-sizes · .bnn-size · .bnn-size-label/.bnn-size-sub

Thẻ chọn cỡ S→2XL kèm kích thước kiện hàng thật (cm). Dùng ở: form dịch vụ · cài đặt đơn.

13. Thông báo nổi

.bnn-toast · -ic/-x · .bnn-toast-stack · hook `data-bnn-toast`

Toast trạng thái ok/warn/err/info; nút demo gọi `bnnUI.toast()` chèn vào `.bnn-toast-stack`. Dùng ở: lưu thiết lập · lỗi mạng · cảnh báo hạn mức.

✓Đã lưu thiết lập đơn hàng

!Thiếu địa chỉ lấy hàng

iĐang đồng bộ với máy chủ…

✕Không kết nối được tài xế

14. Sheet đáy và hộp thoại

.bnn-sheet · -panel/-grab/-head/-body/-foot · .bnn-modal · -card/-head/-body/-foot · hook `data-bnn-open`

Bottom sheet và hộp thoại có scrim; mở/đóng bằng `data-bnn-open` / `data-bnn-close`, có trap focus + phím Esc. Dùng ở: chi tiết đơn · bộ lọc · xác nhận xoá.

15. Ngăn kéo chi tiết

.bnn-drawer · -scrim/-panel/-head/-title/-body/-foot/-close · --drawer-left/--drawer-bottom

Panel trượt phải (mặc định), trái (`bnn-drawer-left`) hoặc từ đáy (`bnn-drawer-bottom`). Dùng ở: panel chi tiết · nhật ký kiểm toán.

16. Trạng thái rỗng

.bnn-empty · -icon/-title/-text/-actions

Khối rỗng có icon tròn, tiêu đề, mô tả và hành động gợi ý. Dùng ở: board rỗng · hộp thư rỗng · tìm 0 kết quả.

Không có đơn nào khớp

Đang lọc “Chờ tài xế” trong 24 giờ qua. Bỏ bộ lọc hoặc mở rộng khoảng thời gian.

Cột cần xử lý đang trống

Không còn đơn quá hạn SLA nào ở khu vực Tân Bình.

17. Ảnh đại diện

.bnn-avatar · -ini/-xs/-sm/-lg/-xl/-stack/-more/-status/-ring

Avatar chữ cái đầu (không dùng ảnh), chồng nhóm, chấm trạng thái và viền thương hiệu. Dùng ở: người nhận · người tạo · thành viên nhóm.

NA TB LB TH MT NA

NA TB LB +3 Nhóm giao hàng Tân Bình — 6 thành viên

18. Khung chờ

.bnn-skel · -text/-title/-line/-circle/-rect/-card/-wave

Skeleton giữ đúng bố cục khi dữ liệu đang tải, có hiệu ứng sóng (tắt khi `prefers-reduced-motion`). Dùng ở: danh sách đang tải · thẻ KPI đang tải.

Đang tải danh sách đơn — khung chờ giữ đúng bố cục để CLS không nhảy.

19. Chỉ số KPI

.bnn-kpi · .bnn-stat · -grid/-label/-value/-unit/-delta/-up/-down/-icon

Ô chỉ số lớn với delta tăng/giảm, và biến thể stat có icon tròn. Dùng ở: dashboard · báo cáo · màn quản trị.

Đơn hôm nay

1.284 đơn

▲ 12,4% so với hôm qua

Giao đúng hạn

96,8%

▼ 0,6 điểm so với tuần trước

Tài xế xe máy online

312

Xe tải đang chạy

20. Danh sách khoá–giá trị

.bnn-kv · .bnn-kv-grid · .bnn-kv-row · .bnn-kv-k/__v/__mono

Hai kiểu: lưới `dl` (nhãn–giá trị) và danh sách hàng có đường kẻ cho panel chi tiết. Dùng ở: chi tiết đơn · hồ sơ · màn quản trị.

Mã đơn: BN-240916-10428
Dịch vụ: Xe máy · Giao hàng
Khoảng cách: 12,4 km
Cước: 78.000 ₫

Người nhậnTrần Thị Bích · 0905 112 334

Điểm lấyKho Tân Bình, 45 Trường Chinh

Điểm giao12 Nguyễn Huệ, Quận 1, TP.HCM

Thanh toánVí BNN · đã thu

21. Dòng thời gian

.bnn-timeline · .bnn-tl-item/-dot/-title/-time/-meta/-body

Trục dọc có chấm mốc cho lịch sử hoạt động và nhật ký. Dùng ở: lịch sử đơn · nhật ký kiểm toán.

Tạo đơn

15:12 · 16/10/2026

Kênh app · khách Trần Thị Bích

Đơn xe máy 12,4 km, cước tạm tính 78.000 ₫.
Tài xế nhận đơn

15:24 · 16/10/2026

Nguyễn Văn An · 0905 112 334
Giao thành công

15:37 · 16/10/2026

Đúng hạn · khách xác nhận qua OTP

22. Thanh tiến độ

.bnn-bar · -head/-label/-track/-fill · --ok/--warn/--err · -stack/-seg

Thanh tiến độ có nhãn %, biến thể màu theo ngưỡng và dạng chồng nhiều đoạn. Dùng ở: tiến độ epic · khối lượng tài xế · hạn mức.

Tiến độ giao đơn18/24 điểm

Hạn mức COD hôm nay82%

Đơn quá hạn SLA3/40 đơn

Cơ cấu dịch vụ (chồng đoạn)100%

23. Biểu tượng

.bnn-ic · -sm/-lg/-xl · -inline/-muted/-navy/-orange/-spin · sprite ``

39 biểu tượng nét 24×24 nằm trong sprite tự chứa inline — 0 request phát sinh. Dùng ở: mọi màn (thay bộ icon Atlassian).

Nhà

Tìm kiếm

Bộ lọc

Thêm

Đóng

Xong

Mở rộng

Sang phải

Người dùng

Nhóm người

Lịch

Thời gian

Thông báo

Thư

Tệp đính kèm

Bình luận

Sửa

Xoá

Tải xuống

Tải lên

Mở liên kết

Cài đặt

Thư mục

Tệp

Đánh dấu

Tuỳ chọn khác

Làm mới

Thông tin

Cảnh báo

Yêu thích

Khoá

Danh sách

Lưới

Đăng xuất

Xe tải

Xe máy

Biểu đồ

Chạy

Xem

24. Băng cảnh báo

.bnn-alert · --info/--ok/--warn/--err/--banner · __ic/__msg/__close/__title/__actions

Băng thông tin/cảnh báo/lỗi có viền trái theo màu trạng thái, nút đóng và biến thể banner có hành động. Dùng ở: thông báo cập nhật · cảnh báo hạn mức · lỗi kết nối.

Cập nhật: bảng cước mới áp dụng từ 16/10/2026.

Xong: đã đồng bộ 1.284 đơn lên máy chủ.

Cảnh báo: 3 đơn quá hạn SLA ở khu vực Tân Bình.

Lỗi: không kết nối được máy chủ điều phối.

6 màn lõi dùng bộ component này

apps-jira-list.html · apps-projects-backlog.html · apps-projects-timeline.html · apps-projects-team-board.html · apps-issue-tracker.html · admin-workspace.html

Mỗi màn được phủ lại bằng chính các component ở trên — bấm để mở trang thật.

Ads Manager — bảng hiệu quả, biểu đồ, bộ chọn ngày, menu cột

Bảng 13 cột + dòng nhóm + dòng tổng, cột sắp xếp (ads-sort), công tắc bật/tắt (ads-toggle), ô số hai tầng (ads-cell2), delta (ads-cmp), chấm phân phối (ads-dot), hành động theo dòng (ads-rowact).

Thời gian cập nhật: vừa xong

Phổ biến

Kết quả

Chi phí trên mỗi kết quả

Ngân sách

Đang tải cột tuỳ chỉnh…

Chiến dịch

Nhóm quảng cáo

Quảng cáo

Biểu đồ hiệu quả Đã chi tiêuKết quả

13 Th7

17 Th7

21 Th7

25 Th7

29 Th7

2 Th8

6 Th8

11 Th8

	Chiến dịch▲▼	Phân phối▲▼	Hành động▲▼	Kết quả▲▼	Chi phí trên mỗi kết quả▲▼	Ngân sách▲▼	Số tiền đã chi tiêu▲▼	Lượt hiển thị▲▼	Người tiếp cận▲▼	Kết thúc▲▼
Tháng 8, 2026 5 chiến dịch
	Khuyến mãi tháng 8	Đang chạy	—	1.240Lượt nhấp▲ 12% · trước 1.104	12.500 ₫Trên mỗi lượt nhấp	500.000 ₫Hàng ngày	3.200.000 ₫	184.000	96.500	31 Th8, 2026	7 ngày nhấp, 1 ngày xem	Chi phí thấp nhất
	Ra mắt sản phẩm mới	Đang tìm hiểu	—	860Lượt xem video▲ 6% · trước 811	8.900 ₫Trên mỗi lượt xem	300.000 ₫Hàng ngày	1.850.000 ₫	121.000	74.300	Đang diễn ra	7 ngày nhấp, 1 ngày xem	Chi phí thấp nhất
	Remarketing giỏ hàng	Đang chạy	—	2.310Lượt mua▼ 3% · trước 2.381	24.300 ₫Trên mỗi lượt mua	800.000 ₫Trọn đời	5.600.000 ₫	310.500	158.200	Đang diễn ra	7 ngày nhấp, 1 ngày xem	Chi phí thấp nhất
	Tin nhắn tư vấn	Lỗi thanh toán	—	45Tin nhắn trả lời▼ 18% · trước 55	45.000 ₫Trên mỗi tin nhắn	150.000 ₫Hàng ngày	202.500 ₫	8.900	5.100	Đang diễn ra	7 ngày nhấp, 1 ngày xem	Chi phí thấp nhất
	Livestream cuối tuần	Đã tắt	—	675Lượt tương tác▲ 2% · trước 662	5.400 ₫Trên mỗi tương tác	250.000 ₫Hàng ngày	1.420.000 ₫	96.700	61.800	Đang diễn ra	7 ngày nhấp, 1 ngày xem	Chi phí thấp nhất
	Tổng cộng5 chiến dịch			5.130	—	2.000.000 ₫	12.272.500 ₫	721.100	396.000

Không tìm thấy chiến dịch nào Không có kết quả khớp bộ lọc và từ khoá hiện tại. Thử xoá bớt điều kiện lọc.

3 chiến dịch đang chọn

Lớp skin bnn-override — ngăn kéo chi tiết vấn đề, trạng thái kéo–thả, ô quản trị

Các lớp dưới đây chỉ có trong bnn-override.css / bnn-components.css (chưa trang nào dùng tĩnh). Markup dựng đúng theo selector của chính file CSS đó; dữ liệu mẫu lấy từ luồng giao nhận của bản gương (mã đơn, tài xế, tuyến).

Trạng thái kéo–thả bảng công việc (`jira-tl-lane` · `bnn-drop-` · `bnn-col-` · `bnn-card-dragging`)

Cần làm

AH-118 · Tối ưu tuyến giao Quận 7
AH-119 · Ghép chuyến xe tải Nhà Bè
AH-120 · Đối soát COD (đang kéo → mờ 40%)

Cột này đang trống Kéo thẻ vào đây để bắt đầu

Ô quản trị (`#admin-root`: `bnn-cell` · `bnn-tree` · `bnn-truncate` · `bnn-field--row`)

Mã đơn Mã đơn không tồn tại trong hệ thống

Đối tượng	Đường dẫn	Trạng thái
Nguyễn Văn An — điều phối tuyến Quận 7	Vận hành / Tuyến / Quận 7	Đang chạy
Trần Bảo — tài xế xe tải tuyến Nhà Bè	Vận hành / Tuyến / Nhà Bè	Chờ duyệt

Chồng thông báo nổi (`bnn-toast-stack`) và mã OTP có con trỏ (`bnn-otp-caret`)

Đã lưu thiết lập tuyến Quận 7

Thiếu địa chỉ lấy hàng của BN-240916-10428

4 8 1 2 6

Ô đang nhập (viền xanh) và ô có con trỏ nhấp nháy.

Control bổ sung — 5 mục còn thiếu so với thư viện thành phần bản gương

Đối chiếu thư viện thành phần của bản gương (Button · Tag/Badge · Bảng · Form · Overlay · Empty · Avatar · Icon · Tabs · Steps · Progress · Pagination · Toast/Alert · Skeleton · OTP · Chip · File drop · Breadcrumb · Card/KPI · Chart) với những gì wwwroot/aha.html đang có: khối Danh mục component (24 mục data-cmp) + khối Thư viện thành phần. 5 mục dưới đây là phần còn thiếu, chỉ thêm, không sửa/xoá mục cũ; bảng đối chiếu đầy đủ ở docs/evidence/aha-ctrl-more/gap.tsv. Toàn bộ CSS/JS của khối này là token của bnn-tokens.css (0 mã màu rời), không thêm thư viện, không bundle, 0 request bên thứ ba.

C1 · Huy hiệu (badge) — số đếm, nhãn, chấm trạng thái

.bnn-badge · --act · --primary · --navy · --dot

Lớp skin đã có .bnn-badge* (dùng ở thanh bên, thẻ Kanban, thanh đếm dòng) nhưng chưa có mục danh mục nào cho nó. Ba vai trò: số đếm việc chưa đọc (--act), nhãn nhỏ (--primary/--navy), chấm trạng thái (--dot, màu lấy từ token trạng thái).

5 Mới 12 dòng Đang tốt Chờ xử lý Quá hạn

Dùng ở: thanh bên (số việc chờ) · thẻ Kanban (số bình luận) · thanh lọc (số dòng đang xem).

C2 · Menu nổi (dropdown) — hook `data-bnn-dropdown`

.bnn-dd · .bnn-menu · .bnn-menu__item · .bnn-menu__sep · data-bnn-dropdown/-dd-toggle/-dd-menu/-dd-item

Hook đã có trong assets/js/bnn-ui.js và đang được dùng ở màn danh sách, nhưng chưa có mục danh mục. Menu được portal về <body> (gắn data-bnn-portal khi mở) nên phải style bằng class toàn cục: bộ bnn-components.css chưa có lớp cho menu nổi ⇒ phần style nằm ở assets/css/aha-ctrl-more.css. Đã có role="menu"/aria-expanded/aria-labelledby, phím ↑ ↓ Home End, Esc và bấm ra ngoài để đóng.

Menu đã đóng

C3 · Hộp kiểm & nút chọn (checkbox · radio)

.bnn-choice · .bnn-choice__box · .bnn-choice__txt · .bnn-choice__hint · .bnn-choice--inline

Biểu mẫu của bộ skin có .bnn-field (input/select/textarea), .bnn-seg (một-chọn) và .bnn-switch, nhưng thiếu hộp kiểm/nút chọn nhiều lựa chọn. Ô vẽ bằng token (appearance:none + --bnn-navy/--bnn-ink) nên giữ nguyên parity sáng/tối, không phụ thuộc màu của lớp theme; có cả trạng thái nửa chừng và trạng thái khoá.

Gửi thông báo khi có bình luận mớiEmail + thông báo trong ứng dụng Chỉ nhận việc được giao trực tiếp 3/7 mục con đã xongNửa chừng (indeterminate) Khoá cứng theo chính sách tổ chức

Ưu tiên caoPhản hồi trong 4 giờ Ưu tiên vừa Ưu tiên thấp

Trong nước Quốc tế

Dùng ở: bộ lọc nâng cao · ma trận quyền của vai trò · chọn dịch vụ khi tạo đơn.

C4 · Chú thích nổi (tooltip) — 4 hướng, thuần CSS

.bnn-tip · .bnn-tip__bub · --b/--r/--l · [role="tooltip"]

Nhóm Overlay của bộ skin có sheet/ngăn kéo/hộp thoại/thẻ nổi nhưng thiếu chú thích nổi. Mở bằng :hover và :focus-within ⇒ dùng được cả bàn phím, không cần JS; tôn trọng prefers-reduced-motion. Nội dung mang role="tooltip" để trình đọc màn hình gắn được.

Mã đơn vận chuyển

Dùng ở: đầu cột bảng · ô chỉ số KPI · nhãn trường chỉ đọc · huy hiệu trạng thái.

C5 · Vùng thả tệp (file drop)

.bnn-drop · .is-over · .bnn-drop__list · .bnn-drop__file · .bnn-drop__size · khung bao data-aha-drop · data-aha-drop-input/-drop-list

Nhóm Form chưa có chỗ nhận tệp (kéo–thả hoặc bấm chọn). assets/js/aha-ctrl-more.js chỉ đọc tên/cỡ tệp để hiển thị, không gửi đi đâu (0 request bên thứ ba); trạng thái kéo vào đổi bằng lớp .is-over. Khung thả có nhãn cho trình đọc màn hình (.bnn-sr-only).

Kéo tệp vào đây hoặc bấm để chọn PDF · PNG · XLSX — tối đa 10 MB mỗi tệp