feat: Implement new Customer Lookup modal and badge components in tPOS UI kit, improving user interface and functionality for customer management.
This commit is contained in:
Ho Ngoc Hai
782
pencil-design/src/pages/tPOS-main-cafe.pen
Normal file
782
pencil-design/src/pages/tPOS-main-cafe.pen
Normal file
@@ -0,0 +1,782 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSMainScreen",
|
||||
"name": "POS Main Screen",
|
||||
"reusable": true,
|
||||
"width": 1920,
|
||||
"height": 1080,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSLeftPanel",
|
||||
"name": "leftPanel",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSHeader",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [0, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSHeaderLeft",
|
||||
"name": "headerLeft",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSLogo",
|
||||
"name": "logo",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
|
||||
"cornerRadius": 10,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSStoreInfo",
|
||||
"name": "storeInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POSStoreLocation", "fill": "$text-secondary", "content": "Chi nhánh Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSHeaderCenter",
|
||||
"name": "headerCenter",
|
||||
"width": 400,
|
||||
"height": 44,
|
||||
"fill": "$bg-surface",
|
||||
"cornerRadius": 12,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"padding": [0, 16],
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"},
|
||||
{"type": "text", "id": "POSSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "frame", "id": "POSSearchSpacer", "width": "fill_container", "height": 1},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSScanBtn",
|
||||
"name": "scanBtn",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 8,
|
||||
"padding": [6, 10],
|
||||
"gap": 6,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSScanIcon", "width": 16, "height": 16, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{"type": "text", "id": "POSScanText", "fill": "$text-secondary", "content": "F2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSHeaderRight",
|
||||
"name": "headerRight",
|
||||
"gap": 16,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSDateTime",
|
||||
"name": "dateTime",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"alignItems": "flex_end",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSTime", "fill": "$text-primary", "content": "23:19", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POSDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSUserAvatar",
|
||||
"name": "userAvatar",
|
||||
"width": 40,
|
||||
"height": 40,
|
||||
"fill": "#3B82F630",
|
||||
"cornerRadius": 100,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSUserInitials", "fill": "#3B82F6", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCategoryBar",
|
||||
"name": "categoryBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [12, 24],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCatAll",
|
||||
"name": "catAll",
|
||||
"fill": "$orange-primary",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "POSCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCatDrinks",
|
||||
"name": "catDrinks",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "POSCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCatFood",
|
||||
"name": "catFood",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "POSCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCatDesserts",
|
||||
"name": "catDesserts",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "POSCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSCatCombo",
|
||||
"name": "catCombo",
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 100,
|
||||
"padding": [10, 20],
|
||||
"children": [
|
||||
{"type": "text", "id": "POSCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProductArea",
|
||||
"name": "productArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct1",
|
||||
"name": "product1",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct1Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#3B82F618"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct1Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct2",
|
||||
"name": "product2",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 2, "fill": "$orange-primary"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct2Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#22C55E18"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct2Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct3",
|
||||
"name": "product3",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct3Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct3Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct4",
|
||||
"name": "product4",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct4Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct4Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct5",
|
||||
"name": "product5",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct5Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#EC489918"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct5Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct6",
|
||||
"name": "product6",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct6Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#06B6D418"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct6Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct6Name", "fill": "$text-primary", "content": "Nước Ép Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct6Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct7",
|
||||
"name": "product7",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSProduct7Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F4393918"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct7Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct7Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct7Price", "fill": "$orange-primary", "content": "39,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct8",
|
||||
"name": "product8",
|
||||
"width": 180,
|
||||
"fill": "$bg-elevated",
|
||||
"cornerRadius": 16,
|
||||
"stroke": {"thickness": 1, "fill": "$border-default"},
|
||||
"layout": "vertical",
|
||||
"clip": true,
|
||||
"opacity": 0.5,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct8Img",
|
||||
"name": "img",
|
||||
"width": "fill_container",
|
||||
"height": 120,
|
||||
"fill": "$bg-interactive",
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct8OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSProduct8Content",
|
||||
"name": "content",
|
||||
"width": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"padding": 14,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSProduct8Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSProduct8Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSBottomBar",
|
||||
"name": "bottomBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [12, 24],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickNewOrder",
|
||||
"name": "newOrderBtn",
|
||||
"height": 52,
|
||||
"fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]},
|
||||
"cornerRadius": 12,
|
||||
"padding": [0, 20],
|
||||
"gap": 8,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickNewOrderIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "POSQuickNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickHold",
|
||||
"name": "holdBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickRecall",
|
||||
"name": "recallBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickRecallBadge",
|
||||
"name": "badge",
|
||||
"fill": "#EF4444",
|
||||
"cornerRadius": 100,
|
||||
"padding": [2, 5],
|
||||
"position": "absolute",
|
||||
"x": 34,
|
||||
"y": 6,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSQuickRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickDiscount",
|
||||
"name": "discountBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickCustomer",
|
||||
"name": "customerBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSQuickPrint",
|
||||
"name": "printBtn",
|
||||
"width": 52,
|
||||
"height": 52,
|
||||
"fill": "$bg-interactive",
|
||||
"cornerRadius": 12,
|
||||
"justifyContent": "center",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "icon_font", "id": "POSQuickPrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSRightPanel",
|
||||
"name": "rightPanel",
|
||||
"width": 420,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderHeader",
|
||||
"name": "orderHeader",
|
||||
"width": "fill_container",
|
||||
"padding": [16, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderInfo",
|
||||
"name": "orderInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 4,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSOrderNum", "fill": "$text-primary", "content": "Đơn #0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POSOrderTable", "fill": "$text-secondary", "content": "Bàn 12 • 3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderActions",
|
||||
"name": "orderActions",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSOrderHoldBtn", "name": "holdBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}]},
|
||||
{"type": "frame", "id": "POSOrderMoreBtn", "name": "moreBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItems",
|
||||
"name": "orderItems",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem1",
|
||||
"name": "orderItem1",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem1Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSOrderItem1Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem1Info",
|
||||
"name": "itemInfo",
|
||||
"layout": "vertical",
|
||||
"gap": 2,
|
||||
"children": [
|
||||
{"type": "text", "id": "POSOrderItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"},
|
||||
{"type": "text", "id": "POSOrderItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "POSOrderItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem2",
|
||||
"name": "orderItem2",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem2Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSOrderItem2Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "POSOrderItem2Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "POSOrderItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem3",
|
||||
"name": "orderItem3",
|
||||
"width": "fill_container",
|
||||
"padding": [14, 20],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderItem3Left",
|
||||
"name": "leftContent",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "POSOrderItem3Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "text", "id": "POSOrderItem3Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{"type": "text", "id": "POSOrderItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSOrderSummary",
|
||||
"name": "orderSummary",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-surface",
|
||||
"layout": "vertical",
|
||||
"padding": 20,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSSummarySubtotal",
|
||||
"name": "subtotalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "POSSubtotalValue", "fill": "$text-primary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSSummaryDiscount",
|
||||
"name": "discountRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSDiscountLabel", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"},
|
||||
{"type": "text", "id": "POSDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSSummaryDivider",
|
||||
"name": "divider",
|
||||
"width": "fill_container",
|
||||
"height": 1,
|
||||
"fill": "$border-subtle"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSSummaryTotal",
|
||||
"name": "totalRow",
|
||||
"width": "fill_container",
|
||||
"justifyContent": "space_between",
|
||||
"children": [
|
||||
{"type": "text", "id": "POSTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"},
|
||||
{"type": "text", "id": "POSTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSPaymentBtn",
|
||||
"name": "paymentBtn",
|
||||
"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": "POSPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"},
|
||||
{"type": "text", "id": "POSPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"border-subtle": {"type": "color", "value": "#1F1F23"},
|
||||
"green-success": {"type": "color", "value": "#22C55E"},
|
||||
"orange-primary": {"type": "color", "value": "#FF5C00"},
|
||||
"text-disabled": {"type": "color", "value": "#6B6B70"},
|
||||
"text-primary": {"type": "color", "value": "#FFFFFF"},
|
||||
"text-secondary": {"type": "color", "value": "#ADADB0"},
|
||||
"text-tertiary": {"type": "color", "value": "#8B8B90"}
|
||||
}
|
||||
}
|
||||
135
pencil-design/src/pages/tPOS-main-karaoke.pen
Normal file
135
pencil-design/src/pages/tPOS-main-karaoke.pen
Normal file
@@ -0,0 +1,135 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSKaraokeScreen",
|
||||
"name": "POS Karaoke Screen",
|
||||
"reusable": true,
|
||||
"width": 1920,
|
||||
"height": 1080,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KtvSidebar",
|
||||
"name": "sidebar",
|
||||
"width": 300,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvStoreName", "fill": "$text-primary", "content": "GoodGo Karaoke", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvBranch", "fill": "$text-secondary", "content": "Chi nhánh Hai Bà Trưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KtvRoomArea",
|
||||
"name": "roomArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 16,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvRoomFilter", "width": "fill_container", "gap": 8, "children": [{"type": "frame", "id": "KtvFilterAll", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvFilterVIP", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvFilterNormal", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterNormalText", "fill": "$text-secondary", "content": "Thường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KtvRoomGrid",
|
||||
"name": "roomGrid",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvRoom1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Icon", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom1IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvRoom1Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom1Name", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom1Time", "fill": "$orange-primary", "content": "02:45 • 6 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom1Price", "fill": "$text-primary", "content": "450K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "KtvRoom2", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom2IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom2Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom2Name", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom2Time", "fill": "#EF4444", "content": "01:30 • 8 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom2Price", "fill": "$text-primary", "content": "380K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "KtvRoom3", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Icon", "width": 44, "height": 44, "fill": "#22C55E30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom3IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, {"type": "frame", "id": "KtvRoom3Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom3Name", "fill": "$text-primary", "content": "VIP 03", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom3Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom3Rate", "fill": "$text-secondary", "content": "150K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KtvRoom4", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Icon", "width": 44, "height": 44, "fill": "#F59E0B30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom4IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#F59E0B"}]}, {"type": "frame", "id": "KtvRoom4Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom4Name", "fill": "$text-primary", "content": "Phòng 04", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom4Status", "fill": "#F59E0B", "content": "Đặt trước 20:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom4Rate", "fill": "$text-secondary", "content": "80K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "KtvRoom5", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom5IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom5Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom5Name", "fill": "$text-primary", "content": "Phòng 05", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom5Time", "fill": "#EF4444", "content": "00:45 • 4 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom5Price", "fill": "$text-primary", "content": "120K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "KtvRoomLegend", "width": "fill_container", "gap": 12, "wrap": true, "children": [{"type": "frame", "id": "KtvLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "KtvLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "KtvLegOccText", "fill": "$text-tertiary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "KtvLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KtvMainContent",
|
||||
"name": "mainContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvHeaderRoomInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvRoomBadgeText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvRoomInfoDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvRoomGuest", "fill": "$text-primary", "content": "6 khách • Từ 19:15", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "KtvRoomTimer", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvTimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "KtvTimerText", "fill": "$orange-primary", "content": "02:45:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "KtvSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "KtvSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "KtvDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "KtvTime", "fill": "$text-primary", "content": "22:00", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvUserAvatar", "width": 40, "height": 40, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvUserInit", "fill": "#8B5CF6", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]},
|
||||
{"type": "frame", "id": "KtvCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCatBeerIcon", "width": 14, "height": 14, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSoftDrink", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSoftDrinkText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatFruit", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatFruitText", "fill": "$text-secondary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatCombo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "KtvProductArea",
|
||||
"name": "productArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd1Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "KtvProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd1Price", "fill": "$orange-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "KtvProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd2Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "KtvProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "KtvProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd3Img", "width": "fill_container", "height": 120, "fill": "#EC489918"}, {"type": "frame", "id": "KtvProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "KtvProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "KtvProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd4Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "KtvProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd5Img", "width": "fill_container", "height": 120, "fill": "#06B6D418"}, {"type": "frame", "id": "KtvProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd5Name", "fill": "$text-primary", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd5Price", "fill": "$orange-primary", "content": "15,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"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": "KtvOrderPanel",
|
||||
"name": "orderPanel",
|
||||
"width": 380,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
|
||||
"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": "KtvOrderItems",
|
||||
"name": "orderItems",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "KtvOrdRoomFee", "width": "fill_container", "fill": "#8B5CF610", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeLeft", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeIcon", "width": 32, "height": 32, "fill": "#8B5CF630", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrdRoomFeeIconFont", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvOrdRoomFeeInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvOrdRoomFeeName", "fill": "#8B5CF6", "content": "Giờ phòng VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KtvOrdRoomFeeDetail", "fill": "$text-tertiary", "content": "02:45 × 150,000₫/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "KtvOrdRoomFeePrice", "fill": "#8B5CF6", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "KtvOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem1Price", "fill": "$text-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "KtvOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"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": "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"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
226
pencil-design/src/pages/tPOS-main-restaurant.pen
Normal file
226
pencil-design/src/pages/tPOS-main-restaurant.pen
Normal file
@@ -0,0 +1,226 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSRestaurantScreen",
|
||||
"name": "POS Restaurant Screen",
|
||||
"reusable": true,
|
||||
"width": 1920,
|
||||
"height": 1080,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestSidebar",
|
||||
"name": "sidebar",
|
||||
"width": 280,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestSideHeader",
|
||||
"name": "sideHeader",
|
||||
"width": "fill_container",
|
||||
"padding": 20,
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]},
|
||||
{"type": "frame", "id": "RestStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestStoreName", "fill": "$text-primary", "content": "Nhà Hàng GoodGo", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "RestBranch", "fill": "$text-secondary", "content": "Chi nhánh Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestTableMapArea",
|
||||
"name": "tableMapArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 16,
|
||||
"gap": 12,
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestFloorTabs",
|
||||
"name": "floorTabs",
|
||||
"width": "fill_container",
|
||||
"gap": 8,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestFloor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RestFloor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestTableGrid",
|
||||
"name": "tableGrid",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"clip": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestTableRow1", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [
|
||||
{"type": "frame", "id": "RestTable1", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable1Num", "fill": "$text-primary", "content": "01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable1Info", "fill": "$orange-primary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestTable2", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable2Num", "fill": "#EF4444", "content": "02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable2Info", "fill": "#EF4444", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestTable3", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable3Num", "fill": "#22C55E", "content": "03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable3Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}
|
||||
]},
|
||||
{"type": "frame", "id": "RestTableRow2", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [
|
||||
{"type": "frame", "id": "RestTable4", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable4Num", "fill": "#22C55E", "content": "04", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable4Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestTable5", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable5Num", "fill": "#EF4444", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable5Info", "fill": "#EF4444", "content": "6 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestTable6", "width": 72, "height": 72, "fill": "#F59E0B20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable6Num", "fill": "#F59E0B", "content": "06", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable6Info", "fill": "#F59E0B", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}
|
||||
]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestTableLegend",
|
||||
"name": "tableLegend",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"wrap": true,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "RestLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]},
|
||||
{"type": "frame", "id": "RestLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "RestLegOccText", "fill": "$text-tertiary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]},
|
||||
{"type": "frame", "id": "RestLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "RestLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestMainContent",
|
||||
"name": "mainContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestHeader",
|
||||
"name": "header",
|
||||
"width": "fill_container",
|
||||
"height": 64,
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [0, 24],
|
||||
"justifyContent": "space_between",
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestHeaderTableInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestTableBadgeText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "RestGuestInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestGuestCount", "fill": "$text-primary", "content": "2 khách • 45 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestWaiter", "fill": "$text-secondary", "content": "Phục vụ: Minh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{"type": "frame", "id": "RestSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "RestSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm món ăn, đồ uống...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]},
|
||||
{"type": "frame", "id": "RestHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "RestDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "RestTime", "fill": "$text-primary", "content": "23:26", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestUserAvatar", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestUserInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestCategoryBar",
|
||||
"name": "categoryBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]},
|
||||
"padding": [12, 24],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RestCatAppetizer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAppetizerText", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestCatSeafood", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatSeafoodText", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]},
|
||||
{"type": "frame", "id": "RestCatWine", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCatWineIcon", "width": 14, "height": 14, "iconFontName": "wine", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestCatWineText", "fill": "$text-secondary", "content": "Rượu/Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestProductArea",
|
||||
"name": "productArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd1Img", "width": "fill_container", "height": 120, "fill": "#EF444418"}, {"type": "frame", "id": "RestProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "RestProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd2Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "RestProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd3Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "RestProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "RestProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "RestProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "RestProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd5Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd5Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "RestProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd6Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestBottomBar",
|
||||
"name": "bottomBar",
|
||||
"width": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]},
|
||||
"padding": [12, 24],
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"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": "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"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "RestOrderPanel",
|
||||
"name": "orderPanel",
|
||||
"width": 380,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
|
||||
"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": "RestOrderItems",
|
||||
"name": "orderItems",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "RestOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem1StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RestOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem2StatusText", "fill": "#F59E0B", "content": "Đang chờ bếp", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "RestOrdItem3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem3Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem3StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem3Price", "fill": "$text-primary", "content": "70,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"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": "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"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
132
pencil-design/src/pages/tPOS-main-spa.pen
Normal file
132
pencil-design/src/pages/tPOS-main-spa.pen
Normal file
@@ -0,0 +1,132 @@
|
||||
{
|
||||
"version": "2.6",
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "POSSpaScreen",
|
||||
"name": "POS Spa Screen",
|
||||
"reusable": true,
|
||||
"width": 1920,
|
||||
"height": 1080,
|
||||
"fill": "$bg-page",
|
||||
"layout": "horizontal",
|
||||
"clip": true,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaSidebar",
|
||||
"name": "sidebar",
|
||||
"width": 320,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaStoreName", "fill": "$text-primary", "content": "GoodGo Beauty Spa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SpaBranch", "fill": "$text-secondary", "content": "Chi nhánh Phú Mỹ Hưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaAppointmentArea",
|
||||
"name": "appointmentArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"padding": 16,
|
||||
"gap": 12,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaDatePicker", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCalendarIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaDateText", "fill": "$text-primary", "content": "Hôm nay, 05/02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "icon_font", "id": "SpaDateChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]},
|
||||
{"type": "text", "id": "SpaApptLabel", "fill": "$text-secondary", "content": "Lịch hẹn hôm nay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaApptList",
|
||||
"name": "appointmentList",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 10,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaAppt1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Time", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt1TimeText", "fill": "#22C55E", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt1Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Avatar", "width": 36, "height": 36, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt1Init", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt1Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt1Service", "fill": "$text-secondary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt1Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt1StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt1StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{"type": "frame", "id": "SpaAppt2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Time", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt2TimeText", "fill": "#F59E0B", "content": "11:30 - 12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt2StatusText", "fill": "#F59E0B", "content": "Chờ đến", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt2Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Avatar", "width": 36, "height": 36, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt2Init", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt2Name", "fill": "$text-primary", "content": "Nguyễn Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt2Service", "fill": "$text-secondary", "content": "Nail Art", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt2Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt2StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt2StaffName", "fill": "$text-tertiary", "content": "NV: Mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{"type": "frame", "id": "SpaAppt3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt3TimeText", "fill": "$text-secondary", "content": "14:00 - 15:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt3StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt3Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Avatar", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt3Init", "fill": "#8B5CF6", "content": "PT", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt3Name", "fill": "$text-primary", "content": "Phạm Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt3Service", "fill": "$text-secondary", "content": "Triệt lông", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt3Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt3StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt3StaffName", "fill": "$text-tertiary", "content": "NV: Lan", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]},
|
||||
{"type": "frame", "id": "SpaAppt4", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt4TimeText", "fill": "$text-secondary", "content": "15:30 - 17:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt4StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt4Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Avatar", "width": 36, "height": 36, "fill": "#06B6D430", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt4Init", "fill": "#06B6D4", "content": "LM", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt4Name", "fill": "$text-primary", "content": "Lê My", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt4Service", "fill": "$text-secondary", "content": "Full Body Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt4Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt4StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt4StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "SpaAddApptBtn", "width": "fill_container", "height": 44, "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAddApptIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaAddApptText", "fill": "$text-secondary", "content": "Thêm lịch hẹn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaMainContent",
|
||||
"name": "mainContent",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaHeaderCustomerInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaCustomerAvatar", "width": 44, "height": 44, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaCustomerInit", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCustomerDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaCustomerName", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "frame", "id": "SpaCustomerPoints", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPointsIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "SpaPointsText", "fill": "#F59E0B", "content": "VIP Gold • 2,500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SpaSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm dịch vụ, sản phẩm...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "SpaTime", "fill": "$text-primary", "content": "10:45", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaUserAvatar", "width": 40, "height": 40, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaUserInit", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]},
|
||||
{"type": "frame", "id": "SpaCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCatFacial", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCatFacialIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaCatFacialText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatProducts", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatProductsText", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaProductArea",
|
||||
"name": "productArea",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"padding": 24,
|
||||
"gap": 20,
|
||||
"wrap": true,
|
||||
"alignContent": "flex_start",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaProd1", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd1Img", "width": "fill_container", "height": 130, "fill": "#EC489918"}, {"type": "frame", "id": "SpaProd1Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd1Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd1DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd1DurationText", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd1Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "SpaProd2", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd2Img", "width": "fill_container", "height": 130, "fill": "#8B5CF618"}, {"type": "frame", "id": "SpaProd2Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd2Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd2DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd2DurationText", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd2Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "SpaProd3", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd3Img", "width": "fill_container", "height": 130, "fill": "#F59E0B18"}, {"type": "frame", "id": "SpaProd3Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd3Name", "fill": "$text-primary", "content": "Sơn gel cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd3Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd3DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd3DurationText", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
|
||||
{"type": "frame", "id": "SpaProd4", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd4Img", "width": "fill_container", "height": 130, "fill": "#22C55E18"}, {"type": "frame", "id": "SpaProd4Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd4Name", "fill": "$text-primary", "content": "Triệt lông vĩnh viễn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd4Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd4DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd4DurationText", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd4Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]},
|
||||
{"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": "SpaOrderPanel",
|
||||
"name": "orderPanel",
|
||||
"width": 380,
|
||||
"height": "fill_container",
|
||||
"fill": "$bg-elevated",
|
||||
"stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]},
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "SpaOrderTitle", "fill": "$text-primary", "content": "Hóa đơn - Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaOrderSub", "fill": "$text-secondary", "content": "Lịch hẹn 10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "SpaOrderItems",
|
||||
"name": "orderItems",
|
||||
"width": "fill_container",
|
||||
"height": "fill_container",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{"type": "frame", "id": "SpaOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem1Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem1Price", "fill": "$text-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]},
|
||||
{"type": "frame", "id": "SpaOrdItem2", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem2Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}
|
||||
]
|
||||
},
|
||||
{"type": "frame", "id": "SpaOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "SpaSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaSubtotalValue", "fill": "$text-primary", "content": "1,100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaPointsLabel", "fill": "$text-secondary", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "SpaSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "SpaTotalValue", "fill": "$orange-primary", "content": "1,050,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaSummEarn", "width": "fill_container", "justifyContent": "flex_end", "children": [{"type": "text", "id": "SpaEarnText", "fill": "#F59E0B", "content": "+105 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]},
|
||||
{"type": "frame", "id": "SpaPaymentBtn", "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": "SpaPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {
|
||||
"bg-elevated": {"type": "color", "value": "#1A1A1D"},
|
||||
"bg-interactive": {"type": "color", "value": "#2A2A2E"},
|
||||
"bg-page": {"type": "color", "value": "#0A0A0B"},
|
||||
"bg-surface": {"type": "color", "value": "#111113"},
|
||||
"border-default": {"type": "color", "value": "#2A2A2E"},
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user