feat: Simplify authentication workflow files by consolidating device-specific designs and adding new workflow screens for OTP verification, password reset, and two-factor authentication, enhancing overall structure and usability.
This commit is contained in:
Ho Ngoc Hai
@@ -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)
|
||||
|
||||
175
pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen
Normal file
175
pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen
Normal file
@@ -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"}
|
||||
}
|
||||
}
|
||||
@@ -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}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
@@ -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"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user