admin/pos-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance tPOS UI by adding customer sections across cafe, karaoke, restaurant, and spa workflows, improving user experience with detailed customer information and interaction options.

Browse Source
This commit is contained in:
Ho Ngoc Hai
2026-02-06 01:06:02 +07:00
parent 26ca5820c7
commit dbd052295b
4 changed files with 57 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pencil-design/src/pages/tPOS/pos/cafe/desktop.pen
View File

@@ -600,6 +600,42 @@
}
]
},
{
"type": "frame",
"id": "POSCustomerSection",
"name": "customerSection",
"width": "fill_container",
"fill": "#14B8A610",
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
"padding": [12, 20],
"justifyContent": "space_between",
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "POSCustomerInfo",
"gap": 12,
"alignItems": "center",
"children": [
{"type": "frame", "id": "POSCustomerAvatar", "width": 36, "height": 36, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerAvatarIcon", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]},
{
"type": "frame",
"id": "POSCustomerDetails",
"layout": "vertical",
"gap": 2,
"children": [
{"type": "frame", "id": "POSCustomerNameRow", "gap": 8, "alignItems": "center", "children": [
{"type": "text", "id": "POSCustomerName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"},
{"type": "frame", "id": "POSCustomerVIP", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "POSCustomerVIPText", "fill": "#000", "content": "Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}
]},
{"type": "text", "id": "POSCustomerPhone", "fill": "$text-tertiary", "content": "0901***234 • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 12}
]
}
]
},
{"type": "frame", "id": "POSCustomerRemove", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerRemoveIcon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}
]
},
{
"type": "frame",
"id": "POSOrderItems",
@@ -724,6 +760,20 @@
{"type": "text", "id": "POSDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
]
},
{
"type": "frame",
"id": "POSSummaryLoyalty",
"name": "loyaltyRow",
"width": "fill_container",
"justifyContent": "space_between",
"children": [
{"type": "frame", "id": "POSLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [
{"type": "icon_font", "id": "POSLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"},
{"type": "text", "id": "POSLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 100 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
]},
{"type": "text", "id": "POSLoyaltyValue", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
]
},
{
"type": "frame",
"id": "POSSummaryDivider",

5
pencil-design/src/pages/tPOS/pos/karaoke/desktop.pen
View File

@@ -84,7 +84,7 @@
{"type": "frame", "id": "KtvProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd6Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "KtvProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd6Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd6Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}
]
},
{"type": "frame", "id": "KtvBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvQuickExtend", "height": 52, "fill": "#8B5CF6", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickExtendIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvQuickExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "arrow-right-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickMoveText", "fill": "$text-secondary", "content": "Đổi phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickService", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickServiceIcon", "width": 20, "height": 20, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickServiceText", "fill": "$text-secondary", "content": "Gọi phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]}
{"type": "frame", "id": "KtvBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvQuickExtend", "height": 52, "fill": "#8B5CF6", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickExtendIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvQuickExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "arrow-right-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickMoveText", "fill": "$text-secondary", "content": "Đổi phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickService", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickServiceIcon", "width": 20, "height": 20, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickServiceText", "fill": "$text-secondary", "content": "Gọi phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]}
]
},
{
@@ -98,6 +98,7 @@
"layout": "vertical",
"children": [
{"type": "frame", "id": "KtvOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvOrderTitle", "fill": "$text-primary", "content": "VIP 01 - Bill", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvOrderSub", "fill": "$text-secondary", "content": "Giờ phòng: 02:45 × 150K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]},
{"type": "frame", "id": "KtvCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvCustInfo", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KtvCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCustAvatarIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "KtvCustDetails", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "KtvCustNameRow", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "KtvCustName", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "KtvCustVIP", "fill": "#E5E4E2", "cornerRadius": 4, "padding": [2, 5], "children": [{"type": "text", "id": "KtvCustVIPText", "fill": "#000", "content": "Platinum", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "KtvCustPoints", "fill": "$text-tertiary", "content": "5,800 điểm", "fontFamily": "Roboto", "fontSize": 11}]}]}, {"type": "frame", "id": "KtvCustRemove", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCustRemoveIcon", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]},
{
"type": "frame",
"id": "KtvOrderItems",
@@ -113,7 +114,7 @@
{"type": "frame", "id": "KtvOrdItem3", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem3Price", "fill": "$text-primary", "content": "240,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
]
},
{"type": "frame", "id": "KtvOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "KtvSummRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvRoomValue", "fill": "$text-primary", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvFoodLabel", "fill": "$text-secondary", "content": "Đồ uống/Snack", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvFoodValue", "fill": "$text-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "KtvSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "KtvTotalValue", "fill": "$orange-primary", "content": "1,242,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]},
{"type": "frame", "id": "KtvOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "KtvSummRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvRoomValue", "fill": "$text-primary", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvFoodLabel", "fill": "$text-secondary", "content": "Đồ uống/Snack", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvFoodValue", "fill": "$text-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "KtvLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "KtvLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvLoyaltyValue", "fill": "#14B8A6", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "KtvSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "KtvTotalValue", "fill": "$orange-primary", "content": "1,192,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]},
{"type": "frame", "id": "KtvPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvPaymentText", "fill": "$text-primary", "content": "Tất toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}
]
}

4
pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen
View File

@@ -173,6 +173,7 @@
{"type": "frame", "id": "RestQuickSplit", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickSplitIcon", "width": 20, "height": 20, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickSplitText", "fill": "$text-secondary", "content": "Tách bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
{"type": "frame", "id": "RestQuickMerge", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMergeIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMergeText", "fill": "$text-secondary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
{"type": "frame", "id": "RestQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "move", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMoveText", "fill": "$text-secondary", "content": "Chuyển bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
{"type": "frame", "id": "RestQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]},
{"type": "frame", "id": "RestQuickKitchen", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickKitchenIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestQuickKitchenText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
]
}
@@ -189,6 +190,7 @@
"layout": "vertical",
"children": [
{"type": "frame", "id": "RestOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "RestOrderNum", "fill": "$text-primary", "content": "Bàn 01 - Đơn #0089", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestOrderItemsCount", "fill": "$text-secondary", "content": "4 món • 2 đang chờ bếp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]},
{"type": "frame", "id": "RestCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestCustInfo", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCustAvatarIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "RestCustDetails", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "RestCustNameRow", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "RestCustName", "fill": "$text-primary", "content": "Trần Văn B", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "RestCustVIP", "fill": "#C0C0C0", "cornerRadius": 4, "padding": [2, 5], "children": [{"type": "text", "id": "RestCustVIPText", "fill": "#000", "content": "Silver", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "RestCustPhone", "fill": "$text-tertiary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 11}]}]}, {"type": "frame", "id": "RestCustRemove", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCustRemoveIcon", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]},
{
"type": "frame",
"id": "RestOrderItems",
@@ -204,7 +206,7 @@
{"type": "frame", "id": "RestOrdItem4", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem4QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem4Status", "fill": "#3B82F620", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem4StatusText", "fill": "#3B82F6", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem4Price", "fill": "$text-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
]
},
{"type": "frame", "id": "RestOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "RestSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "RestSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "RestTotalValue", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]},
{"type": "frame", "id": "RestOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "RestSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "RestLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RestLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 50 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "RestLoyaltyValue", "fill": "#14B8A6", "content": "-5,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "RestSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "RestTotalValue", "fill": "$orange-primary", "content": "525,250₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]},
{"type": "frame", "id": "RestPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}
]
}

2
pencil-design/src/pages/tPOS/pos/spa/desktop.pen
View File

@@ -83,7 +83,7 @@
{"type": "frame", "id": "SpaProd5", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd5Img", "width": "fill_container", "height": 130, "fill": "#3B82F618"}, {"type": "frame", "id": "SpaProd5Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd5Name", "fill": "$text-primary", "content": "Uốn/Duỗi tóc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd5Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd5DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd5DurationText", "fill": "$text-tertiary", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd5Price", "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}
]
},
{"type": "frame", "id": "SpaBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaQuickStaff", "height": 52, "fill": "#EC4899", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickStaffIcon", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaQuickStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaQuickHistory", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickHistoryIcon", "width": 20, "height": 20, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickPackage", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickPackageIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickPackageText", "fill": "$text-secondary", "content": "Gói dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]}
{"type": "frame", "id": "SpaBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaQuickStaff", "height": 52, "fill": "#EC4899", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickStaffIcon", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaQuickStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaQuickHistory", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickHistoryIcon", "width": 20, "height": 20, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickPackage", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickPackageIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickPackageText", "fill": "$text-secondary", "content": "Gói dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]}
]
},
{