🌐 VI / EN
098 905 1920 info@lean.vn
lean.vn
📖 HƯỚNG DẪN LEANERP

6S Tagging — Từng Màn Hình, Từng Nút Bấm

Tài liệu hướng dẫn chi tiết cho người dùng cuối — CiCC LeanERP Ecosystem

📦 LeanERP Modules

Màn hình Đăng nhập & Đăng ký



> Đường dẫn: http://localhost/lean.vn/app6suser/ (local) hoặc https://lean.vn/app6suser/ (production)
> File: index.html lines 36-105, app.js lines 34-216

---

1. Màn hình Đăng nhập



Khi mới truy cập, đây là màn hình đầu tiên xuất hiện.

Trường nhập liệu



| Trường | Loại | Bắt buộc | Mô tả |
|--------|------|----------|-------|
| Tài khoản / Email / Số điện thoại | Text input | ✅ | Nhập username, email hoặc SĐT đã đăng ký |
| Mật khẩu | Password | ✅ | Nhập mật khẩu (hiện dấu ●) |

Nút bấm



| Nút | Hành động |
|-----|-----------|
| ĐĂNG NHẬP | Gọi API POST /cicc-6s/v1/auth/login. Nếu thành công → lưu 6s_user vào localStorage → vào màn hình chính |
| Chưa có tài khoản? Đăng ký ngay | Chuyển sang form Đăng ký |

Xử lý khi nhấn Enter



- Cả 2 ô input đều có onkeyup="if(event.key==='Enter') doLogin()" — nhấn Enter = bấm Đăng nhập.

Luồng xử lý (doLogin)



``
Nhập login + password
→ fetch POST /auth/login
→ success? Lưu vào localStorage('6s_user') → checkAuth()
→ fail? Hiển thị thông báo lỗi
`

Dữ liệu lưu trong localStorage:
`json
{
"user_6s_id": 1,
"wp_user_id": 2,
"username": "danhgia",
"display_name": "Nguyễn Văn A",
"phone": "090xxx",
"role_code": "R07",
"location_id": [22, 8, 12, 18],
"tenant_id": 1,
"login_identifier": "danhgia"
}
`

Lưu ý



- Tài khoản phải được Admin kích hoạt (status = 'active') mới đăng nhập được.
- wp_user_id (WordPress) ≠ user_6s_id (bảng 6S) — dùng user_6s_id cho API locations.

---

2. Màn hình Đăng ký



Click "Chưa có tài khoản? Đăng ký ngay" để mở form.

Trường nhập liệu



| Trường | Loại | Bắt buộc | Ghi chú |
|--------|------|----------|---------|
| Họ và tên \* | Text | ✅ | id="reg-fullname" |
| Email \* | Email | ✅ | id="reg-email" |
| Số điện thoại \* | Text | ✅ | id="reg-phone" |
| Tên đăng nhập \* | Text | ✅ | id="reg-username" |
| Mật khẩu \* | Password | ✅ | Tối thiểu 6 ký tự |
| Khách hàng (Tủ) | Select | ✅ | Load từ GET /tenants. Gọi onTenantChange() |
| Vai trò 6S | Select | ✅ | Load từ file get_6s_roles.php |
| 📍 Vị trí phụ trách \* | Click area | ✅ | Mở cây phả hệ chọn location |

Chọn vị trí (Tree Picker)



1. Bấm vào ô 📍 Vị trí phụ trách
2. Chọn Khách hàng trước (nếu chưa)
3. Cây phả hệ hiện ra dạng:
`
🏢 TCTY ĐỆT MAY HÒA THỌ
└─ 🏭 Khối Nhà máy May
└─ 🏘️ NM Hòa Thọ 1
└─ 🏘️ Xưởng May 2
├─ 🔧 C1 - Chuyền 1 ☐
├─ 🔧 C2 - Chuyền 2 ☐
└─ 🔧 C3 - Chuyền 3 ☐
`
4. Tích chọn checkbox — tự động chọn cả cây con
5. Bấm XÁC NHẬN CHỌN
6. Các chip location hiện ra phía dưới

Nút bấm



| Nút | Hành động |
|-----|-----------|
| TẠO TÀI KHOẢN | Gọi POST /auth/register. Gửi dữ liệu → thành công: alert + chuyển về form login |
| Đã có tài khoản? Đăng nhập | Quay lại form Login |

Luồng xử lý (doRegister)



`
Validate các trường
→ Kiểm tra trùng (API)
→ Hash password (bcrypt/wp_hash_password)
→ INSERT vào wp_6s_users với status='inactive'
→ Trả về "Đăng ký thành công! Tài khoản đang chờ kích hoạt."
`

---

3. Sau đăng nhập (checkAuth)



`
Đọc localStorage('6s_user')
→ Ẩn auth-container, hiện .app
→ Hiển thị tên + avatar (2 ký tự đầu của tên) + vai trò
→ Gọi loadUserLocations(userId) — tải danh sách vị trí được phân quyền
→ switchTab('treo') — vào tab Treo thẻ
`

Header sau login



`
[🏷️ 6S CiCC Tagging] [NV] [ON] [🔄] [🚪]
Nguyễn Văn A ▾
``

- Avatar: 2 ký tự đầu của tên, hiển thị trong vòng tròn gradient
- Status indicator: ON (online) / Off (offline)
- Nút Sync: đồng bộ dữ liệu
- Nút Logout: xóa localStorage → quay về màn hình login

---

Audio thuyết minh



📸 Nghe hướng dẫn
audio/02-dang-nhap.mp3

*Click play để nghe hướng dẫn bằng giọng đọc.*

---

Screenshots



📸 Màn hình Đăng nhập
images/login/login-screen.png

*Chú thích: Giao diện màn hình Đăng nhập với trường Tài khoản và Mật khẩu*

📸 Form Đăng nhập điền sẵn
images/login/login-filled.png

*Chú thích: Form đăng nhập đã điền tài khoản "danhgia" và mật khẩu "123456"*

📸 Đăng nhập thành công - Header
images/login/login-success-header.png

*Chú thích: Header sau đăng nhập hiển thị tên user + avatar + nút Logout*

📸 Form Đăng ký tài khoản
images/login/register-form.png

*Chú thích: Form Đăng ký mới với đầy đủ trường nhập liệu*

📸 Tree Picker chọn vị trí
images/login/register-tree-picker.png

*Chú thích: Cây phả hệ Location khi đăng ký, chọn vị trí phụ trách*

📸 Chips vị trí sau khi chọn
images/login/register-location-chips.png

*Chú thích: Các chip hiển thị vị trí đã chọn sau khi xác nhận Tree Picker*

📸 Thông báo lỗi đăng nhập
images/login/login-error.png

*Chú thích: Toast thông báo khi đăng nhập sai tài khoản hoặc mật khẩu*

CiCC LeanERP © 2026 — Tài liệu đào tạo nội bộ

Hỏi LeanERP AI?