Skip to main content

Giao Diện & Tính Năng Bookings

Ngày cập nhật: 20/06/2026
Danh sách ảnh feedback:

  1. Ảnh 1 - Giao diện danh sách & Bộ lọc
  2. Ảnh 2 - Form Tạo booking

Dưới đây là các yêu cầu chỉnh sửa UI/UX chi tiết được tổng hợp từ hình ảnh phản hồi:

PHẦN 1: GIAO DIỆN DANH SÁCH & BỘ LỌC​

(Dựa trên phản hồi từ Ảnh 1)

Giao diện Bookings và Yêu cầu Chỉnh sửa

1. Nút "Làm mới" (Refresh Button) không hoạt động​

  • Hiện trạng: Nút Làm mới ở góc trên cùng bên phải màn hình (bên cạnh nút "Tạo booking") hiện đang gặp lỗi hoặc không có phản hồi khi người dùng tương tác.
  • Yêu cầu:
    • Kiểm tra lại hàm click handler của nút Làm mới.
    • Kết nối hàm này với API để fetch lại dữ liệu danh sách booking mới nhất.
    • Thêm hiệu ứng loading (spin icon hoặc skeleton loader) trong quá trình reload dữ liệu.

2. Tách biệt Khung Bộ Lọc Tìm Kiếm (Search Filters Box)​

  • Hiện trạng: Bộ lọc tìm kiếm đang nằm chung một khối với danh sách các booking bên dưới, làm giao diện trông chật chội và khó theo dõi.
  • Yêu cầu:
    • Thiết kế lại layout: Tách box bộ lọc tìm kiếm (gồm: Mã booking, Từ ngày, Đến ngày, Chi nhánh, Trạng thái, Khách/SĐT, Dịch vụ) thành một thẻ (Card/Container) độc lập.
    • Tạo khoảng cách (margin-bottom/gap) hợp lý giữa Card bộ lọc và Card danh sách booking ở dưới để tăng tính thẩm mỹ và phân tách rõ ràng các khu vực chức năng.

3. Tăng độ rộng của các ô Select mặc định (Dropdowns)​

  • Hiện trạng: Các ô select dropdown cho phần Chi nhánh (Branch) và Trạng thái (Status) có kích thước hiển thị mặc định khá ngắn/hẹp.
  • Yêu cầu:
    • Tăng chiều rộng (width) của các ô select mặc định này để hiển thị rõ ràng nội dung các lựa chọn bên trong.
    • Đảm bảo tính responsive trên các độ phân giải màn hình khác nhau để các ô nhập liệu và chọn lựa không bị lệch dòng hay tràn viền.

PHẦN 2: FORM "TẠO BOOKING" (CREATE BOOKING MODAL)​

(Dựa trên phản hồi từ Ảnh 2)

Form Tạo booking và Yêu cầu Chỉnh sửa

4. Lỗi chọn tên khách hàng cũ không reset được​

  • Hiện trạng: Khi chọn một khách hàng cũ (ví dụ: đã gán nhãn + Ngan Phan), form không hỗ trợ nút reset/xóa tên khách hàng đó để chuyển về trạng thái trống hoặc nhập khách vãng lai mới.
  • Yêu cầu:
    • Thêm nút đóng/xóa x cạnh tên khách hàng đã chọn (ví dụ bên cạnh badge tên khách) để người dùng dễ dàng deselect hoặc reset lựa chọn.

5. Điều chỉnh trường chọn thời gian (Bắt đầu / Kết thúc)​

  • Hiện trạng: Form đang hiển thị cả 2 box ngày giờ cho "Bắt đầu" và "Kết thúc". Thực tế giờ kết thúc phụ thuộc vào thời lượng (số phút) của dịch vụ được chọn.
  • Yêu cầu:
    • Loại bỏ hoàn toàn trường ngày giờ Kết thúc.
    • Đổi tên trường Bắt đầu thành Ngày giờ đến.
    • (Tùy chọn nâng cao) Tự động tính toán và hiển thị thời gian kết thúc dự kiến dựa vào dịch vụ đã chọn để thủ thư/lễ tân tiện theo dõi.

6. Hiển thị thông tin Dropdowns (Chi nhánh, Therapist, Phòng)​

  • Hiện trạng: Các ô chọn Chi nhánh, Therapist, và Phòng hiện chỉ hiển thị ID thô (ví dụ: 4, 14, 20) thay vì tên hiển thị rõ nghĩa của chi nhánh, nhân viên trị liệu, hay phòng.
  • Yêu cầu:
    • Thay đổi cách hiển thị: Lấy tên hiển thị tương ứng của chi nhánh, nhân viên trị liệu, và phòng (ví dụ: Golden Lotus Spa & Massage Club, Therapist 01, Phòng 01).
    • Cấu hình trường chọn Phòng thành trường không bắt buộc (Optional) — cho phép tạo booking mà không cần chọn phòng ngay từ đầu.

7. Thêm phần áp mã ưu đãi (Voucher Redemptions)​

  • Yêu cầu:
    • Bổ sung một box/dropdown để áp mã ưu đãi lấy dữ liệu từ danh mục Voucher redemptions.
    • Lọc động danh sách voucher: Chỉ hiển thị các mã ưu đãi áp dụng được cho danh mục dịch vụ đang chọn trong form.

8. Thêm box xem trước thông tin (Preview) trước khi tạo​

  • Yêu cầu:
    • Bổ sung một khu vực tóm tắt/xem trước (Preview box) hiển thị các thông tin: Tên khách hàng, dịch vụ đã chọn, số lượng, và thành tiền dự kiến ngay trước nút Tạo booking.
    • Mục đích: Giúp lễ tân rà soát lại thông tin chính xác trước khi bấm tạo, vì hệ thống sau này sẽ được cấu hình tự động gửi email và Zalo OA thông báo về chi nhánh ngay sau khi booking được tạo thành công.