Ứng dụng quản trị nền tảng: giao diện mới

Ứng dụng quản trị nền tảng (platform-admin) là nơi đội SkillPixel quản lý mọi tổ chức trên hệ thống. Giao diện mới chia các mục quản lý tổ chức thành từng nhóm trong menu bên trái. Mỗi trang tập trung vào một công việc và có URL riêng để gửi cho đồng nghiệp.

PR #549 · 9/10/2026

Giao diện tối

Tình trạng ngày 9/10/2026

Giai đoạn

Đang chờ review. PR chưa được merge vào main, chưa lên beta và chưa có trong bản production nào.

PR

#549 gồm 7 commit trên nhánh main. PR làm lại giao diện và cách xử lý thao tác của ứng dụng quản trị nền tảng. Phần máy chủ (API), cơ sở dữ liệu và client sinh tự động giữ nguyên.

Ticket

PR này chưa liên kết với ticket Jira nào.

Kiểm thử

Đã chạy lint, type check, 194 test tự động (Vitest) và build trên commit cuối. Các thao tác thay đổi dữ liệu đã được QA trên trình duyệt ở máy phát triển. Chưa kiểm thử trên beta.

Ảnh và video

Toàn bộ ảnh chụp và video được thực hiện trên máy phát triển với dữ liệu mẫu. Tên và số liệu không phải dữ liệu khách hàng. Bản mới là bản build production từ commit cuối của PR. Bản cũ chạy từ nhánh main.

Vì sao phải làm lại

Qua nhiều lần cập nhật, các tính năng mới của ứng dụng quản trị nền tảng đều được thêm vào những trang có sẵn. Trang của một tổ chức có mười tab nằm ngang, trộn lẫn mức sử dụng, thanh toán và quyền truy cập. Riêng tab Mức sử dụng đã dài khoảng 8.400 pixel, còn tab Tính năng là một danh sách dài không có ô tìm kiếm. Các tab không có URL riêng, nên không gửi được đường dẫn tới đúng chỗ cho đồng nghiệp. Bản làm lại giữ nguyên mọi tính năng và chỉ sắp xếp lại, để mỗi việc nằm ở đúng một chỗ.

Thay đổi chính

Video giới thiệu

Dài 3 phút 41 giây. Giọng đọc tiếng Anh, phụ đề tiếng Việt bật sẵn (có thể chọn phụ đề tiếng Anh). Chấm xanh là con trỏ chuột. Phần đầu là bản cũ (góc trên ghi "TRƯỚC"), phần sau là bản mới ("SAU").

Trước và sau

Bốn thay đổi lớn nhất về cách sắp xếp, kèm lý do của từng thay đổi.

Mười tab ngang thành menu chia nhóm

Mười tab nằm trên một hàng, trộn mức sử dụng, thanh toán và quyền truy cập, nên muốn tìm một thiết lập phải mở lần lượt từng tab. Giờ các mục nằm trong menu bên trái, chia bốn nhóm, và mục nào cũng có URL riêng.

Trang Mức sử dụng dài 8.400 pixel thành ba nhóm số liệu

Tab cũ xếp chồng thành viên, dung lượng, email, AI và giới hạn của gói trên một trang dài khoảng 8.400 pixel. Trang Mức sử dụng mới có ba tab: "Thành viên & MAU", "Dung lượng" và "Email". MAU là số người dùng có hoạt động trong tháng. Mỗi tab có một hàng số liệu, một biểu đồ, còn bảng dài thu gọn trong mục "Chi tiết". AI có trang riêng, giới hạn chuyển sang nhóm Thanh toán.

Danh sách Tính năng có thêm tìm kiếm và bộ lọc

Tab cũ có danh sách dài, không có ô tìm kiếm hay bộ lọc để xem các thiết lập khác mặc định. Ở bản mới, mỗi thiết lập nằm trên một dòng. Có thể tìm kiếm hoặc chọn "Chỉ hiện mục đã đổi". Các thông số liên quan nằm ngay dưới công tắc bật/tắt tính năng. Bấm "Sửa" để mở khung chỉnh sửa bên phải. Trang Cấu hình của nền tảng cũng dùng cách trình bày này.

Chuyển các nút đổi vai trò vào menu thao tác

Ở bản cũ, mỗi dòng thành viên có ba nút để đổi vai trò trực tiếp và một nút xóa, rất dễ bấm nhầm. Giờ mỗi dòng chỉ hiện vai trò, còn thao tác nằm trong menu "⋯": "Sửa vai trò" mở hộp thoại, "Gỡ khỏi tổ chức" cần xác nhận.

Giới thiệu từng mục

Các ảnh dưới đây chụp tổ chức SkillPixel với dữ liệu mẫu, giao diện sáng và ngôn ngữ tiếng Việt, trên màn hình máy tính rộng 1440 pixel.

Danh sách tổ chức

Tổng quan của một tổ chức

Mức sử dụng và AI

Thanh toán

Cấu hình

Quyền truy cập

Các trang của nền tảng

Giao diện sáng và tối

Cách làm những việc thường gặp

1. Mở một mục của tổ chức

   Vào "Tổ chức" và bấm tên tổ chức. Chọn mục trong menu bên trái, ví dụ "Gói và giới hạn" trong nhóm Thanh toán. URL trên thanh địa chỉ trỏ đến mục đang xem. Gửi URL này để đồng nghiệp mở đúng trang.

2. Tìm một feature flag

   Mở "Tính năng" của tổ chức (hoặc "Cấu hình" để xem giá trị toàn nền tảng). Nhập tên, key hoặc mô tả vào ô tìm kiếm. Bấm "Chỉ hiện mục đã đổi" để chỉ xem các thiết lập khác mặc định. Bấm công tắc để bật hoặc tắt tính năng ngay, không cần bấm "Lưu". Với các thông số như dung lượng tệp tối đa, bấm "Sửa", nhập giá trị rồi bấm "Lưu" trong khung bên phải.

3. Đặt giới hạn riêng cho tổ chức

   Mở "Gói và giới hạn" và nhập giá trị vào cột "Ghi đè" của dòng cần đổi. Nút "Lưu" ở góc trên bấm được. Bấm "Lưu", cột "Đang áp dụng" chuyển sang giá trị mới với nhãn "Ghi đè". Muốn dùng lại giá trị của gói, xóa giá trị trong ô "Ghi đè" rồi bấm "Lưu".

   

4. Đổi giao diện và ngôn ngữ

   Ba nút ở góc trên bên phải chọn giao diện sáng, tối hoặc theo hệ thống. Nút có lá cờ bên cạnh đổi giữa English và Tiếng Việt. Ứng dụng nhớ lựa chọn trên trình duyệt đó.

Những gì đã kiểm tra

• Không bỏ tính năng nào. Đợt review code đã đối chiếu từng tab cũ với màn hình mới và xác nhận các thao tác cũ vẫn còn, chỉ đổi vị trí.
• Cách kết nối với máy chủ không đổi. Giao diện mới dùng lại đúng các API đọc và lưu dữ liệu hiện có. PR không thay đổi API hay cơ sở dữ liệu.
• Lưu xong là màn hình cập nhật ngay. Khi kiểm thử trên trình duyệt, màn hình cập nhật ngay sau các thao tác thay đổi dữ liệu, không cần tải lại trang. Các thao tác đã thử gồm đổi trạng thái, lưu trữ, khôi phục, đổi tên và đặt giới hạn riêng. Các mục Thương hiệu, Thành viên, Lời mời, Tên miền, Tính năng, Thiết lập AI và quyền quản trị cũng đã được kiểm thử.
• Hai ngôn ngữ luôn đủ chữ. Một test tự động đối chiếu nội dung giao diện tiếng Anh và tiếng Việt, rồi báo lỗi nếu bên nào thiếu mục tương ứng. Bản tiếng Việt đã được GPT-6.1 Sol rà soát.

Hạn chế và việc cần xử lý

• Dòng điều hướng đôi khi hiện mã định danh thay cho tên tổ chức. Lỗi xuất hiện khi mở trang Tổng quan rồi chuyển sang mục khác, như trong video. Tải lại trang thì hiện đúng tên. Lỗi được phát hiện khi quay video và cần sửa trước khi merge PR.
• Trên máy phát triển, chưa chuyển được tổ chức từ "Tạm ngưng" về "Đang hoạt động". Hệ thống yêu cầu tổ chức có đủ quyền sử dụng dịch vụ (entitlement) và ít nhất một quản trị viên của tổ chức. Các tổ chức mẫu chưa đủ điều kiện. Hộp thoại mới hiện rõ lý do chưa kích hoạt được.
• Máy chủ chưa từ chối giá trị âm cho các thông số. Giao diện mới chặn số âm, nhưng máy chủ vẫn nhận giá trị này nếu gửi thẳng qua API. Cần bổ sung kiểm tra ở phía máy chủ.
• Tên và mô tả trong danh mục cấu hình vẫn là tiếng Anh. Các tên như "DOCX import max file size" lấy từ danh mục cấu hình của máy chủ và giữ bằng tiếng Anh, có chủ ý. Một số dòng giải thích điều kiện kích hoạt tên miền cũng chưa có bản tiếng Việt.
• Bộ lọc ở Nhật ký hoạt động chỉ lọc các sự kiện đã tải về. Bộ lọc không tìm trong toàn bộ lịch sử, vì API chỉ nhận một loại sự kiện mỗi lần, còn mỗi nhóm lọc trên giao diện gồm nhiều loại.
• Chưa thử được luồng khởi tạo tên miền do SkillPixel quản lý. Quy trình này chỉ chạy trên beta và production. Trên máy phát triển, khung chi tiết báo lỗi 503 (dịch vụ chưa sẵn sàng).
• Menu ngôn ngữ phải bấm hai lần ngay sau khi đổi ngôn ngữ. Vừa đổi xong, lần bấm đầu vào nút ngôn ngữ không mở menu, lần thứ hai mới mở. Lỗi nhỏ, cũng phát hiện khi quay video.
• Chỉ dành cho màn hình máy tính. Bản mới nhắm tới màn hình rộng 1280 đến 1600 pixel. Giao diện điện thoại không nằm trong phạm vi lần này.

Các quyết định

Các bước triển khai

1. Sửa lỗi dòng điều hướng hiện mã định danh thay cho tên tổ chức, rồi review và merge PR #549. Không cần migration cơ sở dữ liệu hay đổi cấu hình triển khai.
2. Sau khi merge, triển khai ứng dụng quản trị nền tảng lên beta theo quy trình hiện tại.
3. Kiểm thử trên beta: mở một tổ chức và xem từng mục trong menu. Đặt một giới hạn riêng, lưu rồi khôi phục giá trị ban đầu. Tìm một feature flag, mở chi tiết một giao dịch, đổi giao diện và ngôn ngữ.
4. Đưa thay đổi vào bản phát hành production tiếp theo theo quy trình hiện tại.