From ca022de832f506f9c2430b196047dc0944ceb676 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Fri, 20 Mar 2026 16:42:10 +0700 Subject: [PATCH] =?UTF-8?q?refactor:=20redesign=20onboarding=20wizard=20UI?= =?UTF-8?q?=20=E2=80=94=20inline=20step=20progress,=20improved=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Redesign all 6 onboarding steps with inline step indicators replacing the fixed sidebar layout. Simplified structure with admin-content/admin-panel pattern for consistency with other admin pages. Co-Authored-By: Claude Opus 4.6 (1M context) --- .../Admin/Onboarding/OnboardingBusiness.razor | 186 ++++++++------ .../Admin/Onboarding/OnboardingDevice.razor | 233 +++++++++-------- .../Admin/Onboarding/OnboardingProducts.razor | 237 +++++++++--------- .../Admin/Onboarding/OnboardingReady.razor | 156 ++++++------ .../Admin/Onboarding/OnboardingStaff.razor | 234 +++++++++-------- .../Admin/Onboarding/OnboardingStore.razor | 162 ++++++------ 6 files changed, 625 insertions(+), 583 deletions(-) diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingBusiness.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingBusiness.razor index be8dd383..3bf3c99b 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingBusiness.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingBusiness.razor @@ -3,119 +3,134 @@ @inherits AdminBase @* - EN: Onboarding Step 1 — Business information (name, tax ID, address, logo upload). - VI: Bước 1 thiết lập — Thông tin doanh nghiệp (tên, MST, địa chỉ, logo). + EN: Onboarding Step 1 — Business info (name, type, tax ID, address, logo upload) + VI: Bước 1 thiết lập — Thông tin doanh nghiệp (tên, loại hình, MST, địa chỉ, logo) Design: pencil-design/src/pages/tPOS/admin/onboarding-business.pen *@ Thiết lập doanh nghiệp — GoodGo Admin -
+
+
- @* ═══ SIDEBAR — Step Progress ═══ *@ -
- @* Logo *@ -
-
G
-
- GoodGo Admin - Thiết lập ban đầu -
-
- @* Steps *@ -
- TIẾN TRÌNH - @foreach (var s in _steps) - { - var step = s; -
-
1 ? "2px solid var(--admin-border-default)" : "none");"> - @step.Index -
- @step.Label -
- @if (step.Index < 6) +
+
+ @for (int i = 1; i <= 6; i++) { -
+
+ @(i < currentStep ? "✓" : i) +
+ @if (i < 6) + { +
+ } } - } -
-
+
+
+ @for (int i = 1; i <= 6; i++) + { + + @_steps[i - 1].Label + + } +
+

Bước 1/6 — Nhập thông tin sơ bộ để GoodGo hiểu doanh nghiệp của bạn

+ - @* ═══ MAIN CONTENT ═══ *@ -
-
- - @* Header *@ -
-

Thông tin doanh nghiệp

-

Nhập thông tin cơ bản về doanh nghiệp của bạn

+
+
+

Thông tin doanh nghiệp

+

Giúp chúng tôi biết bạn bán gì và ở đâu.

- @* Row 1: Business name + Tax ID *@ -
-
+
+
- +
-
+
- + +
+
+ + +
+
+ + +
+
+ +
- @* Row 2: Address *@ -
- - -
- - @* Row 3: Phone + Email *@ -
-
- - -
-
- - +
+ +
+ @foreach (var type in _businessTypes) + { + + }
- @* Row 4: Logo upload *@ -
- -
- - Kéo thả hoặc nhấn để tải logo - PNG, JPG tối đa 2MB +
+
+ +
+ + Kéo thả hoặc nhấn để chọn logo + @_logoPlaceholder +
+
+
+ Tóm tắt nhanh +
+ Loại hình + @GetBusinessTypeLabel() +
+
+ Địa chỉ + @_address +
+
+ Liên hệ + @_phone +
- @* Footer *@ -
-
-
+
@code { - private string _businessName = ""; - private string _taxId = ""; - private string _address = ""; - private string _phone = ""; - private string _email = ""; + private int currentStep = 1; + private string _businessName = "GoodGo Bistro"; + private string _taxId = "0312345678"; + private string _address = "123 Nguyễn Huệ, Quận 1, TP.HCM"; + private string _phone = "028 7300 1234"; + private string _email = "contact@goodgo.vn"; + private string _businessType = "fnb"; + private string _logoPlaceholder = "Chưa chọn tệp"; private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private readonly StepInfo[] _steps = { new StepInfo(1, "Doanh nghiệp"), new StepInfo(2, "Cửa hàng"), @@ -124,4 +139,15 @@ new StepInfo(5, "Thiết bị"), new StepInfo(6, "Hoàn tất"), }; + + private record BusinessType(string Key, string Label, string Description); + private readonly BusinessType[] _businessTypes = + { + new BusinessType("fnb", "F&B", "Quán cà phê, nhà hàng"), + new BusinessType("retail", "Bán lẻ", "Cửa hàng, showroom"), + new BusinessType("services", "Dịch vụ", "Spa, salon, gym"), + }; + + private string GetBusinessTypeLabel() + => Array.Find(_businessTypes, t => t.Key == _businessType)?.Label ?? "F&B"; } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingDevice.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingDevice.razor index 7ff996c5..588ffde7 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingDevice.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingDevice.razor @@ -3,165 +3,129 @@ @inherits AdminBase @* - EN: Onboarding Step 5 — Device setup (POS terminal, printer, scanner pairing). - VI: Bước 5 thiết lập — Kết nối thiết bị (máy POS, máy in, máy quét). + EN: Onboarding Step 5 — Device setup (POS terminal, printer, scanner, test print) + VI: Bước 5 thiết lập — Kết nối thiết bị (máy POS, máy in, máy quét, in thử) Design: pencil-design/src/pages/tPOS/admin/onboarding-device.pen *@ Kết nối thiết bị — GoodGo Admin -
+
+
- @* ═══ SIDEBAR — Step Progress ═══ *@ -
-
-
G
-
- GoodGo Admin - Thiết lập ban đầu -
-
-
- TIẾN TRÌNH - @foreach (var s in _steps) - { - var step = s; - var isCompleted = step.Index < 5; - var isCurrent = step.Index == 5; -
-
- @(isCompleted ? "✓" : step.Index) -
- @step.Label -
- @if (step.Index < 6) +
+
+ @for (int i = 1; i <= 6; i++) { -
+
+ @(i < currentStep ? "✓" : i) +
+ @if (i < 6) + { +
+ } } - } -
-
+
+
+ @for (int i = 1; i <= 6; i++) + { + + @_steps[i - 1].Label + + } +
+

Bước 5/6 — Ghép nối thiết bị và đảm bảo trang bị vận hành

+ - @* ═══ MAIN CONTENT ═══ *@ -
-
- -
-

Kết nối thiết bị

-

Kết nối thiết bị POS và máy in để bắt đầu bán hàng

+
+
+

Kết nối thiết bị

+

Kết nối máy POS, máy in và máy quét để chuẩn bị cho phiên bán hàng đầu tiên.

- @* QR Pairing section *@ -
-
-
- +
+
+
+ + Thiết bị POS
+ @_terminalLabel +

Ghép nối qua mã QR hoặc Bluetooth trong ứng dụng GoodGo POS.

+
-
-
- Quét mã QR - Mở ứng dụng GoodGo POS trên thiết bị và quét mã QR để kết nối -
-
- Mã ghép nối - GG-8492 +
+
+ + Máy quét mã vạch
+ @(_scannerPaired ? "Đã ghép nối" : "Chưa ghép nối") +
- @* Connected devices *@ -
- Thiết bị đã kết nối (1) -
-
-
- -
-
- iPad POS — Quầy 1 - Kết nối 2 phút trước -
-
-
-
- Online +
+
+
+

Máy in hóa đơn

+

Chọn cổng kết nối phù hợp với cửa hàng

+ Đang sử dụng: @GetPrinterLabel()
-
- - @* Printer setup *@ -
- Thiết lập máy in -
+
@foreach (var printer in _printerOptions) { - var p = printer; -
- - @p.Label - @p.Desc +
+
+ + @printer.Label +
+

@printer.Description

+
}
- @* Footer *@ -
-
- +
+
+ + In thử
+

Đảm bảo đầu ra từ máy in trông ổn và dễ đọc.

+
+ + @_testPrintMessage +
+
+ +
+
- - +
-
+
@code { + private int currentStep = 5; private string _selectedPrinter = "thermal"; - - private record PrinterOption(string Key, string Label, string Icon, string Desc, bool IsSelected); - private List _printerOptions = new(); - - protected override void OnInitialized() - { - UpdatePrinterOptions(); - } - - private void SelectPrinter(string key) - { - _selectedPrinter = key; - UpdatePrinterOptions(); - } - - private void UpdatePrinterOptions() - { - _printerOptions = new() - { - new("thermal", "Máy in nhiệt", "printer", "In hóa đơn 58/80mm", _selectedPrinter == "thermal"), - new("bluetooth", "Bluetooth", "bluetooth", "Kết nối không dây", _selectedPrinter == "bluetooth"), - new("usb", "USB", "usb", "Kết nối có dây", _selectedPrinter == "usb"), - }; - } + private string _testPrintMessage = "Chưa test"; + private bool _scannerPaired = false; + private string _terminalLabel = "iPad POS — Quầy 1"; private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private readonly StepInfo[] _steps = { new StepInfo(1, "Doanh nghiệp"), new StepInfo(2, "Cửa hàng"), @@ -170,4 +134,35 @@ new StepInfo(5, "Thiết bị"), new StepInfo(6, "Hoàn tất"), }; + + private record PrinterOption(string Key, string Label, string Description); + private readonly PrinterOption[] _printerOptions = + { + new PrinterOption("thermal", "Máy in nhiệt", "Hóa đơn 58/80mm"), + new PrinterOption("bluetooth", "Bluetooth", "Không dây cho quầy nhỏ"), + new PrinterOption("usb", "USB", "Kết nối có dây ổn định"), + }; + + private void SelectPrinter(string key) + { + _selectedPrinter = key; + } + + private void PairTerminal() + { + _terminalLabel = "iPad POS — Quầy 2"; + } + + private void ToggleScannerPairing() + { + _scannerPaired = !_scannerPaired; + } + + private void TriggerTestPrint() + { + _testPrintMessage = "Đã in thành công"; + } + + private string GetPrinterLabel() + => Array.Find(_printerOptions, p => p.Key == _selectedPrinter)?.Label ?? "Máy in nhiệt"; } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingProducts.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingProducts.razor index 96fa0a46..868fcf8c 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingProducts.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingProducts.razor @@ -3,141 +3,134 @@ @inherits AdminBase @* - EN: Onboarding Step 3 — Add initial products (quick form, CSV import, product list preview). - VI: Bước 3 thiết lập — Thêm sản phẩm ban đầu (form nhanh, import CSV, danh sách). + EN: Onboarding Step 3 — Add initial products (quick form, CSV import, product list preview) + VI: Bước 3 thiết lập — Thêm sản phẩm ban đầu (form nhanh, import CSV, danh sách) Design: pencil-design/src/pages/tPOS/admin/onboarding-products.pen *@ Thêm sản phẩm — GoodGo Admin -
+
+
- @* ═══ SIDEBAR — Step Progress ═══ *@ -
-
-
G
-
- GoodGo Admin - Thiết lập ban đầu -
-
-
- TIẾN TRÌNH - @foreach (var s in _steps) - { - var step = s; - var isCompleted = step.Index < 3; - var isCurrent = step.Index == 3; -
-
- @(isCompleted ? "✓" : step.Index) +
+
+ @for (int i = 1; i <= 6; i++) + { +
+ @(i < currentStep ? "✓" : i)
- @step.Label -
- @if (step.Index < 6) - { -
+ @if (i < 6) + { +
+ } } - } -
-
- - @* ═══ MAIN CONTENT ═══ *@ -
-
- -
-

Thêm sản phẩm

-

Thêm sản phẩm vào cửa hàng hoặc bỏ qua để thêm sau

- - @* Import options *@ -
-
- - Import từ CSV -
-
- - Nhập thủ công -
-
- - @* Quick add form *@ -
-
- - -
-
- - -
-
- - -
- -
- - @* Product list preview *@ -
- Sản phẩm đã thêm (@_products.Count) - @foreach (var product in _products) +
+ @for (int i = 1; i <= 6; i++) { - var p = product; -
-
-
- -
-
- @p.Name - @p.Category -
+ + @_steps[i - 1].Label + + } +
+

Bước 3/6 — Nhập vài sản phẩm mẫu hoặc import thẳng từ file CSV

+ + +
+
+

Thêm sản phẩm đầu tiên

+

Không cần làm tất cả ngay, bạn có thể bắt đầu với vài món tiêu biểu.

+
+ +
+
+
+ + Import từ CSV +
+

Tải file định dạng chuẩn GoodGo để tiết kiệm thời gian.

+ + @_importStatus +
+
+ Nhập thủ công +
+
+ +
- @p.Price +
+ + +
+
+ + +
+
- } +
- @* Footer *@ -
-
- +
+

Danh sách sản phẩm (@_products.Count)

+
+ @foreach (var product in _products) + { +
+
+
@product.Name
+
@product.Category
+
+ @product.Price +
+ }
+
+ +
+
- - +
-
+
@code { - private string _newProductName = ""; - private string _newProductPrice = ""; - private string _newProductCategory = ""; + private int currentStep = 3; + private string _importStatus = "Chưa import"; + private string _newProductName = "Cà phê sữa đá"; + private string _newProductPrice = "35,000"; + private string _newProductCategory = "Đồ uống"; + + private record StepInfo(int Index, string Label); + private readonly StepInfo[] _steps = + { + new StepInfo(1, "Doanh nghiệp"), + new StepInfo(2, "Cửa hàng"), + new StepInfo(3, "Sản phẩm"), + new StepInfo(4, "Nhân viên"), + new StepInfo(5, "Thiết bị"), + new StepInfo(6, "Hoàn tất"), + }; private record ProductItem(string Name, string Price, string Category); private List _products = new() @@ -149,22 +142,20 @@ private void AddProduct() { - if (!string.IsNullOrWhiteSpace(_newProductName)) + if (string.IsNullOrWhiteSpace(_newProductName) || string.IsNullOrWhiteSpace(_newProductPrice)) { - _products.Add(new(_newProductName, $"{_newProductPrice}đ", _newProductCategory)); - _newProductName = ""; - _newProductPrice = ""; + _importStatus = "Vui lòng nhập tên và giá"; + return; } + + _products.Insert(0, new ProductItem(_newProductName, $"{_newProductPrice}đ", _newProductCategory)); + _newProductName = string.Empty; + _newProductPrice = string.Empty; + _importStatus = "Đã thêm sản phẩm mới"; } - private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private void ImportFromCsv() { - new StepInfo(1, "Doanh nghiệp"), - new StepInfo(2, "Cửa hàng"), - new StepInfo(3, "Sản phẩm"), - new StepInfo(4, "Nhân viên"), - new StepInfo(5, "Thiết bị"), - new StepInfo(6, "Hoàn tất"), - }; + _importStatus = "Đang phân tích file..."; + } } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingReady.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingReady.razor index 17fb495d..8927643d 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingReady.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingReady.razor @@ -3,105 +3,105 @@ @inherits AdminBase @* - EN: Onboarding Step 6 — All set! Summary checklist and CTA to start selling. - VI: Bước 6 thiết lập — Hoàn tất! Checklist tóm tắt và nút bắt đầu bán hàng. + EN: Onboarding Step 6 — All set! Summary checklist and CTA to start selling + VI: Bước 6 thiết lập — Hoàn tất! Checklist tóm tắt và nút bắt đầu sử dụng Design: pencil-design/src/pages/tPOS/admin/onboarding-ready.pen *@ Hoàn tất thiết lập — GoodGo Admin -
+ + +
+
+ +
+
+ @for (int i = 1; i <= 6; i++) { -
+
+ @(i < currentStep ? "✓" : i) +
+ @if (i < 6) + { +
+ } } - } -
-
+
+
+ @for (int i = 1; i <= 6; i++) + { + + @_steps[i - 1].Label + + } +
+

Bước 6/6 — Mọi thứ đã sẵn sàng, hãy bắt đầu hành trình bán hàng

+ - @* ═══ MAIN CONTENT ═══ *@ -
-
- - @* Success icon *@ -
- +
+
+
+
+
+
+
+

Thiết lập hoàn tất!

+

Tất cả cấu phần chính đã sẵn sàng. Hãy bắt đầu bán hàng và mang trải nghiệm GoodGo đến khách hàng.

- @* Title *@ -
-

Thiết lập hoàn tất!

-

Mọi thứ đã sẵn sàng để bạn bắt đầu bán hàng

-
- - @* Checklist *@ -
+
@foreach (var item in _checklist) { - var c = item; -
-
- - @c.Label -
-
- @c.Value - +
+
+ + @item.Label
+ @item.Value
}
- @* CTA Button *@ - - @* Guide link *@ - Xem hướng dẫn sử dụng -
+ +
@code { - private record ChecklistItem(string Icon, string IconColor, string Label, string Value); - private readonly ChecklistItem[] _checklist = new[] - { - new ChecklistItem("building-2", "#3B82F6", "Thông tin doanh nghiệp", "Đã hoàn tất"), - new ChecklistItem("store", "#FF5C00", "Cửa hàng đầu tiên", "Coffee House Q1"), - new ChecklistItem("package", "#8B5CF6", "Sản phẩm", "3 sản phẩm"), - new ChecklistItem("users", "#EC4899", "Nhân viên", "2 người"), - new ChecklistItem("tablet", "#22C55E", "Thiết bị POS", "1 thiết bị"), - }; + private int currentStep = 6; private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private readonly StepInfo[] _steps = { new StepInfo(1, "Doanh nghiệp"), new StepInfo(2, "Cửa hàng"), @@ -110,4 +110,14 @@ new StepInfo(5, "Thiết bị"), new StepInfo(6, "Hoàn tất"), }; + + private record ChecklistItem(string Icon, string IconColor, string Label, string Value); + private readonly ChecklistItem[] _checklist = + { + new ChecklistItem("building-2", "#3B82F6", "Thông tin doanh nghiệp", "Đã hoàn tất"), + new ChecklistItem("store", "#FF5C00", "Cửa hàng đầu tiên", "Coffee House Q1"), + new ChecklistItem("package", "#8B5CF6", "Sản phẩm", "3 món mẫu"), + new ChecklistItem("users", "#EC4899", "Nhân viên", "2 người"), + new ChecklistItem("tablet", "#22C55E", "Thiết bị", "1 thiết bị"), + }; } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStaff.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStaff.razor index 6fdbfd57..e0ceac21 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStaff.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStaff.razor @@ -3,147 +3,135 @@ @inherits AdminBase @* - EN: Onboarding Step 4 — Add staff members (name, role, email, PIN, staff list preview). - VI: Bước 4 thiết lập — Thêm nhân viên (tên, vai trò, email, PIN, danh sách). + EN: Onboarding Step 4 — Add staff members (name, role, email, PIN, staff list preview) + VI: Bước 4 thiết lập — Thêm nhân viên (tên, vai trò, email, mã PIN, danh sách) Design: pencil-design/src/pages/tPOS/admin/onboarding-staff.pen *@ Thêm nhân viên — GoodGo Admin -
+
+
- @* ═══ SIDEBAR — Step Progress ═══ *@ -
-
-
G
-
- GoodGo Admin - Thiết lập ban đầu -
-
-
- TIẾN TRÌNH - @foreach (var s in _steps) - { - var step = s; - var isCompleted = step.Index < 4; - var isCurrent = step.Index == 4; -
-
- @(isCompleted ? "✓" : step.Index) -
- @step.Label -
- @if (step.Index < 6) +
+
+ @for (int i = 1; i <= 6; i++) { -
+
+ @(i < currentStep ? "✓" : i) +
+ @if (i < 6) + { +
+ } } - } -
-
+
+
+ @for (int i = 1; i <= 6; i++) + { + + @_steps[i - 1].Label + + } +
+

Bước 4/6 — Mời nhân viên cốt lõi vào hệ thống

+ - @* ═══ MAIN CONTENT ═══ *@ -
-
- -
-

Thêm nhân viên

-

Mời nhân viên tham gia hệ thống hoặc bỏ qua để thêm sau

+
+
+

Thêm nhân viên

+

Cung cấp quyền truy cập cho quản lý, thu ngân và nhân viên hỗ trợ.

- @* Invite form *@ -
-
- - +
+
+ +
-
+
+ + +
+
-
+ +
+
- @* Staff list *@ -
- Đã mời (@_staffList.Count) - @foreach (var staff in _staffList) - { - var s = staff; -
-
-
@s.Initials
-
- @s.Email - @s.Role +
+
+

Nhân viên đã mời (@_staffList.Count)

+ Những mã PIN có thể đổi sau +
+
+ @foreach (var staff in _staffList) + { +
+
+
+ @staff.Initials +
+
+
@staff.Name
+
@staff.Role
+
+
+
+ PIN: @staff.Pin + +
+ Đang chờ +
-
-
- Đang chờ -
-
- } + } +
- @* Footer *@ -
+
+
- -
-
- - +
-
+
@code { - private string _newStaffEmail = ""; + private int currentStep = 4; + private string _newStaffName = "Nguyễn Văn A"; + private string _newStaffEmail = "van.a@goodgo.vn"; private string _newStaffRole = "cashier"; - - private record StaffItem(string Email, string Role, string Initials, string Color); - private List _staffList = new() - { - new("nguyenvana@email.com", "Quản lý", "NA", "#3B82F6"), - new("tranthib@email.com", "Thu ngân", "TB", "#8B5CF6"), - }; - - private void InviteStaff() - { - if (!string.IsNullOrWhiteSpace(_newStaffEmail)) - { - var initials = _newStaffEmail[..2].ToUpper(); - var roleName = _newStaffRole switch { "manager" => "Quản lý", "barista" => "Barista", "waiter" => "Phục vụ", _ => "Thu ngân" }; - _staffList.Add(new(_newStaffEmail, roleName, initials, "#EC4899")); - _newStaffEmail = ""; - } - } + private string _newStaffPin = "1234"; private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private readonly StepInfo[] _steps = { new StepInfo(1, "Doanh nghiệp"), new StepInfo(2, "Cửa hàng"), @@ -152,4 +140,46 @@ new StepInfo(5, "Thiết bị"), new StepInfo(6, "Hoàn tất"), }; + + private record StaffItem(string Name, string Email, string Role, string Pin, string Initials, string Color); + private List _staffList = new() + { + new("Nguyễn Văn A", "manager@goodgo.vn", "Quản lý", "8974", "VA", "#3B82F6"), + new("Trần Thị B", "cashier@goodgo.vn", "Thu ngân", "5621", "TB", "#EC4899"), + }; + + private void AddStaff() + { + if (string.IsNullOrWhiteSpace(_newStaffName) || string.IsNullOrWhiteSpace(_newStaffEmail)) + { + return; + } + + var initials = string.Empty; + foreach (var chunk in _newStaffName.Split(' ', StringSplitOptions.RemoveEmptyEntries)) + { + if (chunk.Length > 0) + { + initials += char.ToUpper(chunk[0]); + } + } + + if (string.IsNullOrEmpty(initials) && _newStaffEmail.Length >= 2) + { + initials = _newStaffEmail.Substring(0, 2).ToUpper(); + } + + var roleLabel = _newStaffRole switch + { + "manager" => "Quản lý", + "barista" => "Barista", + "waiter" => "Phục vụ", + _ => "Thu ngân", + }; + + _staffList.Insert(0, new StaffItem(_newStaffName, _newStaffEmail, roleLabel, _newStaffPin, initials, "#8B5CF6")); + _newStaffName = string.Empty; + _newStaffEmail = string.Empty; + _newStaffPin = string.Empty; + } } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStore.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStore.razor index 64187b3a..ffca7a88 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStore.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Onboarding/OnboardingStore.razor @@ -3,125 +3,106 @@ @inherits AdminBase @* - EN: Onboarding Step 2 — First store setup (name, address, phone, business type). - VI: Bước 2 thiết lập — Tạo cửa hàng đầu tiên (tên, địa chỉ, SĐT, loại hình). + EN: Onboarding Step 2 — First store setup (name, address, phone, operating hours, store type) + VI: Bước 2 thiết lập — Tạo cửa hàng đầu tiên (tên, địa chỉ, SĐT, giờ hoạt động, loại hình) Design: pencil-design/src/pages/tPOS/admin/onboarding-store.pen *@ Tạo cửa hàng — GoodGo Admin -
+
+
- @* ═══ SIDEBAR — Step Progress ═══ *@ -
-
-
G
-
- GoodGo Admin - Thiết lập ban đầu -
-
-
- TIẾN TRÌNH - @foreach (var s in _steps) - { - var step = s; - var isCompleted = step.Index < 2; - var isCurrent = step.Index == 2; -
-
- @(isCompleted ? "✓" : step.Index) -
- @step.Label -
- @if (step.Index < 6) +
+
+ @for (int i = 1; i <= 6; i++) { -
+
+ @(i < currentStep ? "✓" : i) +
+ @if (i < 6) + { +
+ } } - } -
-
+
+
+ @for (int i = 1; i <= 6; i++) + { + + @_steps[i - 1].Label + + } +
+

Bước 2/6 — Khởi tạo cửa hàng dựa trên thông tin doanh nghiệp hiện tại

+ - @* ═══ MAIN CONTENT ═══ *@ -
-
- -
-

Tạo cửa hàng đầu tiên

-

Thiết lập thông tin cửa hàng và chọn loại hình kinh doanh

+
+
+

Tạo cửa hàng đầu tiên

+

Phiên bản đầu tiên của cửa hàng sẽ thừa hưởng từ @_parentBusinessName.

- @* Store name *@ -
- - +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
- @* Address *@ -
- - -
- - @* Phone *@ -
- - -
- - @* Business type selector *@ -
- -
+
+ +
@foreach (var type in _storeTypes) { - var t = type; - }
- @* Footer *@ -
- -
-
+
@code { - private string _storeName = ""; - private string _storeAddress = ""; - private string _storePhone = ""; - private string? _selectedType; - - private record StoreType(string Key, string Label, string Icon, string Color, string Desc); - private readonly StoreType[] _storeTypes = new[] - { - new StoreType("cafe", "Café", "coffee", "#FF5C00", "Quán cà phê, trà sữa"), - new StoreType("restaurant", "Nhà hàng", "utensils", "#3B82F6", "Nhà hàng, quán ăn"), - new StoreType("karaoke", "Karaoke", "mic", "#8B5CF6", "Karaoke, giải trí"), - new StoreType("spa", "Spa & Beauty", "sparkles", "#EC4899", "Spa, thẩm mỹ, nail"), - new StoreType("retail", "Bán lẻ", "shopping-bag", "#22C55E", "Cửa hàng bán lẻ"), - }; + private int currentStep = 2; + private string _parentBusinessName = "GoodGo Bistro"; + private string _storeName = "GoodGo Coffee Q1"; + private string _storeAddress = "123 Nguyễn Huệ, Quận 1, TP.HCM"; + private string _storePhone = "0901 234 567"; + private string _storeHours = "08:00 - 22:00"; + private string _storeType = "cafe"; private record StepInfo(int Index, string Label); - private readonly StepInfo[] _steps = new[] + private readonly StepInfo[] _steps = { new StepInfo(1, "Doanh nghiệp"), new StepInfo(2, "Cửa hàng"), @@ -130,4 +111,13 @@ new StepInfo(5, "Thiết bị"), new StepInfo(6, "Hoàn tất"), }; + + private record StoreType(string Key, string Label, string Description); + private readonly StoreType[] _storeTypes = + { + new StoreType("cafe", "Café", "Cà phê, trà sữa"), + new StoreType("restaurant", "Nhà hàng", "Đồ ăn, buffet"), + new StoreType("retail", "Kinh doanh", "Bán lẻ, cửa hàng"), + new StoreType("services", "Dịch vụ", "Spa, salon, gym"), + }; }