diff --git a/pencil-design/docs/auth-workflow-guide.md b/pencil-design/docs/auth-workflow-guide.md index 39fa06aa..cd771762 100644 --- a/pencil-design/docs/auth-workflow-guide.md +++ b/pencil-design/docs/auth-workflow-guide.md @@ -300,26 +300,19 @@ Yêu cầu mật khẩu: ``` src/pages/auth/ ├── login/ -│ ├── customer-desktop.pen -│ ├── customer-tablet.pen -│ ├── customer-mobile.pen -│ ├── staff-desktop.pen -│ ├── staff-tablet.pen -│ ├── staff-mobile.pen -│ ├── admin-desktop.pen -│ ├── admin-tablet.pen -│ ├── admin-mobile.pen -│ ├── branch-desktop.pen -│ ├── branch-tablet.pen -│ └── branch-mobile.pen +│ ├── customer-{desktop,tablet,mobile}.pen +│ ├── staff-{desktop,tablet,mobile}.pen +│ ├── admin-{desktop,tablet,mobile}.pen +│ └── branch-{desktop,tablet,mobile}.pen ├── register/ -│ ├── customer-desktop.pen -│ ├── customer-tablet.pen -│ └── customer-mobile.pen -└── forgot-password/ - ├── desktop.pen - ├── tablet.pen - └── mobile.pen +│ └── customer-{desktop,tablet,mobile}.pen +├── forgot-password/ +│ └── {desktop,tablet,mobile}.pen +└── workflow/ + ├── otp-verify.pen # OTP input + Success state + ├── password-reset.pen # Form + Success state + ├── two-factor-auth.pen # 2FA for Admin + └── email-sent.pen # Confirmation screen ``` -**Tổng: 18 files** (4 roles × 3 devices + 3 register + 3 forgot-password) +**Tổng: 22 files** (18 auth pages + 4 workflow screens) diff --git a/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen b/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen new file mode 100644 index 00000000..0fc2d08f --- /dev/null +++ b/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen @@ -0,0 +1,175 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "BaristaQueue", + "name": "Screen/Barista-Queue", + "reusable": true, + "width": 1400, + "height": 900, + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", "id": "Header", "width": "fill_container", "padding": [16, 24], "fill": "$bg-elevated", + "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, + "justifyContent": "space_between", "alignItems": "center", + "children": [ + {"type": "frame", "id": "HeaderLeft", "gap": 16, "alignItems": "center", "children": [ + {"type": "icon_font", "id": "Logo", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "TitleBox", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Title", "fill": "$text-primary", "content": "BARISTA QUEUE", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, + {"type": "text", "id": "Subtitle", "fill": "$text-secondary", "content": "Màn hình pha chế", "fontFamily": "Roboto", "fontSize": 12} + ]} + ]}, + {"type": "frame", "id": "HeaderRight", "gap": 16, "alignItems": "center", "children": [ + {"type": "frame", "id": "Stats", "gap": 24, "children": [ + {"type": "frame", "id": "Stat1", "layout": "vertical", "alignItems": "center", "children": [ + {"type": "text", "id": "Stat1Val", "fill": "#F59E0B", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Stat1Lbl", "fill": "$text-tertiary", "content": "Đang chờ", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Stat2", "layout": "vertical", "alignItems": "center", "children": [ + {"type": "text", "id": "Stat2Val", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Stat2Lbl", "fill": "$text-tertiary", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} + ]}, + {"type": "frame", "id": "Stat3", "layout": "vertical", "alignItems": "center", "children": [ + {"type": "text", "id": "Stat3Val", "fill": "#3B82F6", "content": "45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, + {"type": "text", "id": "Stat3Lbl", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Time", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [ + {"type": "text", "id": "TimeText", "fill": "$text-primary", "content": "14:35:22", "fontFamily": "Roboto Mono", "fontSize": 18, "fontWeight": "600"} + ]} + ]} + ] + }, + { + "type": "frame", "id": "Content", "width": "fill_container", "height": "fill_container", "padding": 24, "gap": 24, + "children": [ + {"type": "frame", "id": "QueueCol", "width": 400, "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ + {"type": "frame", "id": "QueueHeader", "width": "fill_container", "padding": 16, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "QueueTitle", "fill": "#FFF", "content": "🕐 ĐANG CHỜ", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "frame", "id": "QueueCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "QueueCountT", "fill": "#FFF", "content": "8 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "QueueList", "width": "fill_container", "height": "fill_container", "padding": 12, "layout": "vertical", "gap": 10, "children": [ + {"type": "frame", "id": "Q1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Q1L", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Q1Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q1NumT", "fill": "#FFF", "content": "#58", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "frame", "id": "Q1Info", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Q1Name", "fill": "$text-primary", "content": "Latte Caramel", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Q1Note", "fill": "$text-tertiary", "content": "Size L · Ít đường", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Q1R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ + {"type": "text", "id": "Q1Time", "fill": "#F59E0B", "content": "3:24", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, + {"type": "icon_font", "id": "Q1Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]} + ]}, + {"type": "frame", "id": "Q2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Q2L", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Q2Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q2NumT", "fill": "#FFF", "content": "#59", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "frame", "id": "Q2Info", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Q2Name", "fill": "$text-primary", "content": "Americano", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Q2Note", "fill": "$text-tertiary", "content": "Size M · Đá riêng", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Q2R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ + {"type": "text", "id": "Q2Time", "fill": "#F59E0B", "content": "2:51", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, + {"type": "icon_font", "id": "Q2Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]} + ]}, + {"type": "frame", "id": "Q3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "Q3L", "gap": 12, "alignItems": "center", "children": [ + {"type": "frame", "id": "Q3Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q3NumT", "fill": "#FFF", "content": "#60", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, + {"type": "frame", "id": "Q3Info", "layout": "vertical", "gap": 2, "children": [ + {"type": "text", "id": "Q3Name", "fill": "$text-primary", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, + {"type": "text", "id": "Q3Note", "fill": "$text-tertiary", "content": "x2 · Extra shot", "fontFamily": "Roboto", "fontSize": 11} + ]} + ]}, + {"type": "frame", "id": "Q3R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ + {"type": "text", "id": "Q3Time", "fill": "#F59E0B", "content": "1:45", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, + {"type": "icon_font", "id": "Q3Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "ProgressCol", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ + {"type": "frame", "id": "ProgressHeader", "width": "fill_container", "padding": 16, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "ProgressTitle", "fill": "#FFF", "content": "☕ ĐANG PHA CHẾ", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "frame", "id": "ProgressCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ProgressCountT", "fill": "#FFF", "content": "3 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "ProgressList", "width": "fill_container", "height": "fill_container", "padding": 16, "gap": 16, "children": [ + {"type": "frame", "id": "P1", "width": 280, "fill": "#22C55E10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "P1Top", "width": "fill_container", "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "P1Num", "width": 48, "height": 48, "fill": "#22C55E", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1NumT", "fill": "#FFF", "content": "#55", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "frame", "id": "P1Timer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "P1TimerT", "fill": "#22C55E", "content": "1:32", "fontFamily": "Roboto Mono", "fontSize": 20, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "P1Info", "width": "fill_container", "padding": [0, 16, 16, 16], "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "P1Name", "fill": "$text-primary", "content": "Mocha Đá Xay", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "P1Note", "fill": "$text-secondary", "content": "Size L · Whip cream", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "frame", "id": "P1BtnBox", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "P1BtnDone", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1BtnDoneT", "fill": "#FFF", "content": "✓ XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]} + ]} + ]} + ]}, + {"type": "frame", "id": "P2", "width": 280, "fill": "#F59E0B10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "children": [ + {"type": "frame", "id": "P2Top", "width": "fill_container", "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "P2Num", "width": 48, "height": 48, "fill": "#F59E0B", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2NumT", "fill": "#FFF", "content": "#56", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, + {"type": "frame", "id": "P2Timer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "P2TimerT", "fill": "#F59E0B", "content": "0:45", "fontFamily": "Roboto Mono", "fontSize": 20, "fontWeight": "700"}]} + ]}, + {"type": "frame", "id": "P2Info", "width": "fill_container", "padding": [0, 16, 16, 16], "layout": "vertical", "gap": 8, "children": [ + {"type": "text", "id": "P2Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, + {"type": "text", "id": "P2Note", "fill": "$text-secondary", "content": "Size M · 50% đường", "fontFamily": "Roboto", "fontSize": 13}, + {"type": "frame", "id": "P2BtnBox", "width": "fill_container", "gap": 8, "children": [ + {"type": "frame", "id": "P2BtnDone", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2BtnDoneT", "fill": "#FFF", "content": "✓ XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]} + ]} + ]} + ]} + ]} + ]}, + {"type": "frame", "id": "ReadyCol", "width": 300, "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ + {"type": "frame", "id": "ReadyHeader", "width": "fill_container", "padding": 16, "fill": "#3B82F6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "text", "id": "ReadyTitle", "fill": "#FFF", "content": "🔔 SẴN SÀNG", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, + {"type": "frame", "id": "ReadyCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ReadyCountT", "fill": "#FFF", "content": "5 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} + ]}, + {"type": "frame", "id": "ReadyList", "width": "fill_container", "height": "fill_container", "padding": 12, "layout": "vertical", "gap": 8, "children": [ + {"type": "frame", "id": "R1", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "R1L", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "R1Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R1NumT", "fill": "#FFF", "content": "#52", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "R1Name", "fill": "$text-primary", "content": "Espresso", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "icon_font", "id": "R1Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "R2", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "R2L", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "R2Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R2NumT", "fill": "#FFF", "content": "#53", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "R2Name", "fill": "$text-primary", "content": "Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "icon_font", "id": "R2Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]}, + {"type": "frame", "id": "R3", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ + {"type": "frame", "id": "R3L", "gap": 10, "alignItems": "center", "children": [ + {"type": "frame", "id": "R3Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R3NumT", "fill": "#FFF", "content": "#54", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, + {"type": "text", "id": "R3Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + ]}, + {"type": "icon_font", "id": "R3Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} + ]} + ]} + ]} + ] + } + ] + } + ], + "variables": { + "bg-elevated": {"type": "color", "value": "#1A1A1D"}, + "bg-interactive": {"type": "color", "value": "#2A2A2E"}, + "bg-page": {"type": "color", "value": "#0A0A0B"}, + "border-subtle": {"type": "color", "value": "#1F1F23"}, + "orange-primary": {"type": "color", "value": "#FF5C00"}, + "text-primary": {"type": "color", "value": "#FFFFFF"}, + "text-secondary": {"type": "color", "value": "#ADADB0"}, + "text-tertiary": {"type": "color", "value": "#8B8B90"} + } +} 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 f1870fa6..51d6a503 100644 --- a/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen +++ b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen @@ -26,8 +26,10 @@ {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🎤 KARAOKE WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Time-Based Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} ]}, - {"type": "frame", "id": "WFBadge", "fill": "#8B5CF620", "cornerRadius": 12, "padding": [10, 20], "children": [ - {"type": "text", "id": "WFBadgeText", "fill": "#8B5CF6", "content": "1-4 giờ / phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ + {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge3", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#8B5CF6", "content": "1-4 giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} ]} ] }, @@ -115,11 +117,18 @@ ]} ]}, {"type": "icon_font", "id": "WFArrow7", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep8", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 32, "height": 32, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, - {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Num", "width": 26, "height": 26, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} + {"type": "frame", "id": "WFStepLoyalty", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStepLoyaltyIcon", "width": "fill_container", "height": 60, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepLoyaltyIc", "width": 28, "height": 28, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStepLoyaltyInfo", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStepLoyaltyTitle", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, + {"type": "text", "id": "WFStepLoyaltyDesc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow8", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep8", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 60, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 28, "height": 28, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, + {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} ]} ]} ]} @@ -135,10 +144,10 @@ "gap": 32, "justifyContent": "center", "children": [ - {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Timer chạy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#EF4444", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Timer dừng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop (trong phòng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} + {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Timer", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Payment", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#14B8A6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 11}]}, + {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop", "fontFamily": "Roboto", "fontSize": 11}]} ] } ] 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 dad058ca..a799a90d 100644 --- a/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen +++ b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen @@ -26,8 +26,10 @@ {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🍽️ RESTAURANT WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Full Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} ]}, - {"type": "frame", "id": "WFBadge", "fill": "#EF444420", "cornerRadius": 12, "padding": [10, 20], "children": [ - {"type": "text", "id": "WFBadgeText", "fill": "#EF4444", "content": "30-90 phút / bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ + {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge3", "fill": "#EF444420", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#EF4444", "content": "30-90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} ]} ] }, @@ -104,11 +106,18 @@ ]} ]}, {"type": "icon_font", "id": "WFArrow8", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep9", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 80, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 36, "height": 36, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, - {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Num", "width": 28, "height": 28, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + {"type": "frame", "id": "WFStepLoyalty", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStepLoyaltyIcon", "width": "fill_container", "height": 70, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepLoyaltyIc", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, + {"type": "frame", "id": "WFStepLoyaltyInfo", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStepLoyaltyTitle", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, + {"type": "text", "id": "WFStepLoyaltyDesc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} + ]} + ]}, + {"type": "icon_font", "id": "WFArrow9", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, + {"type": "frame", "id": "WFStep9", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ + {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 32, "height": 32, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, + {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ + {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} ]} ]} ]} @@ -124,9 +133,10 @@ "gap": 40, "justifyContent": "center", "children": [ - {"type": "frame", "id": "WFLegend1", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Điểm thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend2", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Kitchen Display", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend3", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 20, "height": 20, "fill": "#3B82F6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loop (thêm món)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} + {"type": "frame", "id": "WFLegend1", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 12}]}, + {"type": "frame", "id": "WFLegend2", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 20, "height": 20, "fill": "#14B8A6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 12}]}, + {"type": "frame", "id": "WFLegend3", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 12}]}, + {"type": "frame", "id": "WFLegend4", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 20, "height": 20, "fill": "#3B82F6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop", "fontFamily": "Roboto", "fontSize": 12}]} ] } ] diff --git a/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen index c311f809..4b85c7ae 100644 --- a/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen +++ b/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen @@ -26,8 +26,10 @@ {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "💆 SPA WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Appointment Service • Post-Pay + Loyalty", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} ]}, - {"type": "frame", "id": "WFBadge", "fill": "#EC489920", "cornerRadius": 12, "padding": [10, 20], "children": [ - {"type": "text", "id": "WFBadgeText", "fill": "#EC4899", "content": "30-120 phút / dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} + {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ + {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, + {"type": "frame", "id": "WFBadge3", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#8B5CF6", "content": "30-120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} ]} ] },