From 26ca5820c7e2c2b377b7cb938cadb606c6a71728 Mon Sep 17 00:00:00 2001 From: Ho Ngoc Hai Date: Fri, 6 Feb 2026 00:56:59 +0700 Subject: [PATCH] feat: Update POS workflow guides and UI components by adding a new customer lookup step, enhancing user experience and functionality across karaoke and restaurant workflows. --- pencil-design/docs/pos-workflow-guide.md | 3 ++- .../src/pages/tPOS/pos/workflows/karaoke-workflow.pen | 10 +++++++++- .../pages/tPOS/pos/workflows/restaurant-workflow.pen | 8 ++++++++ 3 files changed, 19 insertions(+), 2 deletions(-) diff --git a/pencil-design/docs/pos-workflow-guide.md b/pencil-design/docs/pos-workflow-guide.md index fc5cba98..d223d2c3 100644 --- a/pencil-design/docs/pos-workflow-guide.md +++ b/pencil-design/docs/pos-workflow-guide.md @@ -19,7 +19,8 @@ | **Thanh toán** | Trước | Sau | Sau | Sau | | **Thời gian** | 5-10 phút | 30-90 phút | 1-4 giờ | 30-120 phút | | **Đối tượng** | Counter | Bàn | Phòng | Khách + NV | -| **Tính năng đặc biệt** | Queue | Kitchen | Timer | Loyalty | +| **Tính năng đặc biệt** | Queue | Kitchen | Timer | Appointment | +| **Loyalty** | ✅ Optional | ✅ Optional | ✅ Optional | ✅ Required | --- diff --git a/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen index 51d6a503..2af8c2af 100644 --- a/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen +++ b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen @@ -108,7 +108,15 @@ ]} ]}, {"type": "icon_font", "id": "WFArrow6", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep7", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStepCust", "width": 145, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStepCustIcon", "width": "fill_container", "height": 55, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepCustIc", "width": 24, "height": 24, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStepCustInfo", "width": "fill_container", "padding": 10, "layout": "vertical", "gap": 3, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStepCustTitle", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, + {"type": "text", "id": "WFStepCustDesc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 9} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow6b", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep7", "width": 145, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ {"type": "frame", "id": "WFStep7Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, diff --git a/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen index a799a90d..703e0f01 100644 --- a/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen +++ b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen @@ -97,6 +97,14 @@ ]} ]}, {"type": "icon_font", "id": "WFArrow7", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStepCust", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStepCustIcon", "width": "fill_container", "height": 65, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepCustIc", "width": 28, "height": 28, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStepCustInfo", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStepCustTitle", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "WFStepCustDesc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 9} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow7b", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "frame", "id": "WFStep8", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 80, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 36, "height": 36, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [