KHOÁ HỌC - UI mới

Link figma: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20078-78078&m=dev

I. Màn hình Master và tạo mới

1. TỔNG QUAN

1.1. Mục tiêu

Xây dựng màn hình Master Khóa học gồm:

Màn hình danh sách khóa học (List View)
Drawer tạo mới khóa học

Cho phép:

Xem danh sách khóa học
Tìm kiếm, lọc
Tạo mới khóa học
Upload ảnh đại diện khóa học

2. MÀN HÌNH MASTER – DANH SÁCH KHÓA HỌC

2.1. Layout tổng thể

Màn hình gồm 4 vùng chính:

Khi user click vào Module "Đào tạo", mặc định focus luôn vào Menu "Khoá học"

Click vào tab Menu nào -> điều hướng sang nội dung của đúng menu đó.

2.2 Search & Filter

2.3 Nút [+ Tạo]

Nằm bên phải
Màu primary
Click → mở Drawer "Khóa học mới"

2.4 Bảng danh sách khoá học

Cột	UI	Mô tả chi tiết
Checkbox		Chọn vào ô checkbox ở header cột -> auto checked all ô checkbox trong bảng. Cho phép chọn 1 hoặc nhiều khoá học cần xoá Sau khi chọn -> hiển thị action bar có nút [Xoá] và [Đóng] Click xoá -> hiển thị modal Cảnh báo xoá
Khoá học	Thumbnail + Tên + Mã + số bài học	Dòng 1 (textprimary): Hiện Tên khóa học, nếu dài quá thì truncate và ..., hover hiển thị tooltip full tên khoá học, Click vào tên → mở màn hình sửa khoá học Dòng 2 (subtext): <Mã khoá học> - <count số lượng bài học trong khoá đó> Bài học Thumbnail: Ảnh vuông nhỏ bên trái Hiển thị ảnh khoá học, nếu khoá học không được upload ảnh, hiển thị ảnh màu tím (như hình)
Trạng thái	Tag	Hiển thị tag trạng thái khoá học
Người tạo	Avatar + Tên	Hiển thị avatar và tên hiển thị của người tạo khoá học, chỉ hiển thị 1 dòng nếu text dài quá: truncate 1 phần tên và ...; hover hiển thị full <tên hiển thị của người tạo> - <email>
Sửa gần nhất	Date	Hiển thị ngày update gần nhất của khoá học
Action	icon ...	Click -> hiển thị overflow action Sửa khóa học: click mở màn hình Sửa khoá học Xem trước: Mở màn hình Preview khoá học Nhân bản khoá học: Click, tạo 1 bản ghi khoá học mới (thực hiện như chức năng Nhân bản khoá học đang có) Xoá khoá học: Click mở modal "Xoá khoá học"

2.5. Sorting

Default sort theo Sửa gần nhất DESC

2.6. Hiển thị Action theo phân quyền

Nút [+Tạo], Sửa, Xoá: Chỉ hiển thị khi user có quyền
Nút Xem trước, Nhân bản: luôn hiển thị khi user có quyền xem bản ghi đó.

2.7. UX behavior

Hover row: Background sáng nhẹ
Click ngoài dropdow: Dropdown đóng
Khi filter thay đổi: Reload list

3. DRAWER Tạo mới

3.1 Cách vào Drawer Tạo mới

Từ màn hình Danh sách khoá học, click [+Tạo] hoặc nút [+ Tạo khoá học] -> Mở Modal "Khoá học mới" (Trượt từ phải sang)

3.2 Mô tả chi tiết

Header:
- Tên Drawer: Khoá học mới
- Nút [x], [Đóng]: Click -> quay lại màn hình Danh sách khoá học
- Nút [Tạo mới]: Click -> validate hợp lệ các trường thông tin (theo Business rule của hệ thống hiện tại), hiển thị màn hình chi tiết Khoá học, focus vào tab "Nội dung"
Upload ảnh khoá học
- Mặc định hiển thị trạng thái empty như hình
- Cho phép tải lên hoặc kéo thả 1 ảnh (định dạng ảnh theo hệ thống hiện tại)
- Khi hover lên ảnh đã upload cho phép preview ảnh + Xóa ảnh đi để up lại ảnh mới
Thông tin chung
- Tên khoá học * (input text):
  - Mặc định hiển thị là "Khoá học chưa đặt tên"
  - Cho phép sửa, bắt buộc nhập tối đa 255 ký tự
  - Nếu để trống: nhấc chuột ra khỏi ô input, hiển thị lại giá trị gần nhất.
- Chủ đề học tập (DDL): Mặc định là "Khác", cho phép chọn lại 1 giá trị từ list chủ đề học tập
- Mô tả khoá học (Text area): Nhập mô tả khoá học (theo Business rule của hệ thống hiện tại)

II. Màn hình chi tiết

Cách vào màn hình chi tiết: Người dùng click [Tạo mới] thành công từ Drawer "Khoá học mới" hoặc người dùng chọn [Sửa khoá học] từ action hub của bản ghi khoá học.

1. Header

Nút Back (mũi tên trái): Click -> quay ra màn hình Master khoá học
Tên khóa học (title): Hiển thị tên khoá học
Thanh tab: Nội dung | Cấu hình | Phát hành. (Thanh điều hướng, người dùng có thể chọn 1 segment bất kì để điều chỉnh thông tin.)
Trạng thái lưu: chip Lưu thành công
- Hiển thị chịp Lưu thành công/Đang lưu giống như menu Công việc.
Nhóm nút hành động bên phải:
- Icon … (more actions): Click hiển thị overflow
- Nút [Chia sẻ]: bật ra màn hình popup để chia sẻ quyền chỉnh sủa khóa học này với 1 user khác.
  
  Cụ thể màn popup:
  
  https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20469-56080&t=WgEkdvODT2Mww088-1
- Nút Primary (thay đổi theo tab): Nút Primary này sẽ thay đổi khi ở các tab khác nhau.

2. Segment Nội dung

2.1 Thêm bài học

Mặc định hiển thị 1 bài học, tên bài học là: Bài học chưa đặt tên và 1 nội dung mặc định là đoạn văn bản và có 1 nội dung mặc định là Kết bài học (Kết thúc bài học không thể xóa) ngay tạo mới thành công khoá học.
Icon primary [+]

Click -> hiển thị Dropdown tuỳ chọn thêm "Bài học thường" hoặc "Bài tập"
Khi thêm mới bài học hay bài tập thì luôn thêm xuống cuối cùng, và bài học sẽ có tên mặc định "Bài học chưa đặt tên"

Bài học thường luôn có 1 nội dung mặc định là đoạn văn bản và có 1 nội dung mặc định là Kết bài học (Kết thúc bài học không thể xóa).
Khi thêm các nội dung học vào bài học thường thì sẽ thêm tuần tự và ngay trên nội dung kết bài.

Số thứ tự tăng dần và tự đánh cho các nội dung học.
Hover vào icon [...] ở tên bài học thường và click, hiển thị dropdown các tuỳ chọn cho bài học gồm:
- Đổi tên bài học: Click -> chuyển ô nhập tên bài học về dạng editable, cho phép user sửa lại tên bài học. Nhấc chuột khỏi ô input -> chuyển về dạng view.
- Nhân bản bài học: Click -> Clone bài học và nội dung hiện tại thành 1 bài học mới xuống cuối cùng.
- Cấu hình bài học: Click -> Mở modal "Cấu hình bài học" https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20401-16103&m=dev
- Xoá bài học: Click -> Hiển thị modal cảnh báo "Xoá bài học"
Hover vào icon [...] ở tên nội dung và click, hiển thị dropdown các tuỳ chọn cho nội dung gồm:
- Nhân bản nội dung: Click -> Clone nội dung hiện tại thành 1 nội dung mới ở cuối bài học hiện tại, phía trên "kết thúc học"
- Xoá nội dung bài học: Click -> Hiển thị modal cảnh báo "Xoá nội dung"

2.2 Thêm nội dung bài học thường

Click [Thêm nội dung] -> mở modal "Thư viện nội dung"
Danh sách danh mục Thư viện nội dung gồm:
- Văn bản (default active)
- Video
- Hình ảnh
- Trắc nghiệm
Hành vi chọn: Khi click vào một loại:

- Không tạo content ngay
- Chỉ highlight
- Cột phải hiển thị preview tương ứng

a. Chọn loại nội dung "Văn bản"

Khi click vào loại "Văn bản", hệ thống thực hiện:

- - Thời gian đoạn mp3 + thanh progress
  - Icon play: Click play -> phát nội dung âm thanh của file, chuyển icon sang pause.
  - Nút xóa: Xoá file MP3 đã upload, Hiển thị dropzone
  - Thay đổi: Mở hộp thoại chọn file mp3 từ thiết bị hiện tại.

b. Chọn loại nội dung "Video"

Khi click vào loại "Video", hệ thống hiển thị 2 lựa chọn: Một đoạn phim (Clip) hoặc Đoạn phim Youtube

Cho phép user chọn 1 loại video

b.1 Chọn loại "Một đoạn phim (Clip)"

Tạo content mới với:
- Tên tiêu đề là: Một đoạn phim, bắt buộc có tên tiêu đề
- Vị trí hiển thị: trước "Kết bài học"
Insert content vào bài học đang chọn
Focus vào input "Tiêu đề"
Video clip:
- Cho phép upload hoặc kéo thả 1 file MP4, max = 300Mb
- Cho phép bấm vào preview để xem video luôn.
Tự động phát video:
- Mặc định checked, cho phép unchecked.
- Khi tích chọn tùy chọn này thì video sẽ tự động play khi người học vào nội dung này

b.2 Chọn loại "Đoạn phim Youtube"

Tạo content mới với:
- Tên tiêu đề là: Đoạn Youtube, bắt buộc có tên tiêu đề
- Vị trí hiển thị: trước "Kết bài học"
Insert content vào bài học đang chọn
Focus vào input "Tiêu đề"
Link Youtube *:
- Bắt buộc nhập link youtube
- Validate đúng định dạng URL
Tự động phát video:
- Mặc định checked, cho phép unchecked.
- Khi tích chọn tùy chọn này thì video sẽ tự động play khi người học vào nội dung này

c. Chọn loại nội dung "Hình ảnh"

Khi click vào Slide ảnh, hệ thống thực hiện:

d. Chọn loại nội dung "Trắc nghiệm"

Khi click vào loại "Trắc nghiệm", hệ thống hiển thị 3 lựa chọn: Câu hỏi trắc nghiệm; Chọn đúng sai; Import câu hỏi

d.1 Chọn "Câu hỏi trắc nghiệm"

Khi click vào "Câu hỏi trắc nghiệm", hệ thống thực hiện:

d.2 Chọn "Câu hỏi đúng sai"

Khi click vào "Câu hỏi trắc nghiệm", hệ thống thực hiện:

d3. Chọn "Import câu hỏi"

Khi bấm vào nội dung này sẽ hiển thị ngay Modal import trắc nghiệm vào khóa học (Sử dụng lại template của Quizzies)

Khi Tải lên file và nhấn Tiến hành import, hệ thống validate file nhập lên:

Nếu invalid: Hiển thị modal Báo lỗi nhập liệu
Nếu valid: Hiển thị màn hình tương tự như khi chọn "Câu hỏi trắc nghiệm" với nội dung câu hỏi và đáp án, giới hạn thời gian trả lời theo file được import.

e. Kết bài học học

Tiêu đề (Input text)*: Hiển thị tiêu đề mặc định là "Kết thúc bài học", Cho phép nhập tối đa 255 ký tự, bắt buộc nhập

Nội dung (Editor): Hiển thị nội dung mặc định là "Cảm ơn bạn đã cố gắng học tập!", cho phép sửa.

2.3 Thêm Bài tập tự luận

User click vào Icon primary [+]

Hệ thống hiển thị Dropdown tuỳ chọn thêm "Bài học thường" hoặc "Bài tập" -> User nhấn chọn "Bài tập"

Hệ thống thực hiện thêm 1 bài tập tự luận vào cuối danh sách bài học hiện tại có tiêu đề mặc định là "Bài tập chưa đặt tên", focus vào bài tập tự luận đó và hiển thị Layout bên phải tương ứng gồm:

Tiêu đề (Input text)*:
- Mặc định là "Bài tập chưa đặt tên"
- Cho phép sửa, bắt buộc nhập tối đa 255 ký tự
Nội dung (Text Editor): Không bắt buộc
Danh sách người đánh giá
- Nhấn [Thêm người đánh giá]: mở modal "Chọn người đánh giá"
- Cho phép checked chọn nhiều người đánh giá cho bài tập tự luận

2.4 Cấu hình bài học

Từ dropdown các tuỳ chọn của bài học, user nhấn chọn "Cấu hình bài học" -> hệ thống hiển thị modal "Cấu hình bài học <Tên bài học>", Focus vào tab "Điều kiện học"

Tab "Điều kiện học":

Cột bên trái: Hiển thị danh sách các bài học của khoá học hiện tại và chưa có ở cột bên phải. Cho phép checked chọn nhiều bài học, khi checked và nhấn icon mũi tên [>] -> hiển thị bài học được checked sang cột bên phải
Cột bên phải: Hiển thị danh sách các bài học của khoá học hiện tại đã được chọn làm điều kiện học trước đó. Cho phép checked chọn nhiều bài học, khi checked và nhấn icon mũi tên [<] -> hiển thị bài học được checked sang cột bên phải
Interaction follow link sau: https://ant.design/components/transfer

Tab "Điều kiện hoàn thành"

Hiển thị checkbox "Yêu cầu đạt điểm số tối thiểu để hoàn thành", Mặc định unchecked
Khi checked -> hiển thị ô input number nhập phần trăm điểm cần đạt để hoàn thành, bắt buộc nhập số nguyên dương trong khoảng (0; 100]

2.5 Nút Tiếp tục: Cấu hình

Nhấn [Tiếp tục: Cấu hình], chuyển màn hình hiện tại sang segment "Cấu hình"

3. Segment Cấu hình

Cách vào: Người dùng mở form chi tiết khoá học sau đó click vào segment "Cấu hình" hoặc người dùng nhấn nút "Tiếp tục:Cấu hình" từ segment "Nội dung"

3.1 Mục tiêu màn hình

Cho phép user được phân quyền cấu hình thông tin của khoá học, bao gồm:

Thông tin chung
Loại khóa học
Quy định hoàn thành
Tài liệu tham khảo

3.2 Bố cục tổng thể

Layout chung

Layout dạng Form dọc
Chiều rộng form cố định: kích thước theo thiết kế
Padding container: theo thiết kế
Khoảng cách giữa các section: theo thiết kế
Các section hiển thị trong card có border + background trắng

Các section theo thứ tự:

Thông tin chung
Loại khóa học
Tài liệu tham khảo

a. Thông tin chung

Lần đầu vào segment "Cấu hình", hiển thị thông tin chung đã nhập khi tạo mới khoá học
Ở những lần sau, hiển thị thông tin Tên khoá học, chủ đề học tập, mô tả khoá học theo lần cập nhật gần nhất
Business rules của phần thông tin chung giống như khi tạo mới khoá học, xem tại mục 3.2 Mô tả chi tiết trong phần 3. Drawer Tạo mới

b. Loại khoá học

CÁC LOẠI KHOÁ HỌC

Hiển thị 3 loại:

Khóa học bắt buộc (Mandatory): Bắt buộc, sẽ cần hoàn thành ít nhất 1 lần có thể set các thời hạn hoàn thành.
Khóa học lặp lại (Recurring): Lặp lại, sẽ cần hoàn thành theo định kỳ, có thể set tần suất.
Khóa học tự chọn (Optional): Tự do, có thể hoàn thành hoặc không, không cần set thời hạn hay tần suất.

UI:

Radio group
Chỉ chọn 1 loại
Mặc định: Khóa học bắt buộc

Quy tắc áp dụng nội dung khoá học sửa đổi và được phát hành lại

BR-01:

Nếu user đã hoàn thành khóa học trước thời điểm Admin sửa và phát hành lại khóa học:

THÌ:

Trạng thái khóa học của user luôn giữ = COMPLETED
User không phải học lại bất kỳ nội dung nào
Nội dung mới chỉ áp dụng cho:
- user mới
- hoặc các instance học mới (nếu có recurrence)

BR-02:

Nếu user chưa hoàn thành khóa học, và Admin cập nhật nội dung khóa học:

THÌ:

Các bài học đã COMPLETED trước republish:
- vẫn giữ trạng thái COMPLETED
- không yêu cầu học lại
- không reset progress

BR-03:

Nếu lesson chưa được user hoàn thành tại thời điểm republish:

THÌ:

lesson sẽ hiển thị theo phiên bản nội dung mới nhất
user học theo nội dung đã cập nhật

BR-04:

Với khoá học có điều kiện được mở

Nếu:

user đã mở được Lesson 3 trước republish
(tức hệ thống đã ghi nhận Lesson 1 & 2 completed hợp lệ)

Sau khi Lesson 1 hoặc Lesson 2 bị chỉnh sửa:

KHÔNG revoke quyền truy cập Lesson 3
KHÔNG reset completion Lesson 1 & 2

b.1 Khoá học bắt buộc

Quy tắc chung khi remove user xong gán lại user đó:
- User được gán -> user hoàn thành -> user bị remove khỏi khoá -> user được gán lại khoá -> User vẫn được ghi nhận ĐÃ HOÀN THÀNH
- Khoá học được chọn theo Option 1: User được gán -> user chưa hoàn thành -> user bị remove khỏi khoá -> user được gán lại khoá -> Tính lại Deadline theo ngày được gán mới.
- Khoá học được chọn theo Option 2: User được gán -> user chưa hoàn thành -> user bị remove khỏi khoá -> user được gán lại khoá -> Tính lại Deadline theo ngày được phát hành gần nhất.
- Khoá học được chọn theo Option 3: User được gán -> user chưa hoàn thành -> user bị remove khỏi khoá -> user được gán lại khoá -> Tính lại Deadline theo ngày được chọn gần nhất

Hiển thị text tiếng Việt: Khóa học bắt buộc (Người học cần hoàn thành khóa học 1 lần)
Khi user đổi ngôn ngữ sang tiếng Anh, hiển thị là: Mandatory (Users must complete this course once)
Hiển thị thêm phần cấu hình deadline gồm 4 option radio con:

Option 1:

Hoàn thành sau X ngày kể từ thời điểm được gán
- Input number (default: 30)
- Min: 0
- Deadline của user = Ngày được gán + X (ngày)
- Khi ngày hiện tại > Deadline của user -> ẩn khoá học khỏi danh sách khoá học của user đó ở màn "Của tôi"

Option 2:

Hoàn thành sau X ngày kể từ ngày phát hành

- Input number (default: 30)
- Min: 0
- Deadline của user = Ngày phát hành + X (ngày)
- Khi ngày hiện tại > Deadline của user -> ẩn khoá học khỏi danh sách khoá học của user đó ở màn "Của tôi"

Option 3:

Hoàn thành trước ngày cụ thể

- Date picker
- Không cho chọn ngày quá khứ
- Deadline = Ngày được nhập
- Khi ngày hiện tại > Deadline của user -> ẩn khoá học khỏi danh sách khoá học của user đó ở màn "Của tôi"

Option 4:

Người học có thể hoàn thành bất kỳ lúc nào

- Không cần thêm input
- Deadline của user = unlimited

b.2 Khoá học lặp lại

Business Rules :

BR-01: Khi đến thời điểm tạo vòng lặp mới

Hệ thống luôn tạo instance mới, kể cả khi instance trước chưa hoàn thành.
Nếu instance trước chưa hoàn thành:
- Instance trước được đánh dấu: Chưa học/Missed
User chỉ tiếp tục học instance mới nhất.

BR-02: Một user chỉ có 1 learnable instance tại một thời điểm

BR-03: Khi khóa học được sửa và republish, hệ thống áp dụng nội dung phiên bản mới theo nguyên tắc:

Nội dung mới áp dụng từ instance hiện tại trở đi.
Các instance trước republish giữ nguyên nội dung.
Nếu user đã hoàn thành instance hiện tại trước republish:
- - vẫn được ghi nhận hoàn thành
  - không phải học lại.

BR-04: Republish không reset completion nếu:

instance.status = COMPLETED
AND completed_at < republish_time

BR-05: Deadline của lần học đầu tiên khi user được assign luôn được ưu tiên.

Nếu:

current_date < first_deadline
AND recurring_trigger xảy ra

THÌ:

User phải tiếp tục học theo deadline đầu tiên
Deadline học tập hiển thị = deadline instance đầu tiên

Khi:

current_date > first_deadline

→ Deadline được tính theo instance hiện tại.

BR-06:

Instance bị bỏ lỡ khi:

Instance mới được tạo
Instance trước chưa completed

-> instance bị bỏ lỡ được đánh dấu là Missed

Decision Table

Conditions

Code	Condition
C1	User assigned
C2	Current instance completed
C3	Current instance incomplete
C4	Recurring trigger reached
C5	Course republished
C6	Current instance completed before republish
C7	First deadline chưa hết
C8	First deadline đã hết

Actions

Code	Action
A1	Create new instance
A2	Mark previous instance MISSED
A3	Allow learning latest instance
A4	Lock previous instance
A5	Apply new course version
A6	Keep completion
A7	Use first deadline
A8	Use current cycle deadline

Decision Table

Rule	C1	C2	C3	C4	C5	C6	C7	C8	A1 New Instance	A2 Missed	A3 Learn Latest	A4 Lock Old	A5 New Version	A6 Keep Completion	A7 First DL	A8 Cycle DL
R1 First assign	Y	N	N	N	N	-	Y	N	Y	N	Y	N	Current	-	Y	N
R2 Normal recurrence (completed)	Y	Y	N	Y	N	-	-	Y	Y	N	Y	N	Current	-	N	Y
R3 Recurrence unfinished (priority DL)	Y	N	Y	Y	N	-	Y	N	Y	Y	Y	Y	Current	-	Y	N
R4 Recurrence unfinished (after deadline)	Y	N	Y	Y	N	-	N	Y	Y	Y	Y	Y	Current	-	N	Y
R5 Republish – completed user	Y	Y	N	N	Y	Y	-	-	N	N	Y	N	N	Y	Keep	Keep
R6 Republish – incomplete instance	Y	N	Y	N	Y	N	-	-	N	N	Y	N	Y	N	Keep	Keep
R7 Future recurrence after republish	Y	Y	N	Y	Y	-	-	Y	Y	N	Y	N	Y	-	N	Y

UX/UI:

Hiển thị text tiếng Việt: Khóa học lặp lại (Người học cần hoàn thành khóa học định kỳ)
Khi user đổi ngôn ngữ sang tiếng Anh, hiển thị là: Recurring (Users must retake this course periodically)
Khi chọn sang loại "Khoá học lặp lại", hiển thị mặc định dòng Người học phải hoàn thành sau 30 ngày kể tử thời điểm được gán; Cho phép sửa số ngày (nhập số nguyên dương >=0) và 3 tuỷ chọn dạng radio:
- Lặp lại sau ... ngày kể từ ngày người học hoàn thành cuối cùng; mặc định là 30 ngày, Cho phép sửa số ngày (nhập số nguyên dương >=0). Mặc định chọn tuỳ chọn này.
- Lặp lại sau ... ngày kể từ ngày phát hành; mặc định là 30 ngày, Cho phép sửa số ngày (nhập số nguyên dương >= số ngày người học phải hoàn thành)
- Lặp lại hàng năm vào ngày dd/MM. Hiển thị mặc định là ngày hiện tại.

b.3 Khoá học tự chọn

Hiển thị text tiếng Việt: Khóa học tự chọn (Người học có thể tham gia tùy ý)
Khi user đổi ngôn ngữ sang tiếng Anh, hiển thị là: Optional (Users can opt in to take this course)

c. Tài liệu tham khảo

Cột	UI	Mô tả chi tiết
STT	Number	Tăng dần theo bảng, từ 1
Tên tài liệu	Input Text	Bắt buộc nhập, tối đa 500 ký tự
File tài liệu	icon upload + file	Bắt buộc upload chỉ 1 file, không giời hạn định dạng, tối đa 500kb
Hành động	action	Xoá dòng tài liệu hiện tại khỏi bảng
Thêm tài liệu	Action	Click -> Thêm 1 dòng vào cuối bảng hiện tại, phía trên nút [Thêm tài liệu]

3.3 Nút [Tiếp tục: Phát hành]

Nhấn nút -> Điều hướng sang segment Phát hành

4. Segment Phát hành

4.1 Người học/Assign course

Hiển thị text tiếng Việt: ">">Người được gán học sẽ nhận được thông báo và có thể tham gia học khi khóa học được phát hành

Khi user chuyển sang ngôn ngữ tiếng Anh, hiển thị text là: ">">Assigned users will see this course when published.

Người học:

Nếu chưa có người học/nhóm/địa điểm nào được gán, hiển thị là: Chưa có người học

Nếu có cá nhân/nhóm/địa điểm được gán: hiển thị theo giá trị theo từng object như thiết kế.

Nút [Gán người học]: Click -> mở modal "Thêm người học". UX/UI modal xem tại: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20409-16537&t=4hXcGebGU51LCY7F-1

4.2 Thông tin khoá học/Course details

Hiển thị Loại khoá học, ngày tới hạn, số bài học

Chi tiết từng loại hiển thị xem tại: https://www.figma.com/design/jM4Xopoh41pK1UhYEnxWUq/Workplace-Home?node-id=20469-10937&t=WgEkdvODT2Mww088-1

4.3 Lịch và phát hành/Schedule and publish

Hiển thị radio: Ngay lập tức (mặc định chọn) và Phát hành sau

Khi user chọn phát hành sau, hiển thị thêm ô chọn Datetime picker "Phát hành vào", cho phép chọn thời gian >= thời gian hiện tại.